JavaScript分秒倒計時器實現(xiàn)方法

更新時間：2015年02月02日 11:11:54 作者：yongh701

這篇文章主要介紹了JavaScript分秒倒計時器實現(xiàn)方法,可實現(xiàn)按照毫秒倒計時的效果,具有一定參考借鑒價值,需要的朋友可以參考下

本文實例講述了JavaScript分秒倒計時器實現(xiàn)方法。分享給大家供大家參考。具體分析如下：

一、基本目標(biāo)

在JavaScript設(shè)計一個分秒倒計時器，一旦時間完成使按鈕變成不可點擊狀態(tài)

具體效果如下圖，為了說明問題，調(diào)成每50毫秒也就是每0.05跳一次表，

真正使用的時候，把window.onload=function(){...}中的setInterval("clock.move()",50);從50調(diào)成1000即可。

在時間用完之前，按鈕還是可以點擊的。

時間用完之后，按鈕就不能點擊了。

二、制作過程

復(fù)制代碼代碼如下:

<!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部分很簡單，需要被javascript控制的行內(nèi)文本與提交按鈕都被編上ID-->

<body>  

剩余時間：<span id="timer"></span>  

<input id="go" type="submit" value="go" />  

</body>  

</html>  

<script>  

/*主函數(shù)要使用的函數(shù)，進(jìn)行聲明*/  

var clock=new clock();  

/*指向計時器的指針*/  

var timer;  

window.onload=function(){  

    /*主函數(shù)就在每50秒調(diào)用1次clock函數(shù)中的move方法即可*/  

    timer=setInterval("clock.move()",50);  

    }  

function clock(){  

    /*s是clock()中的變量，非var那種全局變量，代表剩余秒數(shù)*/  

    this.s=140;  

    this.move=function(){  

        /*輸出前先調(diào)用exchange函數(shù)進(jìn)行秒到分秒的轉(zhuǎn)換，因為exchange并非在主函數(shù)window.onload使用，因此不需要進(jìn)行聲明*/  

        document.getElementById("timer").innerHTML=exchange(this.s);  

        /*每被調(diào)用一次，剩余秒數(shù)就自減*/  

        this.s=this.s-1;  

        /*如果時間耗盡，那么，彈窗，使按鈕不可用，停止不停調(diào)用clock函數(shù)中的move()*/  

        if(this.s<0){  

            alert("時間到");  

            document.getElementById("go").disabled=true;  

            clearTimeout(timer);  

            }  

        }  

    }  

function exchange(time){  

    /*javascript的除法是浮點除法，必須使用Math.floor取其整數(shù)部分*/  

        this.m=Math.floor(time/60);  

        /*存在取余運算*/  

        this.s=(time%60);  

        this.text=this.m+"分"+this.s+"秒";  

        /*傳過來的形式參數(shù)time不要使用this，而其余在本函數(shù)使用的變量則必須使用this*/  

        return this.text;  

}  

</script>