在实际运用中，经常会使用到倒计时的效果。以下代码利用jquery实现了一个倒计时计时器。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>jquery倒计时实现</title> <style type="text/css"> .shop_list ul li{ display: inline-block; list-style: none; width: 300px; } </style> </head> <body> <p class="shop_list" id="shop_list"> <ul> <li> <img src="img/index/zixun1.jpg"/> <p class="listitem"> <h5>小米手机 note 顶配版</h5> <p>全网通 香槟金 移动联通<br/>双4g手机 双卡双待</p> <em>￥2998<i>起</i></em> <span class="time" data-starttime="1445982375" data-endtime="1446350400"></span> </p> </li> <li> <img src="img/index/zixun1.jpg"/> <p class="listitem"> <h5>小米手机 note 顶配版</h5> <p>全网通 香槟金 移动联通<br/>双4g手机 双卡双待</p> <em>￥2998<i>起</i></em> <span class="time" data-starttime='1445982375' data-endtime='1446350400'></span> </p> </li> </ul> </p> </body> <script type="text/javascript" src="js/lib/jquery-1.10.1.min.js" ></script> <script type="text/javascript"> $(function(){ //找到商品列表以及时间显示span var abj = $("#shop_list"), timeobj = abj.find('.time'); //获取开始时间 var starttime = timeobj.data('starttime'); // 定时器函数 function actiondo(){ return setinterval(function(){ timeobj.each(function(index, el) { //surplustime为活动剩余开始时间 var t = $(this), surplustime = t.data('endtime') -starttime; //若活动剩余开始时间小于0，则说明活动已开始 if (surplustime <= 0) { t.html("活动已经开始"); } else{ //否则，活动未开始，将剩余的时间转换成年，月，日，时，分，秒的形式 var year = surplustime/(24*60*60*365), showyear = parseint(year), month = (year-showyear)*12, showmonth = parseint(month), day = (month-showmonth)*30, showday = parseint(day), hour = (day-showday)*24, showhour = parseint(hour), minute = (hour-showhour)*60, showminute = parseint(minute), seconds = (minute-showminute)*60, showseconds = parseint(seconds); t.html(""); //设置输出到html的格式并输出到html if (showyear>0) { t.append("<span>"+showyear+"年</span>") }; if (showmonth>0) { t.append("<span>"+showmonth+"月</span>") }; if (showday>0) { t.append("<span>"+showday+"天</span>") }; if (showhour>=0) { t.append("<span>"+showhour+"小时</span>") }; if (showminute>=0) { t.append("<span>"+showminute+"分钟</span>") }; if (showseconds>=0) { t.append("<span>"+showseconds+"秒</span>") }; }; }); starttime++; },1000); // 设定执行或延时时间 }; // 执行它 actiondo(); }); </script> </html>
jquery短信倒计时功能的实现方法
1.点击按钮的时候，可以进行倒计时，倒计时自定义.2.当接收短信失败后，倒计时停止，可点击重新发送短信.3.点击的元素支持一般标签和input标签。看似很复杂其实实现代码很简单，下面小编给大家分享下实现代码，需要的朋友参考下吧。
实现的主要功能如下：
1.点击按钮的时候，可以进行倒计时，倒计时自定义。
2.当接收短信失败后，倒计时停止，可点击重新发送短信。
3.点击的元素支持一般标签和input标签。
html代码：
<input type="button" class="samebtn btncur" value="发送验证码"/> <p class="samebtn btncur2">发送验证码</p>
css代码：
body{padding:100px;text-align: center;} .samebtn{display: inline-block;font-size:12px;cursor:pointer;width:76px;height:25px;line-height: 25px;text-align: center;border:0;background: #3186df;color:#fff;} .samebtn.current{background: #b1b1b1;}
js代码：
//短信倒计时功能 /**使用方式如下： * $(".btncur").countdownf({ * time:120, * resetwords:'重新发送', //文字定义 * cnseconds:'s',//倒计时中显示中文的秒，还是s * clickclass:'current', //点击后添加的class类 * countstate:true, * callback:function(){ * settimeout(function(){ * //当发送失败后，可以立即清除倒计时与其状态 * $(".btncur").countdownf('clearstate'); * },3000); * } * }); * * */ ;(function($,window,document,undefined){ var pluginname = 'countdownf', defaluts = { time:120, resetwords:'重新发送', //文字定义 cnseconds:'s',//倒计时中显示中文的秒，还是s clickclass:'current', //点击后添加的class类 countstate:true //是否可以倒计时，true可以倒计时，false不能进行倒计时 } function count(element,options){ this.element = element; this.$element = $(this.element); this.state = true; this.settings = $.extend({},defaluts,options); this.number = this.settings.time; this.init(); } count.prototype = { init:function(){ var self = this; self.$element.on('click',function(){ if(self.state && self.settings.countstate){ self.state = false; if(self.settings.countstate){ self._count(); } if(self.settings.callback){ self.settings.callback(); } } }); }, //倒计时函数 _count:function(){ var self = this; if(self.number == 0){ self._clearinit(); }else{ if(self.number < 10){ //如果当前元素是input，使用val赋值 this.$element.attr('type') ? this.$element.val('0' + self.number + self.settings.cnseconds) : this.$element.html('0' + self.number + self.settings.cnseconds); }else{ this.$element.attr('type') ? this.$element.val(self.number + self.settings.cnseconds) : this.$element.html(self.number + self.settings.cnseconds); } self.number--; this.$element.addclass(self.settings.clickclass); self.clearcount = settimeout(function(){ self._count(); },1000); } }, //修改是否可发送短信验证码倒计时状态 change:function(state){ var self = this; self.settings.countstate = state; }, //置为初始状态 _clearinit:function(){ var self = this; self.$element.removeclass(self.settings.clickclass); self.$element.attr('type') ? self.$element.val(self.settings.resetwords) : self.$element.html(self.settings.resetwords); cleartimeout(self.clearcount); self.number = self.settings.time; self.state = true; }, //清除倒计时进行状态 clearstate:function(){ var self = this; self._clearinit(); } }; $.fn.countdownf = function(options){ var args = arguments; if(options === undefined || typeof options ==='object' ){ return this.each(function(){ if(!$.data(this,'plugin' + pluginname)){ $.data(this,'plugin' + pluginname,new count(this,options)); } }); } else if(typeof options === 'string' && options !== 'init'){ var returns; this.each(function(){ var data = $.data(this,'plugin' + pluginname); if(data instanceof count && typeof data[options] === 'function'){ returns = data[options].apply(data,array.prototype.slice.call(args,1)); } if(options === 'destory'){ $.data(this, 'plugin' + pluginname, null); } }); return returns !== undefined ? returns : this; } else{ $.error('method' + options + 'does not exist on jquery.countdownf'); } } })(jquery,window,document);
调用方式：
$(function(){ $(".btncur").countdownf({ time:120, countstate:true, callback:function(){ settimeout(function(){ $(".btncur").countdownf('clearstate'); },3000); } }); $(".btncur2").countdownf({ time:50, countstate:true, cnseconds:'秒', callback:function(){ settimeout(function(){ $(".btncur2").countdownf('clearstate'); },5000); } }); })
相关推荐：
实现短信倒计时60s的方法
js防刷新的倒计时代码 js倒计时代码
jquery页面倒计时并刷新效果的实现方法
以上就是jquery实现倒计时及短信倒计时功能的实现代码的详细内容。