前端常用代碼片段(一)

chnmagnus 發布于2019-08-21 11:35 / 875人閱讀

最后更新于2019年1月13日

前端常用代碼片段(一) 點這里
前端常用代碼片段(二) 點這里
前端常用代碼片段(三) 點這里
前端常用代碼片段(四) 點這里
前端常用代碼片段(五) 點這里
前端常用代碼片段(六) 點這里

大部分需要引入 jquery-1.9.1.min.js（兼容ie8）

1.回車觸發事件的代碼

    $(function(){
        $("#username").focus();
        //回車查詢
        document.onkeydown = function(event) {
            var e = event || window.event || arguments.callee.caller.arguments[0];
            if (e && e.keyCode == 13) {
                $("#signIn").trigger("click");
            }
        };
    });

2.把對象格式的參數轉成鍵值對，并以&分割

/**
 * 把對象格式的參數轉成鍵值對，并以&分割
 * @param arr 要轉換的對象參數
 * @returns {string}
 */
function maiyaBuildParam(arr){
    var result = "";
    for(var key in arr)
    {
        result += key + "=" + encodeURIComponent(arr[key]) + "&";
    }
    result = result.substr(0,result.length-1);
    return result;
}

3.去除表單內容兩端的空格，設置cookie緩存,對象轉成字符串

 function submitForm() {
        var param = {
            userName: $.trim($("#username").val()),
            password: $.trim($("#password").val())
            //userName: $("#username").val().trim(),
            //password: $("#password").val().trim()
            //ie8下邊支持$.trim,   不支持$("#").val().trim()
        };
        $.ajax({
            type: "post",
            url: serverIp + "rest/login?" + Math.random() + "&" + BuildParam(param),   
            //這里傳入一個隨機數避免ie8緩存問題,下邊cache對ie8無效
            //data: JSON.stringify(param),  //傳入組裝的參數
            //contentType: "application/json; charset=utf-8",
            cache: false,  //禁用緩存
            dataType: "json",
            success: function (result) {
                if(result.result_code === "1"){
                    $.cookie("userinfo", JSON.stringify(result.data), { expires: 7 });
                    window.location.href = "index.html";
                }else{
                    alert("用戶名或密碼錯誤");
                }
            },
            error: function(msg) {
                alert(msg.message || "操作失??！");
            }
        })
    }

4.設置cookie,獲取cookie

//設置cookie比,并將json數據源轉成string
    $.cookie("userinfo", JSON.stringify(json), { expires: 7 });

//獲取cookie,并將返回的string格式數據解析成json
    JSON.parse($.cookie("userinfo"));
 
//清除cookie
    $.cookie("userinfo",null);

項目示例

