60秒倒计时

JS倒计时与验证码按钮

最新推荐文章于 2021-07-17 15:16:49 发布

转载最新推荐文章于 2021-07-17 15:16:49 发布 · 138 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/ailingling/blog/495618

文章标签：

#python #javascript #ViewUI

本文介绍了一种使用JavaScript实现的倒计时效果及验证码按钮功能。倒计时功能适用于多种场景，如活动倒计时等；验证码按钮功能则实现了获取验证码后的倒计时重新发送机制。

2019独角兽企业重金招聘Python工程师标准>>>

<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>

//js倒计时

<html>
<title> 倒计时效果 </title>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<script language="JavaScript">
var TotalMinutes = 5;
var TotalMilliSeconds = 5*60*1000;

function takeCount()
{
//计数减一
TotalMilliSeconds -= 1000;
//计算时分秒
var hours = Math.floor( TotalMilliSeconds / ( 1000 * 60 * 60 )) % 24;
var minutes = Math.floor(TotalMilliSeconds / (1000 * 60)) % 60;
var seconds = Math.floor(TotalMilliSeconds / 1000) % 60;
//将时分秒插入到html中
document.getElementById("RemainH").innerHTML = hours;
document.getElementById("RemainM").innerHTML = minutes;
document.getElementById("RemainS").innerHTML = seconds;
}

window.onload = setInterval("takeCount();",1000);
</script>
</head>
<body>
<div id="CountMsg">
倒计时还有：
<strong id="RemainD"></strong><strong id="RemainH">XX</strong>时
<strong id="RemainM">XX</strong>分
<strong id="RemainS">XX</strong>秒
</div>
</body>
</html>