前端經常使用代碼片斷(一)

時間  2019-11-06
標籤 前端 經常 使用 代碼 片斷 简体版
原文   原文鏈接
最後更新於2019年1月13日

前端經常使用代碼片斷(一) 點這裏
前端經常使用代碼片斷(二) 點這裏
前端經常使用代碼片斷(三) 點這裏
前端經常使用代碼片斷(四) 點這裏
前端經常使用代碼片斷(五) 點這裏
前端經常使用代碼片斷(六) 點這裏javascript

大部分須要引入 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);

項目示例css

//設置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轉換成stringhtml

補充：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.時間格式化

使用方式java

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"

源碼jquery

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 (中國標準時間)

源碼ajax

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 (中國標準時間)

源碼json

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

<script src="../My97DatePicker/WdatePicker.js"></script>

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

<input type="text" onfocus="WdatePicker({maxDate:'#F{$dp.$D(\'datemax\')||\'%y-%M-%d\'}'})"   id="datemin" class="input-text">  -

<input type="text" onfocus="WdatePicker({minDate:'#F{$dp.$D(\'datemin\')}',maxDate:'%y-%M-%d'})" id="datemax" class="input-text">

給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

<ul id="Huifold1" class="Huifold">
  <li class="item">
    <h4>標題<b>+</b></h4>
    <div class="info"> 內容<br>不少內容 </div>
  </li>
  <li class="item">
    <h4>標題<b>+</b></h4>
    <div class="info"><img src="pic/2.png" ></div>
  </li>
  <li class="item">
    <h4>標題<b>+</b></h4>
    <div class="info"><img src="pic/1.png" ></div>
  </li>
</ul>

css