//設置cookie
 $.ajax({
            type: "post",
            url: serverIp + "rest/login?" + Math.random() + "&" + maiyaBuildParam(param),
            dataType: "json",
            success: function (result) {
                if(result.result_code === "1"){
                    $.cookie("userinfo", JSON.stringify(result.data), { expires: 7 });
                    window.location.href = "index.html";
                }else{
                    alert("用戶名或密碼錯誤");
                }
            },
            error: function(msg) {
                alert(msg.message || "操作失?。?);
            }
        })

//獲取和清空cookie
    if(!$.cookie("userinfo")) {
        location.href="login.html";
    }
    $("#loginOut a").click(function () {
        $.cookie("userinfo",null);
    });
    var userinfo = JSON.parse($.cookie("userinfo"));
    if(userinfo) {
        var _src = userinfo.docPic ? userinfo.docPic : (userinfo.docSex == 2 ? "images/women.png" : "images/man.png");
        $("#userInfoImage").attr("src",_src)
        $("#username,#leftusername").html(userinfo.docName);
        $("#jobtitle").html(userinfo.docProfe);
        var docRole = userinfo.docRole == 0 && "醫師" || "管理員";
        $("#loginuser").html(docRole);
    }
    if(userinfo.docRole == 0) {
        $("#menu-product").show();
        $("#menu-admin,#menu-tongji").hide();
    } else if(userinfo.docRole == 1) {
        $("#menu-product").hide();
        $("#menu-admin,#menu-tongji").show();
    }

說明：
jquery.cookie.js 只允許開發人員存入字符串，故用JSON.stringify(json)將json轉換成string

補充：JSON.stringify與JSON.parse() [ 此類方法在低版本ie上需要引入json2.js ]

parse用于從一個字符串中解析出json對象,如
var str = "{"name":"huangxiaojian","age":"23"}"
JSON.parse(str)
-->
Object
age: "23"
name: "huangxiaojian"
__proto__: Object
注意：單引號寫在{}外，每個屬性名都必須用雙引號，否則會拋出異常。

stringify()用于從一個對象解析出字符串，如
var a = {a:1,b:2}
JSON.stringify(a)
--->
結果："{"a":1,"b":2}"

5.三目運算的另一種寫法

var docRole = userinfo.docRole == 0 && "醫師" || "管理員";

var _src = userinfo.docPic ? userinfo.docPic : (userinfo.docSex == 2 ? "images/women.png" : "images/man.png");

記得以前看過別人寫的文章里提到有網易的面試題出現過區分 ||  &&聯合使用時返回的結果，當時老記不住，現在有這個應該容易記了

6.時間格式化

使用方式

new Date().format("yyyy-MM-dd");  // "2017-02-18"

new Date().format("yyyy-MM-dd hh-mm-ss");  //
"2017-02-18 04-41-08"
new Date().format("yyyy-MM-dd hh/mm/ss");  //
"2017-02-18 04/41/18"
new Date().format("yyyy-MM-dd HH/mm/ss");  //
"2017-02-18 16/42/30"

new Date().format("yyyy-MM-dd E HH/mm/ss");
  //"2017-02-18 六 16/51/16"
new Date().format("yyyy-MM-dd EE HH/mm/ss");  //
"2017-02-18 周六 16/51/30"

new Date().format("yyyy-MM-dd EEE HH/mm/ss");  //
"2017-02-18 星期六 16/51/77"

源碼

Date.prototype.format = function (fmt) {
    var o = {
        "M+": this.getMonth() + 1, //月份
        "d+": this.getDate(), //日
        "h+": this.getHours() % 12 == 0 ? 12 : this.getHours() % 12, //12小時
        "H+": this.getHours(), //24小時
        "m+": this.getMinutes(), //分
        "s+": this.getSeconds(), //秒
        "q+": Math.floor((this.getMonth() + 3) / 3), //季度
        "S": this.getMilliseconds() //毫秒
    };
    var week = {
        "0": "日",
        "1": "一",
        "2": "二",
        "3": "三",
        "4": "四",
        "5": "五",
        "6": "六"
    };
    if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    }
    if (/(E+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, ((RegExp.$1.length > 1) ? (RegExp.$1.length > 2 ? "星期" : "周") : "") + week[this.getDay() + ""]);
    }
    for (var k in o) {
        if (new RegExp("(" + k + ")").test(fmt)) {
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        }
    }
    return fmt;
}

7.獲取輸入日期所在周或者前后某周的周一

使用方式

new Date();
  //Sat Feb 18 2017 17:35:25 GMT+0800 (中國標準時間)

getMonday( new Date(),-1);  //
Mon Feb 06 2017 17:40:45 GMT+0800 (中國標準時間)

getMonday( new Date());  //Mon Feb 13 2017 17:34:34 GMT+0800 (中國標準時間)

getMonday( new Date(),1);  //
Mon Feb 20 2017 17:34:43 GMT+0800 (中國標準時間)

源碼

function getMonday(date, offset){
    var today=date || new Date();
    return new Date( today - ((today.getDay() ||7) -1  - (offset||0) *7 )  *864E5  );
}


//改進，獲取輸入日期所在周或者前后某周的任意某天
function getWeekAnyday(weekday,offset,date){
    var today=date || new Date();
    return new Date( today - ((today.getDay() ||7) -(weekday||0)  - (offset||0) *7 )  *864E5  );
}

8.獲取輸入日期的前后某天日期

使用方式

new Date();
  //Sat Feb 18 2017 17:35:25 GMT+0800 (中國標準時間)

getOneDayByDate(new Date() ,-2);  //Thu Feb 16 2017 18:20:39 GMT+0800 (中國標準時間)

getOneDayByDate(new Date() ,2);  //Mon Feb 20 2017 18:20:49 GMT+0800 (中國標準時間)

源碼

function getOneDayByDate(date, n) {
    var d = typeof date == "string" && new Date(date) || date;
    d.setTime(d.getTime()+24*60*60*1000*n);
    //return d.getFullYear()+"-" + (d.getMonth()+1) + "-" + d.getDate();  //用于獲取"2017-2-16"格式日期
    return new Date(d);
}

9.My97DatePicker使用

首先引入js

場景1：選擇時間段，前者不能大于后者的時間，后者不能小于前者時間且不大于當天時間

