前端开发常用 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 ...
随机推荐
- hdu2281&&POJ1320——Pell方程
hdu2281 输入一个 $N$,求最大的 $n$($n \leq N$)和 $x$,使得 $x^2 = \frac{1^2+2^2+...+n^2}{n}$. 分析: 将右边式子的分子求和化简,有: ...
- Java 构造方法、final
构造方法:构造(创建)对象时使用的方法. 方法名必须与类名称完全相匹配: 构造方法不需要返回类型: 构造方法不能被static.final等关键字修饰,且不能有return返回语句: 伴随着new被调 ...
- 学习:CC断点
断点介绍: shark恒老师说有四种说法,但是其实都是相同的 第一个读法:普通断点 第二个读法:F2断点 第三个读法:INT3断点( int3其实就是汇编指令 ) 第四个读法:CC断点 (CC其实就是 ...
- contest3 CF994 div2 ooxxx? oooox? ooooo?
题意 div2 C (x)(o) 在一个平面上, 给一个水平的正方形和一个\(45^.斜\)的正方形 求是否相交(共点也算), 坐标正负\(100\)以内 div2 D (x)(o) \(A,B\)两 ...
- django -- 安装django
安装 通过cmd进行安装 pip3 install django==1.11.11 创建django项目 通过命令行进行创建 下面的命令创建了一个名为"mydjango"的Djan ...
- Redis有哪些数据结构
String 这应该是应用最广泛的了,简单的 key-value 类型.value 不仅可以是 String,也可以是数字.还可以享受 Redis 的定时持久化(可以选择 RDB 模式或者 AOF 模 ...
- 2017年计算语义相似度最新论文,击败了siamese lstm,非监督学习
Page 1Published as a conference paper at ICLR 2017AS IMPLE BUT T OUGH - TO -B EAT B ASELINE FOR S EN ...
- vb.net 读取 excel
Dim myConn AsNew ADODB.Connection myConn.CursorLocation = ADODB.CursorLocationEnum.adUseClient ' 用 ...
- 第10组 Beta冲刺(4/4)
队名:凹凸曼 组长博客 作业博客 组员实践情况 童景霖 过去两天完成了哪些任务 文字/口头描述 继续学习Android studio和Java 制作剩余界面前端 展示GitHub当日代码/文档签入记录 ...
- Android Studio 之 ROM【2】, LiveData+ViewModel+AsyncTask+Repository
改造上一节 ROM[1], 1.利用 LiveData<List<Word>> 与 observe 中的 onChanged 配合,删除掉之前的textView更新函数(upd ...