包含javascript啟動計時器的詞條

本文目錄一覽：

• 1、用javascript寫一個計時器程序，有啟動暫停和複位
• 2、怎樣用javascript做一個計時器
• 3、JavaScript怎樣實現打開頁面自動開始倒計時？？
• 4、JavaScript 簡單 計時器運用，實現電子時鐘自動走動的效果，按鈕控制啟止？
• 5、用JS實現計時器功能
• 6、JavaScript定時器取消後怎樣重新啟動？？

用javascript寫一個計時器程序，有啟動暫停和複位

#html:

input type=”button” value=”啟動” id=”btnStart” /

input type=”button” value=”複位” id=”btnReset” /

label id=”lblTime”0:0:0:0/label

#javascript:

window.onload = function () {

    var start = document.getElementById(“btnStart”);

    var reset = document.getElementById(“btnReset”);

    var time = document.getElementById(“lblTime”);

    var h = 0, m = 0, s = 0, ms = 0, t;

    //開始計時

    start.onclick = function () {

        bvalue = start.value;

        if (bvalue == “啟動”) {

            t = window.setInterval(function () {

                if (ms ==  100) {

                    s += 1;

                    ms = 0;

                }

                if (s ==  60) {

                    m += 1;

                    s = 0;

                }

                if (m ==  60) {

                    h += 1;

                    m = 0;

                }

                time.textContent = h + “:” + m + “:” + s + “:” + ms;

                ms++;

            }, 10);

            start.value = “暫停”;

        }

        else {

            window.clearInterval(t);

            start.value = “啟動”;

        }

    }

    //複位

    reset.onclick = function () {

        window.clearInterval(t);

        time.textContent = 0 + “:” + 0 + “:” + 0 + “:” + 0;

    }

}

怎樣用javascript做一個計時器

計時器, 在生活當中也是用得頻繁的功能, 比如鍛煉身體, 跑步比賽等等相關的活動. 我們用Javascript來完成一個計時器.

計時器, 主要就是對時間的一個邏輯處理, 比如60秒等於1分鐘, 60分鐘等於一個小時, 我們這裡只做到小時的處理. 就這麼一個簡單的邏輯, 然後動態的顯示在一個Input裡面.

那現在我們來完成這個界面

label計時:/label

input type=”text” name=”” id=”timer”/

button onclick=”pause(this)” id=”pause” state=”on”暫停/button

button onclick=”restart()”重新開始/button

給標籤元素一個ID是為了獲取其中的標籤, 然後加入了兩個點擊事件, 計數器的暫停, 和重新開始事件.

首先我們來完成開始計時的處理, 開始計時主要還是是用了setInterval的方法, 其中每隔1秒執行一次方法,

這樣我們就可以對時間做處理, 就像開頭所說60秒等於1分鐘…, 所以這裡就需要用判斷來處理, 最後就將其中的得到的秒,分,時顯示到輸入框里.

var ele_timer = document.getElementById(“timer”);

var n_sec = 0; //秒

var n_min = 0; //分

var n_hour = 0; //時

//60秒 === 1分

//60分 === 1小時

function timer() {

return setInterval(function () {

var str_sec = n_sec;

var str_min = n_min;

var str_hour = n_hour;

if ( n_sec 10) {

str_sec = “0” + n_sec;

}

if ( n_min 10 ) {

str_min = “0” + n_min;

}

if ( n_hour 10 ) {

str_hour = “0” + n_hour;

}

var time = str_hour + “:” + str_min + “:” + str_sec;

ele_timer.value = time;

n_sec++;

if (n_sec 59){

n_sec = 0;

n_min++;

}

if (n_min 59) {

n_sec = 0;

n_hour++;

}

}, 1000);

}

var n_timer = timer();

我們用timer方法包裝setInterval方法是為了,後面暫停和重新開始做處理.

用戶點擊了暫停, 計時器就停止計時, 用戶繼續點擊這個按鈕, 計時器繼續計時. 所以這裡有一個狀態需要控制,這個狀態我們給這個按鈕一個屬性.

//暫停和繼續

function pause(self) {

var state = self.getAttribute(“state”);

if (state === “on”) {

clearInterval(n_timer);

self.textContent = “繼續”;

self.setAttribute(“state”, “off”);

} else {

n_timer = timer();

self.textContent = “暫停”;

self.setAttribute(“state”, “on”);

}

}

