超实用的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,获取时间的方法,计算时差的方法,实现不同的倒时计 ...
随机推荐
- nexus3修改admin密码
Nexus是通过内置的orientdb数据库管理,是以需要进入到库里面修改密码. 不能像这篇博客(https://blog.csdn.net/tianya6607/article/details/53 ...
- spi简介(自我理解)
因为项目中用到spi总线,网上看了下资料,总感觉云山雾罩的,就向身边的同事问了下,他给我解释了下, 我现在把自己理解的写下来 spi一共四条线,一条选择线,一条数据线,2条数据线.spi是一对多设备, ...
- delphi窗口的create和free,一个古老的话题
窗体分为模式窗体和无模式窗体. 模式窗体在创建窗口创建和释放: begin if not Assigned(FB_Input_JianYanDan) then FB_Input_JianYanDan ...
- 传输模型,网络层次划分,三次握手,四次挥手,IP与端口,套接字socket
了解套接字之前,需要先了解基本的传输模型 其次,还需要了解网络的七层划分和四层结构 在python中,数据链路层相当于硬件层,python不需要了解,只用在传输层进行学习就足够了 其中,传输层分为TC ...
- 【习题 4-6 UVA - 508】Morse Mismatches
[链接] 我是链接,点我呀:) [题意] 给你每个字母对应的摩斯密码. 然后每个单词的莫斯密码由其组成字母的莫斯密码连接而成. 现在给你若干个莫斯密码. 请问你每个莫斯密码对应哪个单词. 如果有多个单 ...
- (28)SpringBoot启动时的Banner设置【从零开始学Spring Boot】
对于使用过Spring Boot的开发者来说,程序启动的时候输出的由字符组成的Spring符号并不陌生.这个是Spring Boot为自己设计的Banner: 1. . ____ ...
- 全栈JavaScript之路( 二十 )HTML5 插入 html标记 ( 二 )insertAdjacentHTML
insertAdjacentHTML(), 这种方法也是在IE中最早出现的.如今已纳入html5规范,它接受两个參数,一个是下列的标记之中的一个,一个是要写入的 html 代码文本. beforeb ...
- POJ 2762 Going from u to v or from v to u?(强联通,拓扑排序)
id=2762">http://poj.org/problem?id=2762 Going from u to v or from v to u? Time Limit: 2000MS ...
- Scrapy源代码分析-经常使用的爬虫类-CrawlSpider(三)
CrawlSpider classscrapy.contrib.spiders.CrawlSpider 爬取一般站点经常使用的spider.其定义了一些规则(rule)来提供跟进link的方便的机制. ...
- 对VC++的OO思考
1. MFC借助C++的优势为Windows开发开辟了一片新天地,同时也借助 ApplicationWizzard使开发者摆脱离了那些每次都必写基本代码2. 借助ClassWizard和消息映射使开发 ...