超实用的JavaScript代码段
1. 判断日期是否有效
JavaScript中自带的日期函数还是太过简单,很难满足真实项目中对不同日期格式进行解析和判断的需要。JQuery也有一些第三方库来使日期相关的处理变得简单,但有时你可能只需要一个非常简单的函数,而不想引入一个庞大的第三方库。这时,你可以使用下面这段日期校验代码,它允许你自定义日期格式并进行日期有效性的校验。
function isValidDate(value, userFormat) { // Set default format if format is not provided
userFormat = userFormat || 'mm/dd/yyyy'; // Find custom delimiter by excluding
// month, day and year characters
var delimiter = /[^mdy]/.exec(userFormat)[]; // Create an array with month, day and year
// so we know the format order by index
var theFormat = userFormat.split(delimiter); // Create array from user date
var theDate = value.split(delimiter); function isDate(date, format) {
var m, d, y, i = , len = format.length, f;
for (i; i < len; i++) {
f = format[i];
if (/m/.test(f)) m = date[i];
if (/d/.test(f)) d = date[i];
if (/y/.test(f)) y = date[i];
}
return (
m > && m < &&
y && y.length === &&
d > &&
// Check if it's a valid day of the month
d <= (new Date(y, m, )).getDate()
);
} return isDate(theDate, theFormat);
}
使用方法:
下面这个调用返回false,因为11月份没有31天
isValidDate('dd-mm-yyyy', '31/11/2012')
2. 获取一组元素的最大宽度或高度
下面这个函数,对于需要进行动态排版的开发人员非常有用。
var getMaxHeight = function ($elms) {
var maxHeight = ;
$elms.each(function () {
// In some cases you may want to use outerHeight() instead
var height = $(this).height();
if (height > maxHeight) {
maxHeight = height;
}
});
return maxHeight;
};
使用方法:
$(elements).height( getMaxHeight($(elements)) );
3、逐个隐藏元素
下面这个jQuery插件可以根据你设置的步长(间隔时间)来逐个隐藏一组元素。在列表元素的重新加载中使用,可以达到很好的效果。
$.fn.fadeAll = function (ops) {
var o = $.extend({
delay: , // delay between elements
speed: , // animation speed
ease: 'swing' // other require easing plugin
}, ops);
var $el = this;
for (var i=, d=, l=$el.length; i<l; i++, d+=o.delay) {
$el.eq(i).delay(d).fadeIn(o.speed, o.ease);
}
return $el;
}
使用方法:
$(elements).fadeAll({ delay: , speed: });
4、
限制文本字数
下面这端脚本允许你根据给定的字符长度截取文本,如果文本被截取,那么它的后面会自动带上省略号。
function excerpt(str, nwords) {
var words = str.split(' ');
words.splice(nwords, words.length-);
return words.join(' ') +
(words.length !== str.split(' ').length ? '…' : '');
}
5、
判断相应式布局中当前适配度
目前很多设计已经采用了响应式布局来适配网站或应用在不同设备上的显示。你经常需要在代码中判断当前处于哪一个屏幕适配度下。
function isBreakPoint(bp) {
// The breakpoints that you set in your css
var bps = [, , , ];
var w = $(window).width();
var min, max;
for (var i = , l = bps.length; i < l; i++) {
if (bps[i] === bp) {
min = bps[i-] || ;
max = bps[i];
break;
}
}
return w > min && w <= max;
}
使用方法:
if ( isBreakPoint() ) {
// breakpoint at 320 or less
}
if ( isBreakPoint() ) {
// breakpoint between 320 and 480
}
…
6. 全局计数
在一些游戏或广告场景中,你需要记录用户在当前页面上点击某一个按钮的次数,这时你可以使用jQuery的.data()函数来处理:
$(element)
.data('counter', ) // begin counter at zero
.click(function() {
var counter = $(this).data('counter'); // get
$(this).data('counter', counter + ); // set
// do something else...
});
7、创建动态菜单或下拉列表
在很多场景中,我们都需要动态地创建菜单、下拉列表或列表项。下面是一段最基础的代码实现上面的功能,你可以根据实际需要进行相应的扩展。
function makeMenu(items, tags) { tags = tags || ['ul', 'li']; // default tags
var parent = tags[];
var child = tags[]; var item, value = '';
for (var i = , l = items.length; i < l; i++) {
item = items[i];
// Separate item and value if value is present
if (/:/.test(item)) {
item = items[i].split(':')[];
value = items[i].split(':')[];
}
// Wrap the item in tag
items[i] = '<'+ child +' '+
(value && 'value="'+value+'"') +'>'+ // add value if present
item +'</'+ child +'>';
} return '<'+ parent +'>'+ items.join('') +'</'+ parent +'>';
}
使用方法:
// Dropdown select month
makeMenu(
['January:JAN', 'February:FEB', 'March:MAR'], // item:value
['select', 'option']
); // List of groceries
makeMenu(
['Carrots', 'Lettuce', 'Tomatos', 'Milk'],
['ol', 'li']
);
7、 时间格式化
function dateFormat(t){ // t 是以秒为单位的值。
var h = ~~(t/), // t除以3600,取整,得到的就是小时。
m = ~~(t%/), // t求余3600,取模,得到的就是去除小时剩下的秒数(分钟 + 秒),再除以60,取整,得到的就是分钟。
s = ~~(t%%); // t求余3600,再求余60,剩下的自然就是“秒数”。 return h+'小时'+m+'分'+s+'秒';
}
8、localstorage 方法封装
function storageFun(storageType, handler, key, value) {
var storage = storageType + "Storage";
switch(handler){
case "set":
window[storage].setItem(key, value);
break;
case "get":
return window[storage].getItem(key);
break;
case "remove":
window[storage].removeItem(key);
break;
case "clear":
window[storage].clear();
}
}
9、js动态让多列input变成不可编辑状态
注意readOnly 中的O是大写 两种方法:
$(".realPrice").attr("readOnly",true); 不可编辑,可以传值
$(".realPrice").attr("disabled",true);不可编辑,不可以传值
10、数组去空,常常分割出来的新的数组会把空也加进去,这时候去空就需要了
var arr=["","hello","","world"," ","goodboy"];
alert($.grep(arr, function(n) {return $.trim(n).length > 0;}));
11、判断:密码,长度:6-16,必须是:大写字母,小写字母,数字,特殊字符中的两种以上组合
var pwd = this.form.password;
console.log(pwd)
if(pwd.length > || pwd.length < ){
this.$message.error('密码长度必须是6-16位');
return;
}
var ls = ;
if(pwd.match(/([a-z])+/)){
ls++;
}
if(pwd.match(/([-])+/)){
ls++;
}
if(pwd.match(/([A-Z])+/)){
ls++;
}
if(pwd.match(/[^a-zA-Z0-]+/)){
ls++;
}
if(pwd.indexOf(" ") != -){
this.$message.error('密码不能包含空格');
return;
}
if(ls < ){
this.$message.error('密码必须是:大写字母,小写字母,数字,特殊字符中的两种以上组合');
return;
}
超实用的JavaScript代码段的更多相关文章
- 前端福利!10个短小却超实用的JavaScript 代码段
JavaScript正变得越来越流行,它已经成为前端开发的第一选择,并且利用基于JavaScript语言的NodeJS,我们也可以开发出高 性能的后端服务,甚至我还看到在硬件编程领域也出现了JavaS ...
- 推荐10 个短小却超实用的 JavaScript 代码段
1. 判断日期是否有效 JavaScript中自带的日期函数还是太过简单,很难满足真实项目中对不同日期格式进行解析和判断的需要.jQuery也有一些第三方库来使日期相关的处理变得简单,但有时你可能只需 ...
- 《超实用的JavaScript代码段》—— 读后总结
这本书全是代码,从头到尾跟着坐下来确实收获很多.比那些古板的教科书式的理解更多,不过书中并不是每个例子都做了,有的作者封装的太多,觉得看了收获不多,就没细看——比如模块渐变.有空好好学学这段的代码. ...
- 超实用的JavaScript代码段 --倒计时效果
现今团购网.电商网.门户网等,常使用时间记录重要的时刻,如时间显示.倒计时差.限时抢购等,本文分析不同倒计时效果的计算思路及方法,掌握日期对象Date,获取时间的方法,计算时差的方法,实现不同的倒时计 ...
- 超实用的JavaScript代码段 Item4 --发送短信验证码
发送短信验证码 实现点击“发送验证码”按钮后,按钮依次显示为“59秒后重试”.“58秒后重试”…直至倒计时至0秒时再恢复显示为“发送验证码”.在倒计时期间按钮为禁用状态 . 第一步.获取按钮.绑定事件 ...
- 超实用的JavaScript代码段 Item8 -- js对象的(深)拷贝
js 对象 浅拷贝 和 深拷贝 1.浅拷贝 拷贝就是把父对像的属性,全部拷贝给子对象. 下面这个函数,就是在做拷贝: var Chinese = { nation:'中国' } var Doctor ...
- 超实用的JavaScript代码段 Item3 --图片轮播效果
图片轮播效果 图片尺寸 统一设置成:490*170px; 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒 ...
- 超实用的JavaScript代码段 Item2 --伸缩菜单栏
伸缩菜单栏 点击标题时判断该标题下的菜单是否显示,如果是显示的则将其隐藏,如果是隐藏的则将其显示出来. <!doctype html> <html lang="en&quo ...
- 超实用的JavaScript代码段 Item1 --倒计时效果
现今团购网.电商网.门户网等,常使用时间记录重要的时刻,如时间显示.倒计时差.限时抢购等,本文分析不同倒计时效果的计算思路及方法,掌握日期对象Date,获取时间的方法,计算时差的方法,实现不同的倒时计 ...
随机推荐
- [BZOJ5072] 小A的树
设计状态\(f[i][j]\)表示以i为根的子树,包含j个点的最小黑点数,\(g[i][j]\)表示以\(i\) 为子树,包含\(j\)个点的最大黑点数,然后树形背包转移即可. 每次询问的时候就看包含 ...
- GreenPlum 集群常用命令
GreenPlum 常用命令 gpstate 命令 参数 作用 gpstate -b => 显示简要状态 gpstate -c => 显示主镜像映射 gpstart -d => 指定 ...
- tp5 权限设置
============================== <?php/** * Created by PhpStorm. * User: 14155 * Date: 2018/11/10 * ...
- ASP.NET--常用ORM框架
subsonic massive dapper 性能不错,接近原声的ADO.NET 这个是大家推荐的,stackoverflow用的就是这个框架 petapoco 这些都是ORM框架
- CODEVS——T 1004 四子连棋
http://codevs.cn/problem/1004/ 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题解 查看运行结果 题目描述 Descr ...
- 洛谷 P2534 [AHOI2012]铁盘整理
P2534 [AHOI2012]铁盘整理 题目描述 输入输出格式 输入格式: 共两行.第一行为铁盘个数N(1<=N<=50),第二行为N个不同的正整数,分别为从上到下的铁盘的半径R.(1& ...
- C#编程中,在页面上如何弹出确认删除对话框
对于页面完成一个操作后,弹出一个对话框提示是否“操作成功”.举例如下:Response.Write("<script>alert('删除成功!')</script>& ...
- BS程序怎样通过浏览器了解点击响应时间
原创作品,出自 "深蓝的blog" 博客.欢迎转载,转载时请务必注明出处,否则有权追究版权法律责任. 深蓝的blog:http://blog.csdn.net/huangyanlo ...
- apple 团队电话
back 苹果电话:400 670 18552 这个是国内能打通的
- winform设置超时时间
); //设置超时时间 var completedTask = await Task.WhenAny(new Task(async () => { );//执行的方法示例这里用延迟代替 }), ...