div?id="counter"/div
成都創(chuàng)新互聯(lián)公司是專(zhuān)業(yè)的雞西梨樹(shù)網(wǎng)站建設(shè)公司，雞西梨樹(shù)接單;提供成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作,網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專(zhuān)業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行雞西梨樹(shù)網(wǎng)站開(kāi)發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專(zhuān)業(yè)做搜索引擎喜愛(ài)的網(wǎng)站,專(zhuān)業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來(lái)合作!
script
var?counter?=?document.getElementById("counter");
function?count(){
var?time?=?50;
counter.innerHTML?=?time;
var?timer?=?setInterval(function(){
time--;
counter.innerHTML?=?time;
if(time==0){
alert("游戲結(jié)束");
clearInterval(timer);
}
},1000);
}
count();
/script
定義一個(gè)全局變量就可以了，這我寫(xiě)的，你可以看看
html
head
title秒表/title
script
var timeId;
var count = 0;
function go(){
timeId = setInterval(function(){
count += 1;
document.getElementById("seconds").innerText = count;
},1000);
}
function purse(){
clearInterval(timeId);
}
/script
/head
body style="text-align:center;" onLoad="go()"
秒表：span id="seconds" style="color:red;font-size:20px;"0/span秒
input type="button" value="暫停" onclick="purse()"
input type="button" value="恢復(fù)" onclick="go()"
/body
/html
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
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
html xmlns=""
head
meta http-equiv="Content-Type" content="text/html; charset=gb2312" /
title跑秒計(jì)時(shí)器/title
/head
script language="javascript"
var _TimeID=null;
var _Str = "00:00:00:00";
var _H = 0; //小時(shí)初始值
var _mm = 0; //分鐘初始值
var _ss = 0; //秒鐘初始值
var _TimeCount=0;//毫秒初始值
function setMyTime()
{
_TimeCount++;
if(_TimeCount=59){//判斷毫秒是否大于或等于59毫秒
_TimeCount = 0;//條件成立，清除毫秒計(jì)時(shí)
_ss++//秒鐘增加
if(_ss=59){//判斷秒鐘是否大于或等于59秒
_ss = 0;//條件成立，清除秒鐘計(jì)時(shí)
_mm++//分鐘增加
if(_mm=59){//判斷分鐘是否大于或等于59分
_mm = 0;//條件成立，清除分鐘計(jì)時(shí)
_H++//小時(shí)增加
}
}
}
var _Hz = "";
var _mmz = "";
var _ssz = "";
var _TCz = "";
if(_H10){_Hz = "0"}//小于兩位數(shù)時(shí)，在前面加0
if(_mm10){_mmz = "0"}
if(_ss10){_ssz = "0"}
if(_TimeCount10){_TCz = "0"}
_Str = _Hz+_H+":"+_mmz+_mm+":"+_ssz+_ss+":"+_TCz+_TimeCount
document.getElementById("sj").innerText=_Str;
}
function Sta()
{
_TimeID=setInterval("setMyTime();",1);
}
function Stop()
{
if(_TimeID==null) alert('秒表還沒(méi)有開(kāi)始');
else clearInterval(_TimeID);
}
function Clear()
{
_H = 0; //清除小時(shí)
_mm = 0; //清除分鐘
_ss = 0; //清除秒鐘
_TimeCount=0;//清除毫秒
_Str = "00:00:00:00";//清除變量
document.getElementById("sj").innerText=_Str;//賦值innerText到sj
if(_TimeID==null) alert('秒表還沒(méi)有開(kāi)始');
else clearInterval(_TimeID);
}
/script
body
form id="form1" name="form1" method="post" action=""
label
/label
label
span id="sj"00:00:00:00/span
p/p
input type="button" name="Submit" value="開(kāi)始" onclick="Sta();" /
input type="button" name="Submit3" value="停止" onclick="Stop();" /
/label
label
input type="button" name="Submit2" value="清除" onclick="Clear();" /
/label
/form
span style="font-size:12px; color:#ccc"
注意：執(zhí)行代碼需要時(shí)間，時(shí)、分、秒結(jié)果會(huì)有差異，謹(jǐn)慎使用！
p/p
供新人參考，高手勿視，純屬娛樂(lè)學(xué)習(xí)！
/span
/body
/html
計(jì)時(shí)器, 在生活當(dāng)中也是用得頻繁的功能, 比如鍛煉身體, 跑步比賽等等相關(guān)的活動(dòng). 我們用Javascript來(lái)完成一個(gè)計(jì)時(shí)器.
計(jì)時(shí)器, 主要就是對(duì)時(shí)間的一個(gè)邏輯處理, 比如60秒等于1分鐘, 60分鐘等于一個(gè)小時(shí), 我們這里只做到小時(shí)的處理. 就這么一個(gè)簡(jiǎn)單的邏輯, 然后動(dòng)態(tài)的顯示在一個(gè)Input里面.
那現(xiàn)在我們來(lái)完成這個(gè)界面
label計(jì)時(shí):/label
input type="text" name="" id="timer"/
button onclick="pause(this)" id="pause" state="on"暫停/button
button onclick="restart()"重新開(kāi)始/button
給標(biāo)簽元素一個(gè)ID是為了獲取其中的標(biāo)簽, 然后加入了兩個(gè)點(diǎn)擊事件, 計(jì)數(shù)器的暫停, 和重新開(kāi)始事件.
首先我們來(lái)完成開(kāi)始計(jì)時(shí)的處理, 開(kāi)始計(jì)時(shí)主要還是是用了setInterval的方法, 其中每隔1秒執(zhí)行一次方法,
這樣我們就可以對(duì)時(shí)間做處理, 就像開(kāi)頭所說(shuō)60秒等于1分鐘..., 所以這里就需要用判斷來(lái)處理, 最后就將其中的得到的秒,分,時(shí)顯示到輸入框里.
var ele_timer = document.getElementById("timer");
var n_sec = 0; //秒
var n_min = 0; //分
var n_hour = 0; //時(shí)
//60秒 === 1分
//60分 === 1小時(shí)
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方法是為了,后面暫停和重新開(kāi)始做處理.
用戶點(diǎn)擊了暫停, 計(jì)時(shí)器就停止計(jì)時(shí), 用戶繼續(xù)點(diǎn)擊這個(gè)按鈕, 計(jì)時(shí)器繼續(xù)計(jì)時(shí). 所以這里有一個(gè)狀態(tài)需要控制,這個(gè)狀態(tài)我們給這個(gè)按鈕一個(gè)屬性.
//暫停和繼續(xù)
function pause(self) {
var state = self.getAttribute("state");
if (state === "on") {
clearInterval(n_timer);
self.textContent = "繼續(xù)";
self.setAttribute("state", "off");
} else {
n_timer = timer();
self.textContent = "暫停";
self.setAttribute("state", "on");
}
}
最后我們來(lái)看一下重新開(kāi)始, 重新開(kāi)始事件就更加簡(jiǎn)單了. 將計(jì)數(shù)器清0, 然后改變暫停按鈕初始狀態(tài).
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");
}
這樣就完成了計(jì)時(shí)的功能.效果如下
重慶分公司
重慶分公司
