前端常用代码片段(一)

最后更新于2019年1月13日

前端常用代码片段(一) 点这里
前端常用代码片段(二) 点这里
前端常用代码片段(三) 点这里
前端常用代码片段(四) 点这里
前端常用代码片段(五) 点这里
前端常用代码片段(六) 点这里

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

    $(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");
            }
        };
    });
    

/**
 * 把对象格式的参数转成键值对，并以&分割
 * @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;
}

 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 || "操作失败！");
            }
        })
    }

//设置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}"

var docRole = userinfo.docRole == 0 && "医师" || "管理员";

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

记得以前看过别人写的文章里提到有网易的面试题出现过区分 ||  &&联合使用时返回的结果，当时老记不住，现在有这个应该容易记了

使用方式

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

使用方式

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

使用方式

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

首先引入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");
}

//刷新当前页面

 location.reload();

//如果把该方法的参数设置为 true，那么无论文档的最后修改日期是什么，它都会绕过缓存，从服务器上重新下载该文档。这与用户在单击浏览器的刷新按钮时按住 Shift 健的效果是完全一样。

这是原生的方法

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

描述：解析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;
};

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

使用javascript的decodeURIComponent函数解码查询字符串时，处理不了"+"，例如下面

这里需要再做一下处理：

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

即在调用decodeURIComponent函数之前要先把+替换为%20,这样就没有问题了