JS 倒计时

最新推荐文章于 2024-05-22 01:53:01 发布

kinglot

最新推荐文章于 2024-05-22 01:53:01 发布

阅读量122

点赞数

分类专栏：软件开发文章标签： JavaScript 编程 HTML ViewUI

软件开发专栏收录该内容

5 篇文章 1 订阅

订阅专栏

在一些网站须知或注册界面常用到一个倒计时按钮,限制用户在界面上暂停N秒,以便达到使用户阅读条款的目的,下面谈谈具体实现,

我们知道在javascript中有2个方法来控制函数的执行,其中包括setTimeOut(func,second)以及setInterVal(func,second).

setTimeout(function,second)是指等待多少秒执行function函数,周期:一次.

setInterval(function,second)是指搁多少秒执行一次function函数,周期:如果不销毁则,每second秒执行一次.

下面就以按钮倒计时的实例对比以上两个函数:

(一)利用setTimeout实现按钮倒计时

<html>
<head>
<script type="text/javascript">
var btn_num=5;
function Submit_timer()
{
   if(btn_num==0)
   {
     document.getElementById("Submit1").disabled=false;
     document.getElementById("Submit1").value="我同意以上条款"
   return;
   }
   btn_num=btn_num-1;
    document.getElementById("Submit1").value="我同意以上条款("+btn_num+"秒)";
   setTimeout("Submit_timer()",1000) ;
}
</script>
</head>
<body οnlοad="Submit_timer()" >
<input type="button" id="Submit1" value="" disabled="disabled" /></body>
</html>

(二)利用setIntervar实现按钮倒计时

<html>
<head>
<script type="text/javascript">
var btn_num=5;

var t = setInterval("Submit_timer()",1000);
function Submit_timer()
{
   if(btn_num==0)
   {
     document.getElementById("Submit1").disabled=false;
     document.getElementById("Submit1").value="我同意以上条款"

     clearInterval(t);
   return;
   }
   btn_num=btn_num-1;
    document.getElementById("Submit1").value="我同意以上条款("+btn_num+"秒)";
}

function setNum()

{

setInterVal(Submit_timer(),1000);

}
</script>
</head>
<body >
<input type="button" id="Submit1" value="" disabled="disabled" /></body>
</html>

OK,这些其实都是基础,但是大的项目就是项目经验加基础编程做出来的,一步一步前进.