二十二、正则表达式

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

更多专业前端知识,请上 【猿2048】www.mk2048.com

前端开发常用代码片段(下篇)相关推荐

  1. 分享前端开发常用代码片段

    分享开发中常用的一些 代码片段,我们的目标是早下班.不加班,哈哈~~ 1.手机号隐藏中间4位 //手机号脱敏 function mobile(data) {return data.replace(/( ...

  2. 前端开发常用代码片段

    作者:WEBING segmentfault.com/a/1190000014700549 一.预加载图像 如果你的网页中需要使用大量初始不可见的(例如,悬停的)图像,那么可以预加载这些图像. 二.检 ...

  3. iOS开发常用代码片段:总有你用得上的功能

    使用方法:查看文章目录,查找需要的功能. 代码片段目录 1.禁止手机睡眠 2. 隐藏某行cell 3.禁用button高亮 4..切换window的根控制器 5.去除数组中重复的对象 6.给一个vie ...

  4. html5默认加载s文件夹,『总结』web前端开发常用代码整理

    IE条件注释 条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法. 条件注释只能用于IE5以上,IE1 ...

  5. Android 开发常用代码片段

    1.图片旋转 Bitmap bitmapOrg = BitmapFactory.decodeResource(this.getContext().getResources(), R.drawable. ...

  6. 加密php代码一担粮,分享8个PHP开发常用代码片段_后端开发

    php字符串转时间戳_后端开发 在php中可以使用"strtotime()"函数将字符串转为时间戳,该函数用于把字符串转换为时间戳,其语法是"strtotime(time ...

  7. 前端常用代码片段(四)

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

  8. 前端开发常用技巧(update...)

    前端开发常用技巧 JS 1.JavaScript删除子节点的方法 2.JS 动态生成div并添加点击事件 CSS 1.文本溢出处理 2.使用伪类 添加下划线 3.使用伪类 添加下划线 下划线居中 4. ...

  9. 前端开发常用的Chrome插件推荐

    谷歌浏览器简单清爽的界面.因其丰富的插件,成为前端开发者喜欢的浏览器.而易用的插件可以帮助开发者减少开发过程中的大量工作量,带来更加强大的效果.今天给大家推荐几个在程序员中口碑不错非常实用的Chrom ...

最新文章

  1. hdu 5325 Crazy Bobo dfs
  2. 【Golang 基础】Go 语言的程序结构
  3. C# Soap调WebService
  4. [网络]_获取内外网IP地址【Auto.js】
  5. 5G NR 决定CORESET0频域位置的offset取值由来
  6. BZOJ.3265.志愿者招募加强版(费用流SPFA)
  7. python文件分块读取_Python多进程分块读取超大文件的方法
  8. [权威指南]学习笔记——第3章 创建、更新和删除文档
  9. Ubuntu 20.04 上安装 TeamViewer
  10. XenServer 6.5实战系列之六:Creating a Storage Repository (CIFS)
  11. 计算机学院女神,女神季·计算机科学与技术学院——第六期
  12. 嵌入式“Hello World!”——点亮流水灯
  13. DDD/ABP/EF Core :新特性Owned Entity Types ,尝试另外一种值对象的配置方式
  14. docker run 的 -i -t -d参数
  15. 在脉脉匿名频道上看了这些公司的评价后,这里有几个结论
  16. 快速上手Django(二) Django 根据模型(models)生成更新数据库表make migrations
  17. 2022春软件工程课后作业(3.16)
  18. oracle中的latch: cache buffers chains 与热块
  19. 女连环杀手都有什么共同之处?
  20. 工业控制领域电子元件国产化硬件设计替代解读

热门文章

  1. mysql5.6特性_MySQL5.6新版本特性
  2. linux函数计时,Linux 中的计时——gettimeofday函数
  3. Java调用跟踪系统_Tracer:在分布式系统中的调用跟踪和日志相关
  4. java 访问内部类的属性_java中的内部类详细总结
  5. nuxt sass 全局变量的问题_Sass入门教程
  6. java 运行 .jar 文件乱码
  7. 数据结构和算法基础之冒泡排序
  8. Java Spring 后端项目搭建
  9. hdu 3016 Man Down
  10. C#编程高并发的几种处理方法