本文目錄一覽：
用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做一個計時器
計時器, 在生活當中也是用得頻繁的功能, 比如鍛煉身體, 跑步比賽等等相關的活動. 我們用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計時器何時關閉
你用的是什麼計時器？
setTimeout(“function”,time) 還是 setInterval(“function”,time)
參數是一樣的，function是方法名，time是執行間隔的毫秒數
這2個都是計時用的
SetInterval會重複執行，setTimeout不會重複只執行一次。
如果要停止需要執行clearTimeout(對象) 清除已設置的setTimeout對象，clearInterval(對象) 清除已設置的setInterval對象。
用法大概如下：
var objTimout=window.setTimeout(function,5000);//5000毫秒=5秒，5秒後執行function方法，然後退出
window.clearTimeout(objTimout);//清除setTimeout設置的時間
或者
var objInterval=window.setInterval(function,5000);//每5秒執行一次function方法
window.clearInterval(objInterval);//清除setInterval對象設置的時間
希望能幫到你！
js中計時器返回數值
JS可以實現很多java代碼不易完成的功能。這裡學習一些js中的計時器事件。
JavaScript 一個設定的時間間隔之後來執行代碼，稱之為計時事件。
主要通過兩個方法來實現：
1.setInterval() – 間隔指定的毫秒數不停地執行指定的代碼。
2.setTimeout() – 暫停指定的毫秒數後執行指定的代碼
並且，這兩個方法都是window對象的方法。
首先，介紹setInterval()方法，該方法值得是間隔一定的毫秒數不停的執行指定的代碼。
語法：window.setInterval(”js代碼，函數等“，毫秒數);
實例1：每三秒彈出一個hello
setInterval(function(){alert(“Hello”)},3000);
實例2：顯示當前時間，通過按鈕實現時間的停止，開始
script type=”text/javascript”
var myVar;
function startTimer(){
/*setInterval() 間隔指定的毫秒數不停地執行指定的代碼*/
myVar=setInterval(function(){myTimer()},1000);
}
function myTimer()/* 定義一個得到本地時間的函數*/
{
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById(“demo”).innerHTML=t;
}
function stopTimer()
{/* clearInterval() 方法用於停止 setInterval() 方法執行的函數代碼*/
clearInterval(myVar);
}
/script
setTimeout() 方法
在html或jsp中
body
h4 id=”demo”/h4
input type=”button” onclick=”startTimer()” value=”開始”
input type=”button” onclick=”stopTimer()” value=”停止”
/body
對於setTimeout()方法，指的是指定的毫秒數後執行指定的代碼或方法。
語法：window.setTimeout(“javascript 函數”,毫秒數);
實例1：3秒鐘後彈出”hello“提示框
setTimeout(function(){alert(“Hello”)},3000);
實例2：三秒鐘後跳轉到前一個頁面
script type=”text/javascript”
setTimeout(function(){
window.history.back();
},3000);
/script
如何執行停止呢？
clearTimeout() 方法用於停止執行setTimeout()方法的函數代碼。這裡注意myVar必須是一個全局變量。實例如下：
var myVar;
function myFunction()
{
myVar=setTimeout(function(){alert(“Hello”)},3000);
}
function myStopFunction()
{
clearTimeout(myVar);
}
以上就把js計時器的基本功能簡要介紹了，具體的使用場景，想要深刻理解，只有到項目用到時方可有新的理會。
原創文章，作者：ILYI，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/147104.html
微信掃一掃 
支付寶掃一掃 