前端开发常用 JS 方法
1,获取文件本地url,在上传之前预览
/**
* 获取图片嗯滴url,在上传之前预览
* @param file 选择的图片文件
* @returns {*} url
*/
getFileLocationUrl: function (file) {
var url = null;
// 下面函数执行的效果是一样的,只是需要针对不同的浏览器执行不同的 js 函数而已
if (window.createObjectURL != undefined) { // basic
url = window.createObjectURL(file);
} else if (window.URL != undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file);
} else if (window.webkitURL != undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file);
}
return url;
}
使用方法:
//html:
<img src="{{person.HeadImgUrl}}" style="width: 100%;height: 100%;">
//js:
var file = document.getElementById("up").files[];
$scope.person.HeadImgUrl = API.getFileLocationUrl(file);
2,ajax上传文件:
/**
* 上传文件
* @param file input[type=file]选择的文件
* @param fileName 文件名称
* @param postUrl 请求的后台url地址
* @param token 验证的token
* @param callBack 回调(接收上传结果)
*/
function uploadFile (file, fileName, postUrl, token, successCallBack, errorCallBack) {
var formData = new FormData();
formData.append('uploadFile', file);
formData.append('PicName', fileName); $.ajax({
url: postUrl,
data: formData,
dataType: "json",
type: "POST",
beforeSend: function (request) {
request.setRequestHeader("Authorization", token);
},
//async: true,
cache: false,
contentType: false,
processData: false,
success: function (data) {
API.log(data);
successCallBack(data);
},
error: function (data) {
errorCallBack(data);
console.log(data);
}
});
}
3,去空格处理,包括文字中间的空格以及首尾的空格
/**
* string 去空格操作
* @param str 要去空格的字符串
* @returns {string} 去完空格以后的字符串
*/
function safeFilter (str) {
return str.replace(/[ ]/g, "");
}, /**
* 对一个对象中每个值进行安全检测, 去空格操作
* @param str 要去空格的对象
* @returns {string} 去完空格以后的对象
*/
function everyProp (dataObj) {
if (typeof dataObj == "string") {
return this.safeFilter(dataObj);
}
for (prop in dataObj) {
if (typeof dataObj[prop] == "object" && Array.isArray(dataObj[prop])) {
var list = dataObj[prop];
for (var i = 0; i < list.length; i++) {
list[i] = everyProp(list[i]);
}
} else if (typeof dataObj[prop] == "object" && (dataObj[prop]) instanceof Object) {
dataObj[prop] = everyProp(dataObj[prop]);
} else if (typeof dataObj[prop] == "string") {
if (prop != "FormMeta") {
dataObj[prop] = safeFilter(dataObj[prop]);
}
}
}
return dataObj;
}
4,js操作cookie
//写入Cookie
//name cookie名字
//value cookie的值
//expires 绝对过期时间,距现在的毫秒数 如30天:new date()+30*24*60*60*1000
setCookie: function (name, value, expires, path, domin, secure) {
var cookie = name + "=" + encodeURIComponent(value);
if (expires) {
cookie += ";expires=" + expires.toGMTString();
}
if (path) {
cookie += ";path=" + path;
}
if (domin) {
cookie += ";domin=" + domin;
}
if (secure) {
cookie += ";secure=" + secure;
} document.cookie = cookie; }, //获取指定名称的cookie值
getCookie: function (name) {
var sRe = "(?:;)?" + name + "=([^;]*);?";
var oRe = new RegExp(sRe);
if (oRe.test(document.cookie)) {
return decodeURIComponent(RegExp["$1"]);
} else {
return null;
} },
5,动态加载和移除css 、js文件
/**
* 动态加载CSS
* @param {string} url 样式地址
*/
dynamicLoadCss: function (url) {
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.type = 'text/css';
link.rel = 'stylesheet';
link.href = url;
head.appendChild(link);
}, /**
* 动态加载JS
* @param {string} url 脚本地址
* @param {function} callback 回调函数
*/
dynamicLoadJs: function (url, callback) {
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
if (typeof (callback) == 'function') {
script.onload = script.onreadystatechange = function () {
if (!this.readyState || this.readyState === "loaded" || this.readyState === "complete") {
callback();
script.onload = script.onreadystatechange = null;
}
};
}
head.appendChild(script);
}, /**
* 动态移除CSS文件
* @param {string} filename css文件名称
*/
dynamicRemoveCssfile: function (filename) {
var targetAttr = "href";
var els = document.getElementsByTagName("link");
for (var i = els.length; i >= 0; i--) {
if (els[i] && els[i].getAttribute("href") != null && els[i].getAttribute("href").indexOf(filename) != -1)
els[i].parentNode.removeChild(els[i]);
}
},
6,格式化日期为固定格式“yyyy-mm-dd”,或 获取当日日期
/**
* 获取今日日期,或格式化日期为固定格式“yyyy-MM-dd”,
* @param {Date} date 指定的要格式化的日期,缺省时获取当前日期
* @returns {string}返回yyyy-mm-dd格式字符串
*/
formatDateOrToday: function (date) {
var dd = date || new Date();
var y = dd.getFullYear();
var m = dd.getMonth() + 1;
var d = dd.getDate();
m = m < 10 ? "0" + m : m;
d = d < 10 ? "0" + d : d;
var day = y + "-" + m + "-" + d;
return day; }
7,获取今天,昨天。明天 的日期
/**
* 得到今天、昨天、明天日期
* @param {int} dates 0代表今日,-1代表昨日,1代表明日,
* @returns {string}返回yyyy-mm-dd格式字符串
*/
getDate: function (dates) {
var dd = new Date();
var n = dates || 0;
dd.setDate(dd.getDate() + n); return this.formatDateOrToday(dd);
},
8,获取本周,上周,下周的起始和结束时间
/**
* 获取本周,上周,下周的起始和结束时间
* @param {string} type "s"代表开始,"e"代表结束
* @param {int} dates 不传或0代表本周,-1代表上周,1代表下周
* @returns {string}返回yyyy-mm-dd格式字符串
*/
getDateOfWeek: function (type, dates) {
var now = new Date();
var nowTime = now.getTime();
var day = now.getDay();
var longTime = 24 * 60 * 60 * 1000;
var n = longTime * 7 * (dates || 0);
if (type == "s") {
var dd = nowTime - (day - 1) * longTime + n;
};
if (type == "e") {
var dd = nowTime + (7 - day) * longTime + n;
};
dd = new Date(dd);
return this.formatDateOrToday(dd);
},
9,获取本月,上月,下月的起始和结束时间
/**
* 获取本月,上月,下月的起始和结束时间
* @param {string} type "s"代表开始,"e"代表结束
* @param {int} dates 不传或0代表本月,-1代表上月,1代表下月
* @returns {string}返回yyyy-mm-dd格式字符串
*/
getDateOfMonth: function (type, months) {
var d = new Date();
var year = d.getFullYear();
var month = d.getMonth() + 1;
if (!!months && Math.abs(months) > 12) {
months = months % 12;
};
if (!!months) {
if (month + months > 12) {
year++;
month = (month + months) % 12;
} else if (month + months < 1) {
year--;
month = 12 + month + months;
} else {
month = month + months;
};
};
month = month < 10 ? "0" + month : month;
var date = d.getDate();
var firstday = year + "-" + month + "-" + "01";
var lastday = "";
if (month == "01" || month == "03" || month == "05" || month == "07" || month == "08" || month == "10" || month == "12") {
lastday = year + "-" + month + "-" + 31;
} else if (month == "02") {
if ((year % 4 == 0 && year % 100 != 0) || (year % 100 == 0 && year % 400 == 0)) {
lastday = year + "-" + month + "-" + 29;
} else {
lastday = year + "-" + month + "-" + 28;
};
} else {
lastday = year + "-" + month + "-" + 30;
};
var day = "";
if (type == "s") {
day = firstday;
} else {
day = lastday;
};
return day;
},
10,根据日期获取日期所在周(周一和周日)
/**
* 根据日期获取日期所在周(周一和周日)
* @param {int} y 年份
* @param {int} m 月
* @param {int} d 日
* @returns {obj}包含beginDate和endDate的对象
*/
getWeekByDay: function (y, m, d) {
var date = new Date(y, m, d);
var year = date.getFullYear();
var month = date.getMonth();
var day = date.getDay() || 7;
var date = date.getDate(); var begin = new Date(year, month, date - day + 1);
var end = new Date(year, month, date - day + 7);
return {
beginDate: this.formatDateOrToday(begin),
endDate: this.formatDateOrToday(end)
}
},
11, 获取本年的起始和结束时间
/**
* 获取本年的起始和结束时间
* @param {string} type "s"代表开始,"e"代表结束
* @returns {string}返回yyyy-mm-dd格式字符串
*/
getDateOfYear: function (type) {
var now = new Date();
var year = now.getFullYear();
if (type == "s") {
var dd = new Date(year, 0, 1);
}
if (type == "e") {
var dd = new Date(year, 11, 31);
}
return this.formatDateOrToday(dd);
},
12,判断开始日期是否大于结束日期
/**
* 判断开始日期是否大于结束日期
* @param {any} startTime string "2013-01-12"
* @param {any} endTime string "2012-01-12"
* @returns
* false表示存在开始日期不能大于结束日期;
* true表示不存在
*/
endDateMaxStartDate: function (startDate, endDate) {
if (startDate.length > 0 && endDate.length > 0) {
var startTmp = startDate.split("-");
var endTmp = endDate.split("-");
var sd = new Date(startTmp[0], startTmp[1], startTmp[2]);
var ed = new Date(endTmp[0], endTmp[1], endTmp[2]);
if (sd.getTime() > ed.getTime()) {
return false;
}
}
return true;
},
13,判断开始日期时间是否大于结束日期时间
/**
* 判断开始日期时间是否大于结束日期时间
*
* @param {any} startTime string "2013-01-12 20:12:12"
* @param {any} endTime string "2013-01-12 18:20:00"
* @returns
* false表示存在开始日期大于结束日期的情况;
* true表示不存在。
* 知识点:
* Date.parse(endTime) 得到日期的long时间戳
* new Date(Date.parse(endTime)); 转换成:Sat Jan 12 2013 18:20:00 GMT+0800 (中国标准时间)
*/
endTimeMaxStartTime: function (startTime, endTime) {
startTime = startTime.replace("-", "/");
endTime = endTime.replace("-", "/");
var endTime1 = new Date(Date.parse(endTime));
var startTime1 = new Date(Date.parse(startTime));
if (startTime1 > endTime1) {
return false;
}
return true;
}
前端开发常用 JS 方法的更多相关文章
- Sublime Text 前端开发常用扩展插件推荐
Sublime Text 前端开发常用扩展插件推荐 Sublime Text Sublime Text 是程序员们公认的编码神奇,拥有漂亮的用户界面和强大的功能 更重要的是,Sublime Text ...
- CDN公共库、前端开发常用插件一览表(VendorPluginLib)
=======================================================================================前端CDN公共库===== ...
- Notepad++前端开发常用插件介绍
Notepad++前端开发常用插件介绍 Notepad++除了自身的功能强大之外,更是有许多非常的优秀的插件,下面就总结一下前端开发过程一些比较常用的插件. Emmet Emmet的前身是Zen Co ...
- 常用js方法封装
常用js方法封装 var myJs = { /* * 格式化日期 * @param dt 日期对象 * @returns {string} 返回值是格式化的字符串日期 */ getDates: fun ...
- sublime text 3 前端开发常用插件
sublime text 3 前端开发常用插件 https://packagecontrol.io/browse 代码对齐: Alignment html代码补全: Emmet CoffeeScri ...
- 常用js方法
function dateGetter(name, size, offset, trim) { offset = offset || 0; return function (date) { var v ...
- 常用js方法整理common.js
项目中常用js方法整理成了common.js var h = {}; h.get = function (url, data, ok, error) { $.ajax({ url: url, data ...
- web前端开发常用的10个高端CSS UI开源框架
web前端开发常用的10个高端CSS UI开源框架 随着人们对体验的极致追求,web页面设计也面临着新的挑战,不仅需要更人性化的设计理念,还需要设计出更酷炫的页面.作为web前端开发人员,运用开源 ...
- Notepad++前端开发常用插件介绍 - BorisHuai前端修炼 - 博客频道 - CSDN
Notepad++前端开发常用插件介绍 - BorisHuai前端修炼 - 博客频道 - CSDN.NET http://blog.csdn.net/borishuai/article/details ...
随机推荐
- Codeforces J. Soldier and Number Game(素数筛)
题目描述: Soldier and Number Game time limit per test 3 seconds memory limit per test 256 megabytes inpu ...
- Python+OpenCV4:读写输入和输出的简单实践(图片、视频、摄像头)
典型的文件处理流程如下: 利用命令行参数 sys.argv 命令行参数是读取文件时常用的方式. 命令行参数保存在 sys.argv 的列表中,列表的第一个元素是脚本名称,后面的元素是命令行参数: 通过 ...
- Samba应用案例
一.配置文件详解 Samba配置文件非常简洁明了,所有的设置都在 /etc/samba/smb.conf 配置文件中进行,通过对该配置文件的修改,可以将Samba配置为一台匿名文件服务器.基于账户的文 ...
- JMeter基础【第二篇】JMeter5.1介绍及脚本录制
测试计划:被测项目 线程组:测试场景 取样器:被测接口 添加HTTP代理服务器和线程组,默认端口是8888 排除模式可以设置过滤 启动 点击[OK] IE浏览器设置代理 IE浏览器访问百度首页,搜索“ ...
- 去掉VSS控制
1:删除.vssscc.vssver.scc .项目名.csproj.vspscc文件 2:.csproj文件删除以下内容 SccProjectName = "SAK" S ...
- LIST OF BEST OPEN SOURCE BLOCKCHAIN PLATFORMS
https://www.blockchain-council.org/blockchain/list-of-best-open-source-blockchain-platforms/ Open so ...
- c语言中的数据类型的最大最小值
#include <float.h>#include <limits.h> int n1 = INT_MIN;int n2 = INT_MAX;float f1 = F ...
- 如何关闭/禁用.NET JIT调试对话框
当.NET程序有未处理的异常时,您可能会希望关闭出现的调试对话框.下面有两个选项: 1.启用JIT调试的注册表项 对于包含托管代码的应用程序,公共语言运行库将显示类似于JIT附加调试器的对话框.控制此 ...
- 异常CLRDBG_NOTIFICATION_EXCEPTION_CODE( 0x04242420)的抛出过程
新建一个c#控制工程,就用自动生成的代码,不用补任何代码,如下: using System; using System.Collections.Generic; using System.Linq; ...
- PDB files out of the debugger
我想我不需要强调在调试时拥有有效的PDB文件有多重要.通常,PDB文件是由调试器静默加载的,并且您很高兴在modules窗口中看到解析的所有符号.不幸的是,您还可能遇到调试器找不到匹配符号的情况.其原 ...