<!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 创建无缝的客户机 - 服务器通信。
清楚定时器有两种方式：
1、循环执行：
var timeid = window.setInterval（“方法名或方法”，“延时”）
window.clearInterval(timeid)
例如：
<script type="text/javascript">
$(document).ready(function(){
//循环执行，每隔1秒钟执行一次 1000
var t1=window.setInterval(refreshCount, 1000)
function refreshCount() {
console.log("ready")
}
//去掉定时器的方法
window.clearInterval(t1)
})
</script>
2、定时执行：当方法执行完成定时器停止(但是定时器还在,只不过没用了)
var tmid = window.setTimeout(“方法名或方法”, “延时”)
window.clearTimeout(tmid)
例如：
<script type="text/javascript">
$(document).ready(function(){
//定时执行，5秒后执行
var t1=window.setTimeout(refreshCount, 1000 * 5)
function refreshCount() {
console.log("ready")
}
//去掉定时器的方法
window.clearTimeout(t1)
})
</script>
当然，下面提供一个例子
原理
既然是倒计时，肯定是要涉及到时间日期的操作了。js 里可以用 new Date() 来创建各种格式的时间日期。要能够倒计时，我们需要设置一个起始时间以及一个终止时间，计算出这两段时间的差，然后通过循环调用，每隔 1 秒刷新一次就实现了。假设我们以当前电脑的时间作为起始时间，然后定死一个终止时间，由于起始时间一直在递增，而终止时间不变，那么通过递归后就是一个倒计时了。
实战
知道了大致实现思路后，你可以试着开始手写代码。我们定义一个函数，名为 counter 。首先获取当前时间，现在是北京时间 2019 年 12 月 3 日，16 时 12 分，倒计时 1 小时，那么终止时间是 2019 年 12 月 3 日，17 时 12分 。
function counter(){
var nowtime = new Date()
var endtime = new Date("2019/12/3,17:12:00")
var lefttime = parseInt((endtime.getTime() - nowtime.getTime()) / 1000)
}
lefttime 保存着两个时间的差值，getTime() 方法获取到时间戳，由于它是以 ms 为单位的，我们需要精确到秒就可以，所以除以 1000 就是以 s 为单位。
接着，我们可以将这个时间分别计算为 天，时，分，秒 了。代码如下
var d = parseInt(lefttime / (24*60*60))
var h = parseInt(lefttime / (60 * 60) % 24)
var m = parseInt(lefttime / 60 % 60)
var s = parseInt(lefttime % 60)
1 天 24 小时，1 小时 60 分钟，1 分钟 60 秒，稍微转换就能计算出上面几个变量的值。到了这里，有个小细节需要注意，如果是 10 以下的数我们要进行补零！。于是我们在写一个补零函数，名为 addZero .
function paddingZero(){
return i <10 ? "0" + i: i + ""}
好了，接下来对上面求得的 d,h,m,s 进行补零。
d = paddingZero(d)
h = paddingZero(h)
m = paddingZero(m)
s = paddingZero(s)
最后我们只需要利用 setTimeout 循环调用，每隔 1 s 刷新就可以了。
setTimeout(showtime, 1000)
判断当倒计时为 0 的时候，就显示 活动已结束 , 并且把函数 return 掉。完整例子如下
<html>
<body>
<p class="count"></p>
<script>
window.onload = function () {
countDown()
function addZero(i) {
return i <10 ? "0" + i: i + ""
}
function countDown() {
var nowtime = new Date()
var endtime = new Date("2019/03/16,17:57:00")
var lefttime = parseInt((endtime.getTime() - nowtime.getTime()) / 1000)
var d = parseInt(lefttime / (24*60*60))
var h = parseInt(lefttime / (60 * 60) % 24)
var m = parseInt(lefttime / 60 % 60)
var s = parseInt(lefttime % 60)
d = addZero(d)
h = addZero(h)
m = addZero(m)
s = addZero(s)
document.querySelector(".count").innerHTML = `活动倒计时 ${d}天 ${h} 时 ${m} 分 ${s} 秒`
if (lefttime <= 0) {
document.querySelector(".count").innerHTML = "活动已结束"
return
}
setTimeout(countDown, 1000)
}
} </script></body></html>
实现倒计时很容易，关键是你要求刷新页面，不能停止倒计时1、使用iframe，嵌入页面，父页上执行js操作，这样子页面刷新后会接着显示倒计时；
2、在后台实现，如使用java的timer类来实现倒计时，前台通过ajax获取倒计时结果，无论前端页面怎么刷新，不会停止倒计时
前端的好写，简单写下，仅供参考
<html>
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />
<title>无标题文档</title>
</head>
<body onLoad="startCount()" onUnload="fromClose()">
<iframe id="myFrame" src="innerPage.html" height="500" width="500"></iframe>
</body>
</html>
<script>
var timer
var count=10
function startCount(){
timer=window.setInterval("myTimeBack()",1000)
}
function myTimeBack(){
myFrame.document.getElementById("myInput").value=count
count=count-1
if(count==0)
count=10
}
function fromClose(){
clearInterval(timer)
}
</script>
//嵌入的页面innerPage.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<input type="text" value="" id="myInput" style="width:50">
<button onClick="refeshFrame()" style="width:80">refresh</button>
</body>
</html>
<script>
function refeshFrame(){
this.location.href=this.location.toString()
}
</script>
