js实现发送验证码倒计时效果

时间:2021-11-01 09:55:24
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#btnyzm {
background: #31BCFF;
color: #fff;
font-size: 14px;
padding: 0;
line-height: 43px;
border-radius: 0;
border: 0;
width: 50%;
}
.btn_com:disabled {
background-color: #999999 !important;
}
</style>
</head>
<body>
<input type="button" class="btn_com" id="btnyzm" 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("btnyzm").onclick=function(){time(this);} </script> </body>
</html>

效果实现图

js实现发送验证码倒计时效果

js实现发送验证码倒计时效果js实现发送验证码倒计时效果

补充重点:

实现过程中发现pc和安卓手机上完美显示,但是iphone上却毫无反应,甚至没有任何波澜。(或者想告诉我它是多么的高冷?)

定位代码,发现问题出现在时间处理的方式上:

为了比较两个时间点的大小和控制距离,我用new Date().getTime()来获取毫秒数,比较毫秒数。

2012-2-22 06:23 这是我得到的时间格式,理所当然

new Date("2012-2-22 06:23 ").getTime();这样得到就是所指定时间的毫秒数,完美!

嗯,在pc上和安卓手机上一切正常,但是iphone上告诉我-----invalid Date

new Date("2012-2-22 06:23 ")返回的是invalid Date

难道是不支持这种日期格式?于是我就改为new Date("2012/2/22 06:23 "),

可以,很强。返回了正确的对象。

于是我试着这样   new Date("2012","2","22","06","23"),ok,没问题,返回了正确的对象。

这样 new Date(2012/2/22),ok,没问题,返回了丨

js实现发送验证码倒计时效果