<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>time remaining</title> </head> <!--html部分非常easy，须要被javascript控制的行内文本与提交button都被编上ID-->
<body> <div>F5或者ctrl+F5刷新页面重新计时（设定时间10分钟）</div> <div class="leftTime">剩余时间：</br></div> <div class="timeShow"></span><span id="timer"></span></div> <div id="btnClick"> <div><button id="stop" class="comstyle">暂停</button></div> <div><button id="restart" class="comstyle">开启</button></div> <div><button id="nextOne">下一个人</button></div> </div> </body> <style> .leftTime { width: 1000px; margin: 0 auto; font-size: 150px; }
.timeShow { font-size: 300px; border: solid 1px red; margin: 0 auto; text-align: center; height:400px; } #btnClick div{ float:right; } #btnClick button{ margin-right:10px; float:right; height:40px; } </style>
</html> <script> /*主函数要使用的函数，进行声明*/ var clock = new clock(); /*指向计时器的指针*/ var timer; window.onload = function () { /*主函数就在每1000毫秒调用1次clock函数中的move方法就可以*/ timer = setInterval("clock.move()", 1000); } var clickB=document.getElementById('stop'); clickB.addEventListener("click",function(){ clearInterval(timer)
}) var restartB=document.getElementById('restart'); restartB.addEventListener("click",function(){ timer = setInterval("clock.move()", 1000) }) var nextOneB=document.getElementById('nextOne'); nextOneB.addEventListener("click",function(){ window.location.reload(); }) function clock() { /*s是clock()中的变量，非var那种全局变量，代表剩余秒数*/ // 设定时间10分钟 this.s = 600; this.move = function () { /*输出前先调用exchange函数进行秒到分秒的转换，由于exchange并不是在主函数window.onload使用，因此不须要进行声明*/ document.getElementById("timer").innerHTML = exchange(this.s); /*每被调用一次。剩余秒数就自减*/ this.s = this.s - 1; /*假设时间耗尽，那么。弹窗，使button不可用，停止不停调用clock函数中的move()*/ if (this.s < 0) { alert("时间到"); document.getElementById("go").disabled = true; clearTimeout(timer); } } } function exchange(time) { /*javascript的除法是浮点除法。必须使用Math.floor取其整数部分*/ this.m = Math.floor(time / 60); this.s = Math.floor((time - this.m * 60) % 60); /*存在取余运算*/ this.ms = (time % 1000);
this.text = this.m + "分" + this.s + "秒" ; /*传过来的形式參数time不要使用this，而其余在本函数使用的变量则必须使用this*/ return this.text; } </script> 标签：function,move,clock,重置,timer,倒计时,HTML,time,var From： https://www.cnblogs.com/FredMac/p/17401943.html