zoukankan      html  css  js  c++  java
  • JavaScipt实现倒计时方法总结

    JavaScript中提供了两种实现计时、延时的方法,分别如下:

    一、 t = setTimeout(“function()", millisecond) 与 clearTimeout(t) 方法配套使用。

    t = setTimeout(“function()", millisecond) 方法中,function()函数里定义想要定时调用的代码,millisecond参数代表想要延迟的计时时间,t 是函数返回的ID值。此函数仅根据时间周期调用function()函数一次。但是可以通过递归调用,实现多次循环计时。

    clearTimeout(t)函数可以清除setTimeout()函数的计时信息,停止计时。

    60秒倒计时代码如下:

    <!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=gb2312" />
    <title></title>
    </head>
    
    <body onload="CountTime()">
    <div id = "timeBar" style="font-size:22px;" align="center"></div> 
    
    <script type = "text/javascript" src = "CountTime.js"></script>
    </body>
    </html>
    time = 60;
    
    function CountTime()
    {
    	document.getElementById("timeBar").innerHTML = time;
    	time = time - 1;
    	if ( time == -1)
    	{
    		clearTimeout(t);
    	}
    	else
    	{
    		t = setTimeout("CountTime()",1000);
    	}
    	
    }

    二、t= setInterval(”function()“,millisecond)方法与setTimeout()使用方法类似,但是该函数是以设置的时间为周期,周期性的调用function()函数执行代码。

    clearInterval(t)方法是用来清除计时信息,终止计时程序。

    可实现60秒倒计时代码如下(Html代码共用第一部分):

    time = 60;
    function SetText()
    {
    	document.getElementById("timeBar").innerHTML = time;
    	time = time - 1;
    	if ( time == -1)
    	{
    		clearInterval(t);
    	}
    }
    function CountTime()
    {	
    		t = setInterval("SetText()",1000);
    }


    以上两种方法均可实现倒计时的功能。



  • 相关阅读:
    Android基础
    Android基础
    Java小项目——多线程弹球
    Java小项目——抽奖系统
    Java小项目——五子棋
    Java小项目——画板
    Java基础——swing登录界面
    Java基础——类的继承
    实验室资料说明
    20180919 百信、百度面试
  • 原文地址:https://www.cnblogs.com/pangblog/p/3324987.html
Copyright © 2011-2022 走看看