.Huifold .item{ position:relative}
.Huifold .item h4{margin:0;font-weight:bold;position:relative;border-top: 1px solid #fff;font-size:15px;line-height:22px;padding:7px 10px;background-color:#eee;cursor:pointer;padding-right:30px}
.Huifold .item h4 b{position:absolute;display: block; cursor:pointer;right:10px;top:7px;width:16px;height:16px; text-align:center; color:#666}
.Huifold .item .info{display:none;padding:10px}

js

jQuery.Huifold = function (obj, obj_c, speed, obj_type, Event,selected) {
    /*5個參數順序不可打亂，分別是：相應區,隱藏顯示的內容,速度,類型,事件*/
    //1    只打開一個，能夠所有關閉
    //2    必須有一個打開
    //3    可打開多個
    //4所有打開
    var selected = selected ||"selected";
    if (obj_type == 2) {
        $(obj + ":first").find("b").html("-");
        $(obj_c + ":first").show();
    }
    if (obj_type == 4) {
        $(obj).find("b").html("-");
        $(obj_c).show();
    }
    if (obj_type == 5) {
        $(obj).find("b").html("-");
        $(obj_c).hide();
    }

    $(obj).on(Event, function () {
        // console.log("11111");
        if ($(this).next().is(":visible")) {
            if (obj_type == 2) {
                return false;
            }
            else {
                $(this).next().slideUp(speed).end().removeClass(selected);
                $(this).find("b").html("+");
            }
        }
        else {
            if (obj_type == 3 || obj_type == 4) {
                $(this).next().slideDown(speed).end().addClass(selected);
                $(this).find("b").html("-");
            } else {
                $(obj_c).slideUp(speed);
                $(obj).removeClass(selected);
                $(obj).find("b").html("+");
                $(this).next().slideDown(speed).end().addClass(selected);
                $(this).find("b").html("-");
            }
        }
    });
};

調用

$(function(){

     $.Huifold("#mealContainer>.item>.title", "#mealContainer>.item>.info", "fast", 4, "click");

});

14.封裝tab頁切換（兼容ie8）

html

<div id="tab_demo" class="HuiTab">
  <div class="tabBar clearfix"><span>選項卡一</span><span>選項卡二</span><span>自適應寬度</span></div>
  <div class="tabCon">內容一</div>
  <div class="tabCon">內容二</div>
  <div class="tabCon">內容三</div>
</div>

css

.clearfix:after{content:"\20";display:block;height:0;clear:both;visibility:hidden}.clearfix{zoom:1}
.tabBar {border-bottom: 2px solid #222}
.tabBar span {background-color: #e8e8e8;cursor: pointer;display: inline-block;float: left;font-weight: bold;height: 30px;line-height: 30px;padding: 0 15px}
.tabBar span.current{background-color: #222;color: #fff}
.tabCon {display: none}

js

jQuery.Huitab = function (tabBar, tabCon, class_name, tabEvent, i, callback) {
    var $tab_menu = $(tabBar);
    // 錕斤拷始錕斤拷錕斤拷錕斤拷
    $tab_menu.removeClass(class_name);
    $(tabBar).eq(i).addClass(class_name);
    $(tabCon).hide();
    $(tabCon).eq(i).show();
    callback && callback(i);

    $tab_menu.on(tabEvent, function (event) {
        $tab_menu.removeClass(class_name);
        $(this).addClass(class_name);
        var index = $tab_menu.index(this).toString();
        $(tabCon).hide();
        $(tabCon).eq(index).show();
        callback && callback(index);
        event.stopPropagation();
    });
};

調用

$(function(){

   $.Huitab("#tabbarSonFirst>.tabBar span", "#tabbarSonFirst>.tabCon", "current", "click", "0", loadChart);

});
// #tabbarSonFirst 父級id
// #tabbarSonFirst>.tabBar span控制條
// #tabbarSonFirst>.tabCon內容區
// current 選中tab樣式
// click 事件 點擊切換，能夠換成mousemove 移動鼠標切換
// 1    默認第2個tab爲當前狀態（從0開始）
// callback 實現選中後再加載函數
function loadChart(i) {
    switch (i) {
        case '0'
            loopSportData();
            break;
        case '1'
            loopMealData();
            break;
        case '2':
            loadBloodPressureChart();
            break;
        default:
            break;
    }
}

15.正則校驗Excel

var reg = /^.*\.(?:xls|xlsx)$/i;//文件名能夠帶空格
if (!reg.test(path)) {//校驗不經過
    alert("請上傳excel格式的文件!");
    return;
}

16.正則表達式 數字和字母組合且必須含有一個

$pattern = '/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,10}$/';

分開來註釋一下：
^ 匹配一行的開頭位置
(?![0-9]+$) 預測該位置後面不全是數字
(?![a-zA-Z]+$) 預測該位置後面不全是字母
[0-9A-Za-z] {6,10} 由6-10位數字或這字母組成
$ 匹配行結尾位置

17.低版本ie支持function.bind()

只須要添加一下代碼，在須要的地方調用checkBind();就能夠了

function checkBind()
{
    if (!Function.prototype.bind) {
        Function.prototype.bind = function(oThis) {
            if (typeof this !== "function") {
                throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
            }
            var aArgs = Array.prototype.slice.call(arguments, 1),
                fToBind = this,
                fNOP = function() {},
                fBound = function() {
                    return fToBind.apply(this instanceof fNOP && oThis ? this : oThis,
                        aArgs.concat(Array.prototype.slice.call(arguments)));
                };
            fNOP.prototype = this.prototype;
            fBound.prototype = new fNOP();
            return fBound;
        };
    }
}

18.標題欄閃動提示

來源:張鑫旭的博客文章
樣式：圖片描述

JS代碼：
var titleInit = document.title, isShine = true;

setInterval(function() {
    var title = document.title;
    if (isShine == true) {
        if (/新/.test(title) == false) {
            document.title = '【你有新消息】';    
        } else {
            document.title = '【　　　　　】';
        }
    } else {
        document.title = titleInit;
    }
}, 500);

window.onfocus = function() {
    isShine = false;
};
window.onblur = function() {
    isShine = true;
};

// for IE
document.onfocusin = function() {
    isShine = false;
};
document.onfocusout = function() {
    isShine = true;
};

19.img圖片垂直居中

<div id="box">
    <img src="images/demo.jpg" alt="" />
</div>
#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函數解碼查詢字符串時，處理不了"+"，例以下面

clipboard.png

這裏須要再作一下處理：

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

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

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程