前端开发常用 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;
    }

View Code

使用方法：

//html:

  <img src="{{person.HeadImgUrl}}"  style=" 100%;height: 100%;">

//js:
 
var file = document.getElementById("up").files[0];
 $scope.person.HeadImgUrl = API.getFileLocationUrl(file);

View Code

2，ajax上传文件：

 1 /**
 2      * 上传文件
 3      * @param file input[type=file]选择的文件
 4      * @param fileName 文件名称
 5      * @param postUrl  请求的后台url地址
 6      * @param token  验证的token
 7      * @param callBack 回调（接收上传结果）
 8      */
 9      function uploadFile (file, fileName, postUrl, token, successCallBack, errorCallBack) {
10         var formData = new FormData();
11         formData.append('uploadFile', file);
12         formData.append('PicName', fileName);
13 
14         $.ajax({
15             url: postUrl,
16             data: formData,
17             dataType: "json",
18             type: "POST",
19             beforeSend: function (request) {
20                 request.setRequestHeader("Authorization", token);
21             },
22             //async: true,
23             cache: false,
24             contentType: false,
25             processData: false,
26             success: function (data) {
27                 API.log(data);
28                 successCallBack(data);
29             },
30             error: function (data) {
31                 errorCallBack(data);
32                 console.log(data);
33             }
34         });
35     }

View Code

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;
    }

View Code

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;
        }

    },

View Code

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]);
        }
    },

View Code

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;

    }

View Code

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);
    },

View Code

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);
    },

View Code

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;
    },

View Code

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)
        }
    },

View Code

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);
    },

View Code

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;
    },

View Code

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;
    }

View Code