本文主要和大家分享jquery实现倒计时功能以及jquery实现发送短信倒计时功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。
在实际运用中，经常会使用到倒计时的效果。以下代码利用jQuery实现了一个倒计时计时器。
nbsp;html>jquery倒计时实现 .shop_list ul li{ display: inline-block; list-style: none; width: 300px; }
登录后复制
小米手机 Note 顶配版
全网通 香槟金 移动联通
双4G手机 双卡双待
￥2998起
小米手机 Note 顶配版
全网通 香槟金 移动联通
双4G手机 双卡双待
￥2998起 $(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.append(““+showYear+”年”) }; if (showMonth>0) { t.append(““+showMonth+”月”) }; if (showDay>0) { t.append(““+showDay+”天”) }; if (showHour>=0) { t.append(““+showHour+”小时”) }; if (showMinute>=0) { t.append(““+showMinute+”分钟”) }; if (showSeconds>=0) { t.append(““+showSeconds+”秒”) }; }; }); starttime++; },1000); // 设定执行或延时时间 }; // 执行它 actionDo(); });
jQuery短信倒计时功能的实现方法
1.点击按钮的时候，可以进行倒计时，倒计时自定义.2.当接收短信失败后，倒计时停止，可点击重新发送短信.3.点击的元素支持一般标签和input标签。看似很复杂其实实现代码很简单，下面小编给大家分享下实现代码，需要的朋友参考下吧。
实现的主要功能如下：
1.点击按钮的时候，可以进行倒计时，倒计时自定义。
2.当接收短信失败后，倒计时停止，可点击重新发送短信。
3.点击的元素支持一般标签和input标签。
html代码：
发送验证码
登录后复制
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
调用方式：
$(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实现倒计时及短信倒计时功能的实现代码的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2787338.html