最後我們來看一下重新開始, 重新開始事件就更加簡單了. 將計數器清0, 然後改變暫停按鈕初始狀態.

function restart() {

clearInterval(n_timer);

n_sec = 0;

n_min = 0;

n_hour = 0;

n_timer = timer();

var ele_pause = document.getElementById(“pause”);

ele_pause.textContent = “暫停”;

ele_pause.setAttribute(“state”, “on”);

}

這樣就完成了計時的功能.效果如下

JavaScript怎樣實現打開頁面自動開始倒計時？？

html

head

meta http-equiv=”Content-Type” content=”text/html” charset=”gb2312″ /

titlejavascript實現的倒計時時鐘/title

script language=”javascript”

window.onload = function ()

{

var oCountDown = document.getElementById(“countdown”);

var aInput = oCountDown.getElementsByTagName(“input”)[0];

var timer = null;

aInput.onclick = function ()

{

this.className == “” ? (timer = setInterval(updateTime, 1000), updateTime()) : (clearInterval(timer));

this.className = this.className == ” ? “cancel” : ”;

};

function format(a)

{

return a.toString().replace(/^(\d)$/,’0$1′);

}

function updateTime ()

{

var aSpan = oCountDown.getElementsByTagName(“span”);

var oRemain = aSpan[0].innerHTML.replace(/^0/,”) * 60 + parseInt(aSpan[1].innerHTML.replace(/^0/,”));

if(oRemain = 0)

{

clearInterval(timer);

return;

}

oRemain–;

aSpan[0].innerHTML = format(parseInt(oRemain / 60));

oRemain %= 60;

aSpan[1].innerHTML = format(parseInt(oRemain));

}

// 加上此句即可。

aInput.click();

}

/script

/head

body

div align=”center” id=”countdown”

span02/span分鐘span00/span秒

br

input type=”button” value=”開始” /

/div

/body

/html

JavaScript 簡單 計時器運用，實現電子時鐘自動走動的效果，按鈕控制啟止？

