前端开发常用 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 ...
随机推荐
- docker gitlab-runner的安装
参考: Run GitLab Runner in a container 前面介绍了gitlab-ce的安装,下面是gitlab-runner的安装,同样还是安装docker版本. 1.下载 dock ...
- HFS ~ Http File Server
HFS ~ Http File Server官网:https://www.rejetto.com/hfs/ 官方下载地址:https://www.rejetto.com/hfs/hfs.exe
- matplotlib---画等高线
contour - 绘制等高线 mp.contour(x, y, z, 等高线条数,colors=颜色, linewidth=线宽)#等高线绘制 contourf - 填充等高线 mp.contour ...
- debug模式不报错,release模式报错
经常会 char * pMem = new char[icount]; 其中icount为变量,然后对该内存段猛的操作.release编译出来,出现莫名奇妙的错误.但是debug没问题. 后面查了别人 ...
- BZOJ4241:历史研究(回滚莫队)
题意:给定N个数字,Q次询问,询问这个区间的最大加权众数是多少. 加权众数是指出现次数*数字大小.N,Q<1e5. 思路:不难发现可以N*sqrtN*logN的思路做,但是应该过不了. 这个Ns ...
- 积性函数与Dirichlet卷积
转载自https://oi-wiki.org/math/mobius/ 积性函数 定义 若 $gcd(x,y)=1$ 且 $f(xy)=f(x)f(y)$,则 $f(n)$ 为积性函数. 性质 若 $ ...
- nodemcu固件的烧录及lua开发
一.板子介绍 NodeMCU 1.0/ESP 8266 12E 该模块是安信可公司生产的,并且提供全部开发资料. 对该模块的开发有两种方式: 一种是基于乐鑫官方推出的SDK开发包在 安信可ESP的一体 ...
- libevent笔记6:ssl bufferevent
Libevent另外提供了基于openssl的bufferevent来支持ssl,通过特殊的ssl bufferevent来对数据进行加密. ps:本文不对openssl相应的接口做介绍因为不熟 SS ...
- shell(三)if流程控制
流程控制 if 流程控制 基本语法 单分支结构 if [];then fi 两分支结构 if [];then else fi 多分支结构 if [];then elif[];then elif[];t ...
- 【IntelliJ IDEA学习之四】IntelliJ IDEA常用插件
版本:IntelliJIDEA2018.1.4 一.代码规范Alibaba Java Coding Guidelines:阿里巴巴代码规范检查插件FindBugs-IDEA:潜在 Bug 检查Sona ...