前端开发常用代码片段(下篇)
二十二、正则表达式
//验证邮箱
/^\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.手机号隐藏中间4位 //手机号脱敏 function mobile(data) {return data.replace(/( ...
- 前端开发常用代码片段
作者:WEBING segmentfault.com/a/1190000014700549 一.预加载图像 如果你的网页中需要使用大量初始不可见的(例如,悬停的)图像,那么可以预加载这些图像. 二.检 ...
- iOS开发常用代码片段:总有你用得上的功能
使用方法:查看文章目录,查找需要的功能. 代码片段目录 1.禁止手机睡眠 2. 隐藏某行cell 3.禁用button高亮 4..切换window的根控制器 5.去除数组中重复的对象 6.给一个vie ...
- html5默认加载s文件夹,『总结』web前端开发常用代码整理
IE条件注释 条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法. 条件注释只能用于IE5以上,IE1 ...
- Android 开发常用代码片段
1.图片旋转 Bitmap bitmapOrg = BitmapFactory.decodeResource(this.getContext().getResources(), R.drawable. ...
- 加密php代码一担粮,分享8个PHP开发常用代码片段_后端开发
php字符串转时间戳_后端开发 在php中可以使用"strtotime()"函数将字符串转为时间戳,该函数用于把字符串转换为时间戳,其语法是"strtotime(time ...
- 前端常用代码片段(四)
前端常用代码片段(一) 点这里 前端常用代码片段(二) 点这里 前端常用代码片段(三) 点这里 前端常用代码片段(四) 点这里 前端常用代码片段(五) 点这里 前端常用代码片段(六) 点这里 1.简述 ...
- 前端开发常用技巧(update...)
前端开发常用技巧 JS 1.JavaScript删除子节点的方法 2.JS 动态生成div并添加点击事件 CSS 1.文本溢出处理 2.使用伪类 添加下划线 3.使用伪类 添加下划线 下划线居中 4. ...
- 前端开发常用的Chrome插件推荐
谷歌浏览器简单清爽的界面.因其丰富的插件,成为前端开发者喜欢的浏览器.而易用的插件可以帮助开发者减少开发过程中的大量工作量,带来更加强大的效果.今天给大家推荐几个在程序员中口碑不错非常实用的Chrom ...
最新文章
- hdu 5325 Crazy Bobo dfs
- 【Golang 基础】Go 语言的程序结构
- C# Soap调WebService
- [网络]_获取内外网IP地址【Auto.js】
- 5G NR 决定CORESET0频域位置的offset取值由来
- BZOJ.3265.志愿者招募加强版(费用流SPFA)
- python文件分块读取_Python多进程分块读取超大文件的方法
- [权威指南]学习笔记——第3章 创建、更新和删除文档
- Ubuntu 20.04 上安装 TeamViewer
- XenServer 6.5实战系列之六:Creating a Storage Repository (CIFS)
- 计算机学院女神,女神季·计算机科学与技术学院——第六期
- 嵌入式“Hello World!”——点亮流水灯
- DDD/ABP/EF Core :新特性Owned Entity Types ,尝试另外一种值对象的配置方式
- docker run 的 -i -t -d参数
- 在脉脉匿名频道上看了这些公司的评价后,这里有几个结论
- 快速上手Django(二) Django 根据模型(models)生成更新数据库表make migrations
- 2022春软件工程课后作业(3.16)
- oracle中的latch: cache buffers chains 与热块
- 女连环杀手都有什么共同之处?
- 工业控制领域电子元件国产化硬件设计替代解读