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代码段的更多相关文章

  1. 前端福利!10个短小却超实用的JavaScript 代码段

    JavaScript正变得越来越流行,它已经成为前端开发的第一选择,并且利用基于JavaScript语言的NodeJS,我们也可以开发出高 性能的后端服务,甚至我还看到在硬件编程领域也出现了JavaS ...

  2. 推荐10 个短小却超实用的 JavaScript 代码段

    1. 判断日期是否有效 JavaScript中自带的日期函数还是太过简单,很难满足真实项目中对不同日期格式进行解析和判断的需要.jQuery也有一些第三方库来使日期相关的处理变得简单,但有时你可能只需 ...

  3. 《超实用的JavaScript代码段》—— 读后总结

    这本书全是代码,从头到尾跟着坐下来确实收获很多.比那些古板的教科书式的理解更多,不过书中并不是每个例子都做了,有的作者封装的太多,觉得看了收获不多,就没细看——比如模块渐变.有空好好学学这段的代码. ...

  4. 超实用的JavaScript代码段 --倒计时效果

    现今团购网.电商网.门户网等,常使用时间记录重要的时刻,如时间显示.倒计时差.限时抢购等,本文分析不同倒计时效果的计算思路及方法,掌握日期对象Date,获取时间的方法,计算时差的方法,实现不同的倒时计 ...

  5. 超实用的JavaScript代码段 Item4 --发送短信验证码

    发送短信验证码 实现点击“发送验证码”按钮后,按钮依次显示为“59秒后重试”.“58秒后重试”…直至倒计时至0秒时再恢复显示为“发送验证码”.在倒计时期间按钮为禁用状态 . 第一步.获取按钮.绑定事件 ...

  6. 超实用的JavaScript代码段 Item8 -- js对象的(深)拷贝

    js 对象 浅拷贝 和 深拷贝 1.浅拷贝 拷贝就是把父对像的属性,全部拷贝给子对象. 下面这个函数,就是在做拷贝: var Chinese = { nation:'中国' } var Doctor ...

  7. 超实用的JavaScript代码段 Item3 --图片轮播效果

    图片轮播效果 图片尺寸 统一设置成:490*170px; 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒 ...

  8. 超实用的JavaScript代码段 Item2 --伸缩菜单栏

    伸缩菜单栏 点击标题时判断该标题下的菜单是否显示,如果是显示的则将其隐藏,如果是隐藏的则将其显示出来. <!doctype html> <html lang="en&quo ...

  9. 超实用的JavaScript代码段 Item1 --倒计时效果

    现今团购网.电商网.门户网等,常使用时间记录重要的时刻,如时间显示.倒计时差.限时抢购等,本文分析不同倒计时效果的计算思路及方法,掌握日期对象Date,获取时间的方法,计算时差的方法,实现不同的倒时计 ...

随机推荐

  1. IE下自定义错误页面不显示的原因

    如果一个 404 页面的内容小于 512B,IE 会认为该 404 页面不够友好,在 IE 下将不会成功返回该 404 错误页面

  2. 基于Homestead搭建PHP项目开发环境(适合Zend Framework,Laravel,Yii,thinkphp等)

    参考: https://framework.zend.com/bl...参考: https://laravel.com/docs/5.5/... 第一步:软件的下载和安装 软件1:VirtualBox ...

  3. keycode键盘 按键 - 键码 对应表

    字母和数字键的键码值(keyCode) 按键 键码 按键 键码 按键 键码 按键 键码 A 65 J 74 S 83 1 49 B 66 K 75 T 84 2 50 C 67 L 76 U 85 3 ...

  4. cannot find -lGL

    解决方法: 以下操作都在root权限下进行! 1.按照提示安装对应的库文件,fedora安装库件的格式:yum install libxxx(你要装的库),如果已经安装GL库,会显示已经安装 Ps:如 ...

  5. ISAP 算法的学习

    http://www.renfei.org/blog/isap.html 算法与数学 网络流-最大流问题 ISAP 算法解释 2013-08-07Renfei Song 2 条评论 内容提要 [隐藏] ...

  6. android 细节之An internal error occurred during: &quot;Launching New_configuration&quot;.

    今天在导入公司的一个小demo时候发现了一个非常有意思的错误. An internal error occurred during: "Launching New_configuration ...

  7. 程序中的文件之沙盒以及plist文件的初步使用

    沙盒是相对于"应用程序"的文件,也就是相相应app所在的页面的文件. 每个应用都有自己的应用沙盒(应用沙盒就是文件系统文件夹).与其它文件系统隔离.应用必须呆在在积极的沙盒中.其它 ...

  8. Android应用开发-护眼提醒-总结篇

    设计初衷: 在学习<第一行代码>的服务那章时,涉及到了alarmmanager的内容.然后笔者当时正好在关注"程序猿怎样保护眼睛"的问题. 于是便自己做了一个demo, ...

  9. 对VC++的OO思考

    1. MFC借助C++的优势为Windows开发开辟了一片新天地,同时也借助 ApplicationWizzard使开发者摆脱离了那些每次都必写基本代码2. 借助ClassWizard和消息映射使开发 ...

  10. (转)android res文件夹里面的drawable(ldpi、mdpi、hdpi、xhdpi、xxhdpi)

    android res文件夹里面的drawable(ldpi.mdpi.hdpi.xhdpi.xxhdpi) (1)drawable-hdpi里面存放高分辨率的图片,如WVGA (480x800),F ...