一个简单的倒计时函数
今天写app的注册页面, 牵扯到了发送验证吗的间隔时间, 就要写一个倒计时函数, 倒计时期间禁用发送验证码的按钮, 页面显示倒计时秒数
APICloud的方法
// 倒计时
function countDown() {
var n = 60;
var inta = setInterval(function(){
// 设置.time的文本
$api.text($api.dom('.time'), n);
// 显示倒计时标签
$api.css($api.dom('p'), 'display:block');
// 禁用发送验证码按钮
$api.attr($api.dom('.hqyzm'), 'disabled', 'true');
// 修改发送验证码按钮颜色
$api.css($api.dom('.hqyzm'), 'border: 1px solid #d0d0d0;color: #9d9d9d;');
// 减去倒计时
n--;
if (n < -1) {
// 清除定时器
clearInterval(inta);
// 倒计时完毕后修改按钮颜色
iptChange();
// 隐藏倒计时标签
$api.css($api.dom('p'), 'display:none');
// 把倒计时标签清空
$api.text($api.dom('.time'), '');
// 初始化时间
n = 60;
}
},1000)
}
可以设置页面中的倒计时
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<input id="ipt" type="text" placeholder="你要设置多少秒倒计时？" name="">
<button onclick="countDown()">开始</button>
<div id="time"></div>
<body>
<script type="text/javascript">
// 倒计时
function countDown() {
var n = document.getElementById('ipt').value;
var inta = setInterval(function(){
document.getElementById('time').innerHTML = n;
// 减去倒计时
n--;
if (n < -1) {
// 清除定时器
clearInterval(inta);
// 初始化时间
n = document.getElementById('ipt').value;
}
},1000)
}
</script>
</body>
</html>