給input賦相差一個星期的初始值

 $("#datemin").val(getOneDayByDate(new Date(), -6).format("yyyy-MM-dd"));
 $("#datemax").val(thisDate());

function thisDate() {
    var d = new Date();
    return d.format("yyyy-MM-dd");
}

10.刷新當前頁面

//刷新當前頁面

 location.reload();

//如果把該方法的參數設置為 true，那么無論文檔的最后修改日期是什么，它都會繞過緩存，從服務器上重新下載該文檔。這與用戶在單擊瀏覽器的刷新按鈕時按住 Shift 健的效果是完全一樣。

這是原生的方法

11. 判斷元素是否在數組內

js方法

var arr = [1, 2, 3];
// js arr.indexOf(3)
var result1 = arr.indexOf(3); //返回index為2

jquery方法

var arr = [1, 2, 3];
// jquery $.inArray(3, arr)
var result = $.inArray(3, arr); //返回index為2

自定義方法

var arr = [1, 2, 3];
// 自定義 contains(arr, 3)方法
function contains(arr, obj) {
    //while
    var i = arr.length;
    while(i--) {
        if(arr[i] === obj) {
            return i;
        }
    }
    return -1;
}
var result1 = contains(arr, 3); //返回index為2

12.解析url中傳遞的參數

描述：解析ajax get方式傳遞的參數，
例如“https://www.zybuluo.com/mdedi...://www.zybuluo.com/static/editor/md-help.markdown”

1.方法一

使用方式

    $.getUrlParam("url"); //"https://www.zybuluo.com/static/editor/md-help.markdown"

源碼

$.getUrlParam = function(name) {
    var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
    var r = decodeURIComponent(window.location.search).substr(1).match(reg);
    if (r!=null) return unescape(r[2]); return null;
};

說明:此方式是將方法拓展到了jquery,也可以定義成方法

使用方式

    getUrlParam("url");  //"https://www.zybuluo.com/static/editor/md-help.markdown"

function getUrlParam(name) {
    var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
    var r = decodeURIComponent(window.location.search).substr(1).match(reg);
    if (r!=null) return unescape(r[2]); return null;
};

2.方法二將攜帶的所有參數轉化成json對象

使用方式

var urlParamsToJson= getUrlParamsToJson(); //Object {url: "https://www.zybuluo.com/static/editor/md-help.markdown"}

源碼

function getUrlParamsToJson() {
    var url = location.href;
    var nameValue;
    var paraString = url.substring(url.indexOf("?") + 1, url.length).split("&");
    var paraObj = {};
    for (var i = 0; nameValue = paraString[i]; i++) {
      var name = nameValue.substring(0, nameValue.indexOf("=")).toLowerCase();
      var value = nameValue.substring(nameValue.indexOf("=") + 1, nameValue.length);
      if (value.indexOf("#") > -1) {
         value = value.split("#")[0];
      }
      paraObj[name] = value;
    }
    return paraObj;
};

13.封裝折疊（兼容ie8）

html


  
    標題+
     內容
很多內容 
  
  
    標題+

#box{
    width:500px;height:400px;
    text-align:center;
    border:1px solid #d3d3d3;background:#fff;
    display: table-cell;
    vertical-align:middle;
 
}
 
#box img{
    vertical-align:middle;
}

20.decodeURI() 函數解碼處理不了"+"

使用javascript的decodeURIComponent函數解碼查詢字符串時，處理不了"+"，例如下面

這里需要再做一下處理：

decodeURIComponent(str.replace(/+/g, "%20"));

即在調用decodeURIComponent函數之前要先把+替換為%20,這樣就沒有問題了

云服務器 GPU云服務器代碼片段添加代碼片段 Python代碼片段 BootStrap代碼片段

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/86888.html

前端常用代碼片段(六)

摘要：本文總結的代碼片段六持續更新前端常用代碼片段一點這里前端常用代碼片段二點這里前端常用代碼片段三點這里前端常用代碼片段四點這里前端常用代碼片段五點這里前端常用代碼片段六點這里多彩的傳入和變量本節參考文章多彩的版本號比較和和本節參考文章本文總結的代碼片段(六)--持續更新前端常用代碼片段(一) 點這里前端常用代碼片段(二) 點這里前端常用代碼片段(三) 點這里前端常用代碼片段(四) 點...

zengdongbao 2019-08-23 14:41 評論0 收藏0
前端常用代碼片段(四)

