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 相关文章推荐
Prototype Function对象 学习
Jul 12 Javascript
Javascript生成json的函数代码(可以用php的json_decode解码)
Jun 11 Javascript
使用javascript:将其它类型值转换成布尔类型值的解决方法详解
May 07 Javascript
JS正则验证邮箱的格式详细介绍
Nov 19 Javascript
JavaScript将当前时间转换成UTC标准时间的方法
Apr 06 Javascript
JQuery实现可直接编辑的表格
Apr 16 Javascript
jQuery实现定时读取分析xml文件的方法
Jul 16 Javascript
详解React-Router中Url参数改变页面不刷新的解决办法
May 08 Javascript
小程序点赞收藏功能的实现代码示例
Sep 07 Javascript
详解如何实现Element树形控件Tree在懒加载模式下的动态更新
Apr 25 Javascript
Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)
Sep 01 Javascript
Vue 根据条件判断van-tab的显示方式
Aug 03 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
PHP读取数据库并按照中文名称进行排序实现代码
2013/01/29 PHP
疯掉了,尽然有js写的操作系统
2007/04/23 Javascript
仿迅雷焦点广告效果(JQuery版)
2008/11/19 Javascript
一个页面元素appendchild追加到另一个页面元素的问题
2013/01/27 Javascript
你不知道的高性能JAVASCRIPT
2016/01/18 Javascript
Summernote实现图片上传功能的简单方法
2016/07/11 Javascript
jQuery Dialog 打开时自动聚焦的解决方法(两种方法)
2016/11/24 Javascript
BootstrapValidator超详细教程(推荐)
2016/12/07 Javascript
vue监听滚动事件实现滚动监听
2017/04/11 Javascript
关于axios不能使用Vue.use()浅析
2018/01/12 Javascript
vue中echarts3.0自适应的方法
2018/02/26 Javascript
在vue中v-bind使用三目运算符绑定class的实例
2018/09/29 Javascript
Vue自定义属性实例分析
2019/02/23 Javascript
浅谈webpack 四个核心概念之Entry
2019/06/12 Javascript
微信公众号平台接口开发 获取微信服务器IP地址方法解析
2019/08/14 Javascript
vue实现将一个数组内的相同数据进行合并
2019/11/07 Javascript
jQuery实现简易QQ聊天框
2020/02/10 jQuery
node.js通过Sequelize 连接MySQL的方法
2020/12/28 Javascript
python代码制作configure文件示例
2014/07/28 Python
Python通过OpenCV的findContours获取轮廓并切割实例
2018/01/05 Python
python中redis查看剩余过期时间及用正则通配符批量删除key的方法
2018/07/30 Python
python小程序实现刷票功能详解
2019/07/17 Python
CentOS7下安装python3.6.8的教程详解
2020/01/03 Python
解决Python 异常TypeError: cannot concatenate 'str' and 'int' objects
2020/04/08 Python
Python安装Bs4的多种方法
2020/11/28 Python
Boden美国官网:英伦原创时装品牌
2017/07/03 全球购物
美国最好的钓鱼、狩猎和划船装备商店:Bass Pro Shops
2018/12/02 全球购物
大龄毕业生求职别忘职业规划
2014/03/11 职场文书
竞选大学学委演讲稿
2014/09/13 职场文书
房地产公司财务总监岗位职责
2015/04/03 职场文书
2016秋季小学开学寄语
2015/12/03 职场文书
php引用传递
2021/04/01 PHP
解决go在函数退出后子协程的退出问题
2021/04/30 Golang
深入浅析python3 依赖倒置原则(示例代码)
2021/07/09 Python
python编程实现清理微信重复缓存文件
2021/11/01 Python
django项目、vue项目部署云服务器的详细过程
2022/07/23 Servers