js代码实现点击按钮出现60秒倒计时


Posted in Javascript onJanuary 28, 2021

比如,一些网站上的手机短信认证的功能,有类似实现点击按钮后,倒计时60秒才能再次点击发送的效果。

此例子用Javascript实现点击按钮后,倒计时60秒才能再次点击发送验证码的功能。

例子1:Javascript 实现 点击按钮 倒计时60秒方可再次点击发送的效果

<input type="button" id="btn" value="免费获取验证码" />
<script type="text/javascript">
var wait=60;
function time(o) {
 if (wait == 0) {
 o.removeAttribute("disabled"); 
 o.value="免费获取验证码";
 wait = 60;
 } else { 

 o.setAttribute("disabled", true);
 o.value="重新发送(" + wait + ")";
 wait--;
 setTimeout(function() {
 time(o)
 },
 1000)
 }
 }
document.getElementById("btn").onclick=function(){time(this);}
</script>

例子2:点击按钮出现60秒倒计时js代码

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>无标题文档</title> 
<script type="text/javascript" src="js/jquery.js"></script> 
</head> 

<body> 
<input type="button" id="btn" value="免费获取验证码" onclick="settime(this)" /> 
<script type="text/javascript"> 
var countdown=60; 
function settime(val) { 
if (countdown == 0) { 
val.removeAttribute("disabled"); 
val.value="免费获取验证码"; 
countdown = 60; 
} else { 
val.setAttribute("disabled", true); 
val.value="重新发送(" + countdown + ")"; 
countdown--; 
} 
setTimeout(function() { 
settime(val) 
},1000) 
} 
</script> 
</body> 
</html>

例子3:点击按钮后,60秒倒计时后才能继续可以点击,按钮上还能显示倒计时

预想的效果图:

js代码实现点击按钮出现60秒倒计时

这是微信公众平台上的代码

function E() {
var e = $("#mobile"), t = (new Date).getTime(), n = Math.floor((t - b) / 1e3);
g && clearTimeout(g), n >= 60 ? (e.prop("readonly", !1), y = !0, $("#sendmobile").html("发送验证码").attr("disabled", !1).removeClass("btn_disabled")) : (e.prop("readonly", !0), y = !1, $("#sendmobile").attr("disabled", !0).addClass("btn_disabled").html("%s秒后可重发".sprintf(60 - n)), g = setTimeout(E, 1e3));
}
function S() {
function e() {
if (!y) return;
var e = $.trim(n.val());
l.mobile(e) ? t.attr("disabled", !1).removeClass("btn_disabled") : t.attr("disabled", !0).addClass("btn_disabled");
}
var t = $("#sendmobile"), n = $("#mobile");
n.keyup(e).blur(e), e(), t.click(function() {
var e;
t.attr("disabled") !== "disabled" && (e = "+86" + $.trim(n.val()), b = (new Date).getTime(), E(), o.post({
url: w ? "/cgi-bin/formbyskey" : "/acct/formbyticket",
data: {
form: "mobile",
action: "set",
f: "json",
mobile: e
},
mask: !1
}, function(e) {
var t = e.BaseResp.Ret;
if (t == 0) u.suc("验证码已经发送"); else {
switch (t) {
case -13:
u.err("登录超时,请重新登录");
break;
case -35:
u.err("该手机已经登记过2次,请使用别的手机号进行用户信息登记");
break;
default:
u.err("验证码发送失败");
}
b = 0;
}
}));
});
}

这段代码小编就是不知道怎么才能调用到自己的代码上来,经过高人指点有了一些头寻。

高人的解题思路:如果严格的话,这个还要结合后台获取时间的,要不然别人刷新一下就行了。
                            如果不严格,用个cookie也可以。

<script src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
<script src="http://yukon12345.com/yukon12345.com/js/jquery.cookie.js"></script>
<script>
 time1=$.cookie("time1")||60;
 time2=$.cookie("time2")||60;
 dis1=$.cookie("dis1")
 dis2=$.cookie("dis2")
 function countDown($obj){

 var time;
 if($obj.attr("id")=="b1")
 {
 time=--time1;
 $.cookie("time1",time,{"expires":1});
 if(time<=0){
 time1=60;
 $obj[0].disabled=!$obj[0].disabled
 clearInterval(inter1)
 $obj.text("点击发送")
 $.cookie("dis1","")
 return
 }
 }
 if($obj.attr("id")=="b2")
 { time=--time2;
 $.cookie("time2",time,{"expires":1});
 if(time<=0){
 time1=60;
 $obj[0].disabled=!$obj[0].disabled
 clearInterval(inter2)
 $obj.text("点击发送")
 $.cookie("dis2","")
 return
 }
 }

 $obj.text(time+"秒后重新发送")

 }

 $(function(){
 if(dis1="dis"){
 $("#b1")[0].disabled='disabled'
 inter1=setInterval(function(){countDown($("#b1"))},1000)
 }
 if(dis2="dis"){
 $("#b2")[0].disabled='disabled'
 inter2=setInterval(function(){countDown($("#b2"))},1000)
 }
$(".cd").bind("click",function(){
 $this=$(this);
 //没有被禁用时禁用并执行倒计时
 if(!$this[0].disabled){
 $this[0].disabled='disabled';
 if($this.attr("id")=="b1"){
 $.cookie("dis1","dis",{"expires":1})
 inter1=setInterval(function(){countDown($this)},1000)
 }
 if($this.attr("id")=="b2"){
 $.cookie("dis2","dis",{"expires":1})
 inter2=setInterval(function(){countDown($this)},1000)
 }

 }
})

})
</script>

