前端常用代码片段(一)

头像
于梦中2010
    阅读 15 分钟
    21
    最后更新于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

    <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,这样就没有问题了

    研发管理项目开发jquery插件jqueryjavascript
    于梦中2010
    2.1k 声望181 粉丝

    前端菜鸟儿，请多关照！

    « 上一篇
    学习docker途中问题总结——保持更新
    下一篇 »
    本地存储store.js

    引用和评论

    被 6 篇内容引用
    推荐阅读
    头像
    vscode 推荐扩展

    于梦中2010赞 2阅读 4.4k评论 1

    头像
    腾讯新闻中心首页改版啦

    小蚊酱赞 11阅读 8.7k评论 7

    头像
    前端如何入门 Go 语言

    robin赞 25阅读 7.2k评论 8

    头像
    前站 - 前端导航，搜索社区，阅读文章，提升技术

    bestvist赞 25阅读 13.7k评论 3

    头像
    前端开发工具

    寒青赞 15阅读 4.2k

    头像
    100个React最佳实践小技巧

    夕水赞 13阅读 1.3k评论 3

    头像
    开发插件集合

    寒青赞 11阅读 2.9k

    0 条评论
    得票最新