欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-01 17:21:10
二十二、正则表达式 二十三、限制字符数 二十四、验证码倒计时 1、JavaScript实现 2、jQuery实现 二十五、倒计时跳转 二十六、时间戳、毫秒格式化 二十七、当前日期 二十八、判断周六/周日 二十九、AJAX调用错误处理 当 Ajax 调用返回 404 或 500 错误时,就执行错误处理 ......

二十二、正则表达式

//验证邮箱

/^\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 中可以让代码变得更短和更快的最佳做法。