<button id="b1" class="cd" >点击发送</button><br>
<button id="b2" class="cd" >点击发送</button><br>

更多关于倒计时的文章请查看专题: 《倒计时功能》

大家通过这三个例子讲解有没有点思路了,那就动手实现一下吧,希望对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
浅谈Javascript面向对象编程
Nov 15 Javascript
基于jquery的放大镜效果
May 30 Javascript
jQuery.extend()的实现方式详解及实例
Jun 29 Javascript
JS清除IE浏览器缓存的方法
Jul 26 Javascript
JS之Date对象和获取系统当前时间详解
Jan 13 Javascript
jquery对象和DOM对象的任意相互转换
Feb 21 Javascript
Vue.js每天必学之组件与组件间的通信
Sep 08 Javascript
JS简单获取当前日期和农历日期的方法
Apr 17 Javascript
详解Node.js中exports和module.exports的区别
Apr 19 Javascript
Vue+Vux项目实践完整代码
Nov 30 Javascript
js实时监控文本框输入字数的实例代码
Jan 18 Javascript
小程序自定义单页面、全局导航栏的实现代码
Mar 15 Javascript
js实现无缝滚动特效
Dec 20 #Javascript
基于JavaScript实现动态创建表格和增加表格行数
Dec 20 #Javascript
原生js页面滚动延迟加载图片
Dec 20 #Javascript
javascript实现的网站访问量统计代码
Dec 20 #Javascript
js实现n秒倒计时后才可以点击的效果
Dec 20 #Javascript
图解js图片轮播效果
Dec 20 #Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记6)
Dec 20 #Javascript
You might like
全国FM电台频率大全 - 14 江西省
2020/03/11 无线电
PHP下利用shell后台运行PHP脚本,并获取该脚本的Process ID的代码
2011/09/19 PHP
PHP使用SOAP扩展实现WebService的方法
2016/04/01 PHP
浅谈PHP命令执行php文件需要注意的问题
2016/12/16 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
javascript学习之闭包分析
2010/12/02 Javascript
JavaScript闭包 懂不懂由你反正我是懂了
2011/10/21 Javascript
20款非常优秀的 jQuery 工具提示插件 推荐
2012/07/15 Javascript
js左右弹性滚动对联广告代码分享
2014/02/19 Javascript
js检测网络是否具体连接功能的代码
2014/05/23 Javascript
字段太多jquey快速清空表单内容方法
2014/08/21 Javascript
jQuery延迟加载图片插件Lazy Load使用指南
2015/03/25 Javascript
JS实现随机乱撞彩色圆球特效的方法
2015/05/05 Javascript
AngularJS学习笔记之ng-options指令
2015/06/16 Javascript
纯JavaScript代码实现文本比较工具
2016/02/17 Javascript
深入理解requestAnimationFrame的动画循环
2016/09/20 Javascript
js获取浏览器和屏幕的各种宽度高度
2017/02/22 Javascript
微信小程序实战之登录页面制作(5)
2020/03/30 Javascript
Vue.Draggable实现拖拽效果
2020/07/29 Javascript
iView框架问题整理小结
2018/10/16 Javascript
Vue父组件如何获取子组件中的变量
2019/07/24 Javascript
原生js实现文件上传、下载、封装等实例方法
2020/01/05 Javascript
[49:29]LGD vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python使用numpy实现BP神经网络
2018/03/10 Python
深入分析python中整型不会溢出问题
2018/06/18 Python
PyQt5实现简单数据标注工具
2019/03/18 Python
Pytorch实现神经网络的分类方式
2020/01/08 Python
python实现图片横向和纵向拼接
2020/03/05 Python
序列化Python对象的方法
2020/08/01 Python
css 如何让背景图片拉伸填充避免重复显示
2013/07/11 HTML / CSS
Canal官网:巴西女性时尚品牌
2019/10/16 全球购物
什么是数据库锁?Oracle中都有哪些类型的锁?
2015/08/21 面试题
运动会邀请函范文
2014/02/06 职场文书
工会工作个人总结
2015/03/03 职场文书
JavaScript 原型与原型链详情
2021/11/02 Javascript
TV动画「神渣☆爱豆」公开第一弹主视觉图
2022/03/21 日漫