• 前端开发常用代码片段(下篇)


    二十二、正则表达式

    //验证邮箱
    
    /^w+@([0-9a-zA-Z]+[.])+[a-z]{2,4}$/
    
     
    //验证手机号
    
    /^1[3|5|8|7]d{9}$/
    
    
    //验证URL
    
    /^http://.+./
    
    
    //验证身份证号码
    
    /(^d{15}$)|(^d{17}([0-9]|X|x)$)/
    
    
    //匹配字母、数字、中文字符
    
    /^([A-Za-z0-9]|[u4e00-u9fa5])*$/
    
    
    //匹配中文字符
    
    /[u4e00-u9fa5]/
    
    
    //匹配双字节字符(包括汉字)
    
    /[^x00-xff]/

    二十三、限制字符数

    <input id="txt" type="text">
    //字符串截取
    
    function getByteVal(val, max) {
    
        var returnValue = '';
    
        var byteValLen = 0;
    
        for (var i = 0; i < val.length; i++) { if (val[i].match(/[^x00-xff]/ig) != null)byteValLen += 2; else byteValLen += 1; if (byteValLen > max) break;
    
            returnValue += val[i];
    
        }
    
        return returnValue;
    
    }
    
    $('#txt').on('keyup', function () {
    
        var val = this.value;
    
        if (val.replace(/[^x00-xff]/g, "**").length > 14) {
    
            this.value = getByteVal(val, 14);
    
        }
    
    });

    二十四、验证码倒计时

    <input id="send" type="button" value="发送验证码">

    1、JavaScript实现

    var times = 60, // 时间设置60秒
    
     timer = null;
    
    document.getElementById('send').onclick = function () {
    
     // 计时开始
    
     timer = setInterval(function () {
    
     times--;
    
     if (times <= 0) {
    
     send.value = '发送验证码';
    
     clearInterval(timer);
    
     send.disabled = false;
    
     times = 60;
    
     } else {
    
     send.value = times + '秒后重试';
    
     send.disabled = true;
    
     }
    
     }, 1000);
    
    }

    2、jQuery实现

    var times = 60,
    
        timer = null;
    
    $('#send').on('click', function () {
    
        var $this = $(this);
    
        // 计时开始
    
        timer = setInterval(function () {
    
            times--;
    
            if (times <= 0) {
    
                $this.val('发送验证码');
    
                clearInterval(timer);
    
                $this.attr('disabled', false);
    
                times = 60;
    
            } else {
    
                $this.val(times + '秒后重试');
    
                $this.attr('disabled', true);
    
            }
    
        }, 1000);
    
    });

    二十五、倒计时跳转

    <div id="showtimes"></div>
    // 设置倒计时秒数  
    
    var t = 10;  
    
    // 显示倒计时秒数  
    
    function showTime(){  
    
        t -= 1;  
    
        document.getElementById('showtimes').innerHTML= t;  
    
        if(t==0){  
    
            location.href='error404.asp';  
    
        }  
    //每秒执行一次 showTime() setTimeout("showTime()",1000); } showTime();

    二十六、时间戳、毫秒格式化

    function formatDate(now) {
    
        var y = now.getFullYear();
    
        var m = now.getMonth() + 1; // 注意 JavaScript 月份+1
    
        var d = now.getDate();
    
        var h = now.getHours();
    
        var m = now.getMinutes();
    
        var s = now.getSeconds();
    
        return y + "-" + m + "-" + d + " " + h + ":" + m + ":" + s;
    
    }
    
    var nowDate = new Date(1442978789184);
    
    alert(formatDate(nowDate));

    二十七、当前日期

    var calculateDate = function(){
    
        var date = new Date();
    
        var weeks = ["日","一","二","三","四","五","六"];
    
        return date.getFullYear()+"年"+(date.getMonth()+1)+"月"+
    
        date.getDate()+"日 星期"+weeks[date.getDay()];
    
    }
    
    $(function(){
    
        $("#dateSpan").html(calculateDate());
    
    });

    二十八、判断周六/周日

    <p id="text"></p>
    function time(y,m){
    
        var tempTime = new Date(y,m,0);
    
        var time = new Date();
    
        var saturday = new Array();
    
        var sunday = new Array();
    
        for(var i=1;i<=tempTime.getDate();i++){
    
            time.setFullYear(y,m-1,i);
    
            var day = time.getDay();
    
            if(day == 6){
    
                saturday.push(i);
    
            }else if(day == 0){
    
                sunday.push(i);
    
            }
    
        }
    
        var text = y+"年"+m+"月份"+"<br />"
    
                    +"周六:"+saturday.toString()+"<br />"
    
                    +"周日:"+sunday.toString();
    
        document.getElementById("text").innerHTML = text;
    
    }
    
    time(2018,5);

    二十九、AJAX调用错误处理

    当 Ajax 调用返回 404 或 500 错误时,就执行错误处理程序。如果没有定义处理程序,其他的 jQuery 代码或会就此罢工。定义一个全局的 Ajax 错误处理程序

    $(document).ajaxError(function (e,xhr,settings,error){
      console.log(error);
    })

    三十、链式插件调用

    jQuery 允许“链式”插件的方法调用,以减轻反复查询 DOM 并创建多个 jQuery 对象的过程。

    $('#elem').show();
    $('#elem').html('bla');
    $('#elem').otherStuff();

    通过使用链式,可以改善

    $('#elem').show().html('bla').otherStuff();

    还有一种方法是在(前缀$)变量中高速缓存元素

    var $elem = $('#elem');
    $elem.show();
    $elem.html('bla');
    $elem.otherStuff();

    链式和高速缓存的方法都是 jQuery 中可以让代码变得更短和更快的最佳做法。

  • 相关阅读:
    使用Eclipse 创建Spring Boot项目
    springMVC中文乱码问题
    Java POI Excel 导入导出
    springMVC + quartz实现定时器(任务调度器)
    spring配置Converter、Formatter日期转换器
    springMVC+springJDBC+Msql注解模式
    基于JavaScript封装的Ajax工具类
    H5音乐播放器
    JavaWeb+MySql分页封装
    JS如何判断是否为ie浏览器的方法(包括IE10、IE11在内)
  • 原文地址:https://www.cnblogs.com/yang-hui/p/9018434.html
Copyright © 2020-2023  润新知