<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8" />
<title>js实现倒计时60秒的简单代码(推荐)</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 = 5
} else {
val.setAttribute("disabled", true)
val.value="重新发送(" + countdown + ")"
countdown--
setTimeout(function() {
settime(val)
},1000)
}
}
</script>
</body>
</html>
JavaScript简介
JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
JavaScript 课外书
如果 JavaScript 教程学习完毕，并且需要更深入地学习这门语言，《JavaScript 高级教程》绝对是您最好的选择。本教程从 JavaScript 的历史开始讲起，直到当前它对 XML 和 Web 服务的支持。
将学习到如何扩展该语言，以使它适应特殊的需求。
还将学到如何使用 JavaScript 创建无缝的客户机 - 服务器通信。
前言之前跟大家分享了关于
Android
原生实现验证码倒计时，地址是这里，现在公司使用
Ionic
开发的
App
也要实现类似的功能，现在也记录下来，供大家参考：
效果图：
正文
首先介绍下与本文相关的概念
$interval
$interval
是
window.setInterval
的
Angular
包装形式，函数如果在没有被取消的时候会无限执行。（取消使用
cancel(promise)
）
用法：
$interval(fn,delay,[count],[invokeApply],[Pass])
参数说明：
fn
:
无限执行的函数
必须参数，必传
delay
:
每次调用的间隔毫秒数值
必须参数，必传
count
:
循环次数的数值，如果没设置，则无限制循环
非必须参数，可不传
invokeApply
:
如果设置为false，则避开脏值检查，否则将调用$apply
非必须参数，可不传
Pass
:
函数的附加参数
非必须参数，可不传
方法：
1、cancel(promise)
promise：$interval函数的返回值。
具体实现
$scope.description
=
"获取验证码"
var
timerHandler
=
null
/**
*
倒计时
*
@param
time
控制循环次数
*/
var
countDown
=
function
(second,time)
{
timerHandler
=
$interval(function
()
{
if
(second
<=
0)
{
$interval.cancel(timerHandler)
second
=
59
$scope.description
=
"获取验证码"
}
else
{
$scope.description
=
second
+
"s
后可重发"
second--
}
},
1000,
time)
}
调用
countDown(59,60)
最后别忘了注入
$interval
。
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
<!DOCTYPE HTML><html>
<head>
<meta charset="UTF-8" />
<title>pro.html</title>
<style type="text/css">
.checkCode {
cursor: pointer
border: 1px solid black
text-align: center
line-height: 26px
width: 115px
height: 35px
}
</style>
<script type="text/javascript">
var sleep = 30, interval = null
window.onload = function ()
{
var btn = document.getElementById ('btn')
btn.onclick = function ()
{
if (!interval)
{
this.style.backgroundColor = 'rgb(243, 182, 182)'
this.disabled = "disabled"
this.style.cursor = "wait"
this.value = "重新发送 (" + sleep-- + ")"
interval = setInterval (function ()
{
if (sleep == 0)
{
if (!!interval)
{
clearInterval (interval)
interval = null
sleep = 30
btn.style.cursor = "pointer"
btn.removeAttribute ('disabled')
btn.value = "免费获取验证码"
btn.style.backgroundColor = ''
}
return false
}
btn.value = "重新发送 (" + sleep-- + ")"
}, 1000)
}
}
}
</script>
</head>
<body>
<input class="checkCode" type="button" id="btn" value="免费获取验证码" />
</body>
</html>
