jquery插件锦集【推荐】

本篇的由来是群里面某个朋友提到说：有没有一个倒计时的特效，格式如分钟：秒；由此思考了下，觉得弄几个常用效果的js小插件还是不错的，可以供大家学习和使用，这里我取名为：shenniu.effect.js；希望大家喜欢，多多点赞支持：

. 时钟效果

. 倒计时

. 全选效果

. tab点击切换

. tab鼠标移动切换

. 文本输入搜索

. 几个常用table展示方式插件

. 列表插件shenniu.pager.js

下面一步一个脚印的来分享：

首先，先发个线上测试地址lovexins.com:8081/tpl/effect.html，接着需要引用jquery.js和shenniu.effect.js及shenniu.effect.css，然后咋们一起来看怎么使用和效果图

. 时钟插件代码：

//横向时钟 HenXiangClock: function (option) { var defOption = { id: "HenXiangClockId", format: "yyy-MM-dd HH:mm:ss", //格式 setInterNum: 1 * 1000, //js计时器的周期时间，默认1s }; $.extend(defOption, option); var clearVal = setInterval(function () { var dateTime = new Date(); var y = dateTime.getFullYear(); var M = dateTime.getMonth() + 1; var d = dateTime.getDate(); var h = dateTime.getHours(); var m = dateTime.getMinutes(); var s = dateTime.getSeconds(); var sy = y; var sM = addZero(M, 10, 0); var sd = addZero(d, 10, 0); var sh = addZero(h, 10, 0); var sm = addZero(m, 10, 0); var ss = addZero(s, 10, 0); var result = defOption.format. replace("yyyy", sy). replace("MM", sM). replace("dd", sd). replace("HH", sh). replace("mm", sm). replace("ss", ss); $("#" + option.id).html(result); if (defOption.setInterNum <= 0) { clearInterval(clearVal); } }, defOption.setInterNum); }

横向时钟

effect.HenXiangClock({ id: "div1_1", format: "yyyy-MM-dd HH:mm:ss" });

文字时钟

effect.HenXiangClock({ id: "div1_2", format: "yyyy年MM月dd日HH时mm分ss秒" });

缩写时钟

　effect.HenXiangClock({ id: "div1_3", format: "HH时mm分ss秒" }); effect.HenXiangClock({ id: "div1_4", format: "HH:mm:ss" }); effect.HenXiangClock({ id: "div1_5", format: "yyyy-MM-dd", setInterNum: 0 });

. 倒计时插件代码：

//倒计时 ReClock: function (option) { var defOption = { id: "ReClockId", h: 0, //时 m: 0, //分钟 s: 0, //秒 format: "HH:mm:ss", //格式 isAutoZero: true, //数字个位数的时候，是否自动增加0 setInterNum: 1 * 1000, //js计时器的周期时间，默认1s backFun: function () { } }; $.extend(defOption, option); var clearVal = setInterval(function () { var dateTime = new Date(0, 0, 0, defOption.h, defOption.m, defOption.s, 0); if (defOption.s <= 0) { if (defOption.m <= 0) { if (defOption.h <= 0) { $("#" + defOption.id).html(""); //清除timer clearInterval(clearVal); //执行回调函数 defOption.backFun(); return; } else { defOption.s = 59; defOption.m = 59; defOption.h--; } } else { defOption.s = 59; defOption.m--; } } var h = dateTime.getHours(); var m = dateTime.getMinutes(); var s = dateTime.getSeconds(); var compareNum = defOption.isAutoZero ? 10 : 0; var sh = addZero(h, compareNum, 0); var sm = addZero(m, compareNum, 0); var ss = addZero(s, compareNum, 0); var result = defOption.format. replace("HH", sh). replace("mm", sm). replace("ss", ss); $("#" + defOption.id).html(result); defOption.s--; }, defOption.setInterNum); }

时钟倒计时

//倒计时 effect.ReClock({ id: "div2_1", m: 1, format: "mm:ss", backFun: function () { $("#div2_1").html("结束啦"); } });

提交按钮倒计时

$("#btn2_2").on("click", function () { var btnObj = $(this); btnObj.attr("disabled", "disabled") effect.ReClock({ id: "div2_2", s: 10, format: "ss秒后才能重新获取", isAutoZero: false, backFun: function () { btnObj.removeAttr("disabled"); } }); });

提交按钮倒计时缩写

$("#btn2_3").on("click", function () { var btnObj = $(this); btnObj.attr("disabled", "disabled") effect.ReClock({ id: "div2_3", s: 10, format: "ss秒", isAutoZero: false, backFun: function () { btnObj.removeAttr("disabled"); } }); });

. 全选插件代码：