我们经常会看到某些网站在注册的时候喜欢搞个按钮倒计时的效果,就是多少秒之后注册这个按钮才可以点击,其目的就是强迫你去看他的注册注意事项,这是一个很实用的效果;另外当我们进行在线考试的时候也必定会碰到答题倒计时的效果,这种倒计时效果是如何实现的呢?下面我们就用Js来实现一个倒计时效果,首先来看一下这个代码的效果图:
具体代码如下图:
<html > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Js实现倒计时效果</title> <script language="javascript"> //var timeLeft=90*60*1000;//这里设定的时间是90分钟 var timeLeft=6*1000;//这里设定的时间是6秒 function countTime(){ if(timeLeft==0){//这里就是时间到了之后应该执行的动作了,这里只是弹了一个警告框 alert("时间到!http://php.hhsy.cc/"); document.getElementById('ok').disabled=false; document.getElementById('ok').value='我同意(提交答卷)'; return; } var startMinutes=parseInt(timeLeft/(60*1000),10); var startSec=parseInt((timeLeft-startMinutes*60*1000)/1000); document.getElementById('show').innerHTML="剩余时间:"+startMinutes+"分钟"+startSec+"秒"; document.getElementById('ok').value=startSec+'秒'; timeLeft=timeLeft-1000; setTimeout('countTime()',1000); } </script> </head> <body onload="countTime()"> <div id="show"></div> <input type="button" id="ok" disabled value="" style="width:200px;" /> </body> </html>
以上只是个距离,有需要的朋友根据自己的实际情况稍作修改即可。