前端开发常用 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 ...
随机推荐
- C#进阶系列 ---- 《CLR via C#》
[C#进阶系列]30 学习总结 [C#进阶系列]29 混合线程同步构造 [C#进阶系列]28 基元线程同步构造 [C#进阶系列]27 I/O限制的异步操作 [C#进阶系列]26 计算限制的异步操作 ...
- Java多线程编程核心技术-第3章-线程间通信-读书笔记
第 3 章 线程间通信 线程是操作系统中独立的个体,但这些个体如果不经过特殊的处理就不能成为一个整体.线程间的通信就是成为整体的必用方案之一,可以说,使线程间进行通信后,系统之间的交互性会更强大,在大 ...
- pydev离线安装及安装后eclipse中不显示解决办法
eclipse插件安装方法(离线安装)pydev进入eclipse目录1.创建links目录2.复制压缩包到目录前解压3.在links目录下新建pydev.link文件(记事本修改后缀名即可)4.py ...
- wordpress怎么用AMP加速器呢
AMP项目(Accelerated Mobile Pages)是一个开放源代码计划,旨在为所有人打造更好的网络体验.借助该项目,用户可以打造出在各种设备和分发平台上都能始终如一地快速加载且效果出色的精 ...
- hbase的javaAPI
https://www.cnblogs.com/tiantianbyconan/p/3557571.html hbase和dataFrame之间的互相转换: https://stackoverflow ...
- Qt绘制中国象棋棋盘
这里主要用的是#include <QPainter>里面的paintEvent void Board::paintEvent(QPaintEvent*) { QPainter painte ...
- [ZJJOI2013]K大数查询 整体二分
[ZJJOI2013]K大数查询 链接 luogu 思路 整体二分. 代码 #include <bits/stdc++.h> #define ll long long using name ...
- react-native-cli运行项目及打包apk失败的解决过程
刚开始学习react native,第一步自然是搭建好开发环境,node及jdk本身就有,Python2.Android studio以及Android sdk的安装倒是没什么大问题,按照官网的教程做 ...
- vue - 小日历项目制作中的问题与解决思路
效果图: 项目难点: 1. 每个月的日期数是不定的,拢共需要几个格子? 按照教程的做法需要42个.所以遍历数字42,得到42个div做格子. 2. 格子的排版怎么做? 顶部的星期布局使用的flex水平 ...
- 第10组 Beta版本演示
一.小组信息 组长博客链接 组名:凹秃曼 组内成员 学号 组员 031702240 童景霖(组长) 031702225 叶泽林 031702246 陈鸿立 031702201 万本琳 03170222 ...