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. java 定时器任务模板

    1.该定时任务是基于web.xml的监听机制 listener 来实现的 建立监听类: NFDFlightDataTaskListener.java import javax.servlet.Serv ...

  2. cxgrid的过滤%x%问题【备查】

    把这个文件复制到你的程序目录\DevExpress VCL\ExpressDataController\Sources\cxLike.pas function LikeStr(const AStr,  ...

  3. C++ - 部分STL容器如何去除重复元素

    如果元素被保存在vector中,可先对vector里面的元素排序,然后调用unique函数去重,unique(起始迭代器,终止迭代器),返回的是去重以后vector中没有重复元素的下一个位置的迭代器. ...

  4. 【ACM】NYOJ_506_洗澡_20130725

    洗澡时间限制:1000 ms  |  内存限制:65535 KB 难度:1描述 Mostrp是个爱干净的好少年. 有一次去澡堂洗澡时发现 澡堂的澡柜编号中没有出现过数字‘4’. Mostrp 感到很好 ...

  5. ios自己定义类(UIView)代码生成简单的UITableViewCell

    因为一个项目中有大量的UITableViewCell须要书写,样式几乎相同都是 文字介绍:显示内容 这种. 自己又懒得写UITableViewCell类嫌不是必需:在方法tableView:cellF ...

  6. JavaThread等待/通知经典范式

    JavaThread等待/通知经典范式 package com.stono.thread; import java.text.SimpleDateFormat; import java.util.Da ...

  7. Android基础新手教程——3.4 TouchListener PK OnTouchEvent + 多点触碰

    Android基础新手教程--3.4 TouchListener PK OnTouchEvent + 多点触碰 标签(空格分隔): Android基础新手教程 本节引言: 如题,本节给大家带来的是To ...

  8. redis之Hash存储与String存储内存消耗对照

    存储对象User String存储方式: SET media:1155315 939 GET media:1155315 > 939 String结构存储该对象 User243 243600 存 ...

  9. poj2750--Potted Flower(线段树)

    题目链接:点击打开链接 题目大意:给出n个数排成一个环.求环的最大连续子序列,不能是总序列 建一个线段树来求最大子序列假设仅仅是一个序列.那么求最大连续子序列非常easy,可是假设是一个环,那就要考虑 ...

  10. Tool-Java:Eclipse

    ylbtech-Tool-Java:Eclipse Eclipse 是一个开放源代码的.基于Java的可扩展开发平台.就其本身而言,它只是一个框架和一组服务,用于通过插件组件构建开发环境.幸运的是,E ...