前端開發經常使用 JS 方法

時間 2019-12-20

原文原文鏈接

1，獲取文件本地url，在上傳以前預覽javascript

   /**
     * 獲取圖片嗯滴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

使用方法：css

//html:

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

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

View Code

2，ajax上傳文件：html

 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，去空格處理，包括文字中間的空格以及首尾的空格java

/**
     * 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操做cookieweb

 //寫入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文件ajax

    /**
    * 動態加載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」，或獲取當日日期chrome

    /**
    * 獲取今日日期，或格式化日期爲固定格式「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，獲取今天，昨天。明天的日期json

    /**
     * 獲得今天、昨天、明天日期
     * @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;
    }