htmlheadscript type=”text/javascript”function startTime(){var today=new Date()var h=today.getHours()var m=today.getMinutes()var s=today.getSeconds()// add a zero in front of numbers10m=checkTime(m)s=checkTime(s)document.getElementById(‘txt’).innerHTML=h+”:”+m+”:”+st=setTimeout(‘startTime()’,500)} function checkTime(i){if (i10) {i=”0″ + i} return i}/script/head body onload=”startTime()”div id=”txt”/div/body/html

用JS實現計時器功能

腳本說明:

第一步:把如下代碼加入head區域中

SCRIPT language=javascript

!–

function generate(form){for(var q=0;q12;q++){if(document.me.m.options[document.me.m.selectedIndex].value==q){var m2=q+1

}var txt=’!– 分三步完成全部腳本:\r\n\r\n’

+’ 1. 將第一部分粘貼到HTML的HEAD區\r\n’

+’ 2. 將OnLoad事件加入BODY標籤內\r\n’

+’ 3. 將最後一部分代碼加入BODY區 –\r\n\r\n’

+’!– 第一步: 將如下代碼粘貼到HTML的HEAD區–\r\n\r\n’

+’HEAD\r\n\r\nSCRIPT LANGUAGE=”JavaScript”\r\n\r\n’

+’!– Begin\r\n’

+’var Temp2;\n’

+’var timerID = null;\n’

+’var timerRunning = false;\n’

+’function arry() {\n’

+’this.length = 12;\n’

+’this[0] = 31;\n’

+’this[1] = 28;\n’

+’this[2] = 31;\n’

+’this[3] = 30;\n’

+’this[4] = 31;\n’

+’this[5] = 30;\n’

+’this[6] = 31;\n’

+’this[7] = 31;\n’

+’this[8] = 30;\n’

+’this[9] = 31;\n’

+’this[10] = 30;\n’

+’this[11] = 31;\n’

+’}\n’

+’var date = new arry();\n’

+’\n’

+’function stopclock() {\n’

+’if(timerRunning)\n’

+’clearTimeout(timerID);\n’

+’timerRunning = false;\n’

+’}\n’

+’\n’

+’function startclock() {\n’

+’stopclock();\n’

+’showtime();\n’

+’}\n’

+’\n’

+’function showtime() {\n’

+’now = new Date();\n’

+’var CurMonth = now.getMonth();\n’

+’var CurDate = now.getDate();\n’

+’var CurYear = now.getFullYear();\n’

+’now = null;\n’

+’if (‘+document.me.d.options[document.me.d.selectedIndex].value+’ CurDate) {\n’

+’CurDate -= date[CurMonth]; CurMonth++;\n’

+’}\n’

+’if (‘+document.me.m.options[document.me.m.selectedIndex].value+’ CurMonth) {\n’

+’CurMonth -= 12; CurYear++;\n’

+’}\n’

+’\n’

+’var Yearleft = ‘+document.me.y.options[document.me.y.selectedIndex].value+’ – CurYear;\n’

+’var Monthleft = ‘+document.me.m.options[document.me.m.selectedIndex].value+’ – CurMonth;\n’

+’var Dateleft = ‘+document.me.d.options[document.me.d.selectedIndex].value+’ – CurDate;\n’

+’\n’

+’document.dateform.a.value = Yearleft;\n’

+’document.dateform.b.value = Monthleft;\n’

+’document.dateform.c.value = Dateleft;\n’

+’\n’

+’timerID = setTimeout(“showtime()”,1000);\n’

+’timerRunning = true;\n’

+’}\n’

+’/\/ End –\r\n\/script\r\n’

+’\/H’+’EAD\r\n\r\n’

+’!– 第二步：將OnLoad事件加入BODY標籤內 –\r\n\r\n’

+’BO’+’DY Onload=”startclock()”\r\n\r\n’

+’!– 第三步：將最後一部分代碼加入BODY區 –\r\n\r\n’

+’form name=dateform距離’

+m2+’/’+document.me.d.options[document.me.d.selectedIndex].value+’/’

+document.me.y.options[document.me.y.selectedIndex].value

+’還有\n’

+’input type=text name=a size=2 value=””年\n’

+’input type=text name=b size=2 value=””月\n’

+’input type=text name=c size=2 value=””天\n’

+’/fo’+’rm\r\n\r\n’

+”+’!– 代碼長度: 1.95 KB –‘+”

;}document.mail.source.value=txt;document.mail.source2.value=txt;}

//–

/SCRIPT

第二步:把如下代碼加入區域中：

center

table border=5 bordercolor=blue borderlight=green

trtd align=centerfont size=5 color=red face=”Arial, Helvetica, sans-serif”strong下面框中為腳本顯示區/strong/font/td/tr

trtd align=centerform name=me pselect name=m size=1 option value=0January /option option value=1February /option option value=2March /option option value=3April /option option value=4May /option option value=5June /option option value=6July /option option value=7August /option option value=8September /option option value=9October /option option value=10November /option option value=11December /option /select select name=d size=1 option value=11 /option option value=22 /option option value=33 /option option value=44 /option option value=55 /option option value=66 /option option value=77 /option option value=88 /option option value=99 /option option value=1010 /option option value=1111 /option option value=1212 /option option value=1313 /option option value=1414 /option option value=1515 /option option value=1616 /option option value=1717 /option option value=1818 /option option value=1919 /option option value=2020 /option option value=2121 /option option value=2222 /option option value=2323 /option option value=2424 /option option value=2525 /option option value=2626 /option option value=2727 /option option value=2828 /option option value=2929 /option option value=3030 /option option value=3131 /option /selectselect name=y size=1 option value=19991999 /option option value=20002000 /option option value=20012001 /option option value=20022002 /option option value=20032003 /option option value=20042004 /option option value=20052005 /option option value=20062006 /option option value=20072007 /option option value=20082008 /option option value=20092009 /option /selectbr input type=button onclick=generate() value=生成代碼 class=yk9input type=button value=返回 onClick=history.go(-1) name=button class=yk9p/p/formform name=mail input type=hidden name=scriptname value=”Countdown Creator”input type=hidden name=source2 valuetable bgcolor=dedfdf border=1 cellpadding=1 width=396 tr td align=center height=218textarea name=source rows=12 cols=55 class=yk9/textareabr br /td td /td /tr /table/form/td/tr/table

JavaScript定時器取消後怎樣重新啟動？？

首先給函數個名字

t=setInterval(function self(){

然後

aImg[n].onmouseout=function(){

t=setInterval(self,500)

};

當然你也可以使用arguments.callee, 或者以下寫法

function action()

{

…

t=setInterval(action,500)

…

}

t=setInterval(action,500)

總而言之都是要獲取到函數本身