摘要：盡量避免使用表達式又稱動態屬性。使用計算數組中的重復項如果你想計算數組中的每個值有多少重復值，也可以快速幫到你。前端常用代碼片段(一) 點這里前端常用代碼片段(二) 點這里前端常用代碼片段(三) 點這里前端常用代碼片段(四) 點這里前端常用代碼片段(五) 點這里前端常用代碼片段(六) 點這里 1.簡述一下你對HTML語義化的理解？并寫出一段語義化的HTML？語義化是指根據內容的結...

worldligang 2019-08-23 14:41 評論0 收藏0
前端常用代碼片段(三)

摘要：可以是數字或者是字符串如果是數字則表示屬性名前加上空格符號的數量，如果是字符串，則直接在屬性名前加上該字符串。最后更新于2019年1月13日前端常用代碼片段(一) 點這里前端常用代碼片段(二) 點這里前端常用代碼片段(三) 點這里前端常用代碼片段(四) 點這里前端常用代碼片段(五) 點這里前端常用代碼片段(六) 點這里 1.打亂數組中元素順序（類似音樂隨機播放） function...

U2FsdGVkX1x 2019-08-21 16:25 評論0 收藏0
前端常用代碼片段(二)

摘要：兩個數組內的元素相加第二種考慮兼容一個數組插入到另一個數組通過方法將一個數組插入到另外一個數組數字排序的函數在默認情況下使用字母數字字符串碼點排序。它們具有不同的引用，無法用相比較。最后更新于2019年1月13日前端常用代碼片段(一) 點這里前端常用代碼片段(二) 點這里前端常用代碼片段(三) 點這里前端常用代碼片段(四) 點這里前端常用代碼片段(五) 點這里前端常用代碼片段(六)...

FWHeart 2019-08-20 17:04 評論0 收藏0
前端常用代碼片段(五)

摘要：當運行時，如果不為，則將超時函數推送到事件隊列，并且函數退出，從而使調用堆棧清零。因此，該方法從頭到尾不經過直接遞歸調用即可處理，因此調用堆棧保持清晰，無論迭代次數如何。前端常用代碼片段(一) 點這里前端常用代碼片段(二) 點這里前端常用代碼片段(三) 點這里前端常用代碼片段(四) 點這里 1.tap事件點透問題？問題點擊穿透問題：點擊蒙層（mask）上的關閉按鈕，蒙層消失后發現觸...

MoAir 2019-08-23 14:41 評論0 收藏0

發表評論

登陸后可評論

0條評論

chnmagnus

男|高級講師

我要關注我要私信

TA的文章

把 RNN 循環神經網絡植入體內，僅憑一張“薄片”，就能直接檢測你有無心律異常

閱讀 3591·2021-09-13 10:28
SecureIDC：$19/月/1GB內存/100GB SSD空間/500GB流量/1Gbps端口/

閱讀 1940·2021-08-10 09:43
第三集: 從零開始實現一套pc端vue的ui組件庫(button組件其一)

閱讀 1013·2019-08-30 15:44
Bootstrap 柵格布局

閱讀 3183·2019-08-30 13:14
解決input 中placeholder的那些神坑

閱讀 1836·2019-08-29 16:56
一個常年更新的CSS采坑合集

閱讀 2942·2019-08-29 16:35
HTML CSS 實現鼠標懸停時圖片拉近效果

閱讀 2850·2019-08-29 12:58
canvas-塔防游戲

閱讀 868·2019-08-26 13:46

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！

前端常用代碼片段(一)

1.方法一

2.方法二將攜帶的所有參數轉化成json對象

標題+

標題+

相關文章

前端常用代碼片段(六)

前端常用代碼片段(四)

前端常用代碼片段(三)

前端常用代碼片段(二)

前端常用代碼片段(五)

發表評論

0條評論

chnmagnus

男|高級講師

TA的文章

把 RNN 循環神經網絡植入體內，僅憑一張“薄片”，就能直接檢測你有無心律異常

SecureIDC：$19/月/1GB內存/100GB SSD空間/500GB流量/1Gbps端口/

第三集: 從零開始實現一套pc端vue的ui組件庫(button組件其一)

Bootstrap 柵格布局

解決input 中placeholder的那些神坑

一個常年更新的CSS采坑合集

HTML CSS 實現鼠標懸停時圖片拉近效果

canvas-塔防游戲

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！

前端常用代碼片段(一)

1.方法一

2.方法二將攜帶的所有參數轉化成json對象

標題+

標題+

相關文章

發表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！