«

Js倒计时效果

时间:2024-1-19 17:09     作者:韩俊     分类: Javascript


我们经常会看到某些网站在注册的时候喜欢搞个按钮倒计时的效果,就是多少秒之后注册这个按钮才可以点击,其目的就是强迫你去看他的注册注意事项,这是一个很实用的效果;另外当我们进行在线考试的时候也必定会碰到答题倒计时的效果,这种倒计时效果是如何实现的呢?下面我们就用Js来实现一个倒计时效果,首先来看一下这个代码的效果图:

Js倒计时效果

具体代码如下图:

<html xmlns="http://www.maopiaopiao.com/javascript-function/38.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://www.maopiaopiao.com/");
        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>

以上只是个距离,有需要的朋友根据自己的实际情况稍作修改即可。

标签: javascript

热门推荐