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 方法的更多相关文章

  1. Sublime Text 前端开发常用扩展插件推荐

    Sublime Text 前端开发常用扩展插件推荐 Sublime Text Sublime Text 是程序员们公认的编码神奇,拥有漂亮的用户界面和强大的功能 更重要的是,Sublime Text ...

  2. CDN公共库、前端开发常用插件一览表(VendorPluginLib)

    =======================================================================================前端CDN公共库===== ...

  3. Notepad++前端开发常用插件介绍

    Notepad++前端开发常用插件介绍 Notepad++除了自身的功能强大之外,更是有许多非常的优秀的插件,下面就总结一下前端开发过程一些比较常用的插件. Emmet Emmet的前身是Zen Co ...

  4. 常用js方法封装

    常用js方法封装 var myJs = { /* * 格式化日期 * @param dt 日期对象 * @returns {string} 返回值是格式化的字符串日期 */ getDates: fun ...

  5. sublime text 3 前端开发常用插件

    sublime text 3 前端开发常用插件 https://packagecontrol.io/browse 代码对齐: Alignment html代码补全:  Emmet CoffeeScri ...

  6. 常用js方法

    function dateGetter(name, size, offset, trim) { offset = offset || 0; return function (date) { var v ...

  7. 常用js方法整理common.js

    项目中常用js方法整理成了common.js var h = {}; h.get = function (url, data, ok, error) { $.ajax({ url: url, data ...

  8. web前端开发常用的10个高端CSS UI开源框架

    web前端开发常用的10个高端CSS UI开源框架   随着人们对体验的极致追求,web页面设计也面临着新的挑战,不仅需要更人性化的设计理念,还需要设计出更酷炫的页面.作为web前端开发人员,运用开源 ...

  9. Notepad++前端开发常用插件介绍 - BorisHuai前端修炼 - 博客频道 - CSDN

    Notepad++前端开发常用插件介绍 - BorisHuai前端修炼 - 博客频道 - CSDN.NET http://blog.csdn.net/borishuai/article/details ...

随机推荐

  1. Codeforces G. The Brand New Function(枚举)

    题目描述: The Brand New Function time limit per test 2 seconds memory limit per test 256 megabytes input ...

  2. Linux下使用cx_Oracle的一些配置

    在安装完成cx_Oracle后,import  cx_Oracle时报错,首先查看.bash_profile文件中环境变量配置 # .bash_profile # Get the aliases an ...

  3. phpcms站点域名配置https无法提交如何处理

    一位网友给ytkah反映说phpcms站点域名配置https无法提交,在后台修改站点域名为https提交后提示“站点域名格式应该为http://www.phpcms.cn/,请以‘/’结束”,这个要如 ...

  4. 小学四则运算口算练习app

    目标: 第一次尝试做APP,这次做的东西不是很麻烦,做出一个口算练习的加减乘除的页面,使用者做题,设有答案页,进行核对! 核心部分是出题页面的程序,还有答案页的程序.不设置登录注册页面.冲刺时间:一周 ...

  5. 【oracle】截取字符串

    select id,name,substr(dept,1,2) from test; 提取字段dept前两位 substr(string,start,length)

  6. js面向对象的笼统介绍

    **js进阶大纲**简单的表面组成:**对象的属性分两类,一类是数据属性,一类是访问器属性**1,数据属性用来保存数据.2,访问器属性不用来保存数据,而是定义了get,set两个函数,读取属性时,自动 ...

  7. zzulioj - 2624: 小H的奇怪加法

    题目链接:http://acm.zzuli.edu.cn/problem.php?id=2624 题目描述 小H非常喜欢研究算法,尤其是各种加法.没错加法包含很多种,例如二进制中的全加,半加等.全加: ...

  8. ESA2GJK1DH1K升级篇: IAP详解

    前言: 源码下载链接: https://gitee.com/yang456/STM32_IAP_Learn.git 后期所有出售的升级程序皆在此代码之上进行优化和开发 请必须把此文章各个的地方的说明看 ...

  9. contest1 CF70 BetaRound ooxxx ooxxx ooooo

    CDE set之类不要直接用lower_bound, 要用set.lower_bound()

  10. 第02组Beta冲刺(3/4)

    队名:十一个憨批 组长博客 作业博客 组长黄智 过去两天完成的任务:了解整个游戏的流程 GitHub签入记录 接下来的计划:继续完成游戏 还剩下哪些任务:完成游戏 燃尽图 遇到的困难:没有美术比较好的 ...