詳解JavaScript的計(jì)時(shí)器和按鈕效果設(shè)置
更新時(shí)間:2022年01月07日 15:09:31 作者:楊鑫(青島理工大學(xué))
這篇文章主要為大家介紹了JavaScript的計(jì)時(shí)器和按鈕效果設(shè)置,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
計(jì)時(shí)器效果:

<div>
<font id='timeCount' style='display:inline-block; font-size:72px;width:100px;text-align:right;'>0</font>
//需要固定時(shí)間值的寬度,避免時(shí)間值從9變到10(以及從99變到100)時(shí)后面三張圖片的位置發(fā)生變化
//但是font是行內(nèi)元素,無法設(shè)置寬度,所以把font變?yōu)樾袃?nèi)塊元素display:inline-block
<img src='start.png' class='imgBtn' onclick="start(this)" >
<img src='suspend.png' class='imgBtn' onclick="suspend(this)">
<img src='stop.png' class='imgBtn' onclick="stop(this)">
</div>.imgBtn{
cursor:pointer;
width:25px;
height:25px;
}var timerState=2;//0-start(正在計(jì)時(shí)) 1-suspend(暫停計(jì)時(shí)) 2-stop(停止計(jì)時(shí))
var timerID;//計(jì)時(shí)器
//點(diǎn)擊開始按鈕,調(diào)用該函數(shù)
function start(obj){
if(timerState==0) //如果當(dāng)前狀態(tài)為正在計(jì)時(shí),本次點(diǎn)擊不起作用
return;
else
{
timerState=0;//標(biāo)識(shí) 正在計(jì)時(shí)
changeImgBtnState(); //改變按鈕的顯示效果
timerID=setInterval("f7()",500); //啟動(dòng)計(jì)時(shí)器
}
}
function suspend(obj){
if(timerState==1 || timerState==2)
return; //如果當(dāng)前狀態(tài)為 暫停計(jì)時(shí) 或 停止計(jì)時(shí),本次點(diǎn)擊不起作用
else
{
timerState=1; //標(biāo)識(shí) 暫停計(jì)時(shí)
changeImgBtnState(); //改變按鈕的顯示效果
clearInterval(timerID); //清除計(jì)時(shí)器
}
}
function stop(obj){
if(timerState==2) //如果當(dāng)前狀態(tài)為 停止計(jì)時(shí),本次點(diǎn)擊不起作用
return;
if(timerState==0) //如果當(dāng)前狀態(tài)為正在計(jì)時(shí),清除計(jì)時(shí)器
clearInterval(timerID);
document.getElementById('timeCount').innerHTML=0; //計(jì)時(shí)數(shù)值清零
timerState=2; //標(biāo)識(shí) 停止計(jì)時(shí)
changeImgBtnState(); //改變按鈕的顯示效果
}
function f7()
{
var i=document.getElementById('timeCount').innerHTML;
document.getElementById('timeCount').innerHTML=parseInt(i)+1;
}
function changeImgBtnState(){
var imgBtn=document.getElementsByClassName('imgBtn');
for(var i=0;i<3;i++){
imgBtnState(imgBtn[i],timerState!=i);
}
}
function imgBtnState(obj,flag){
if(flag==false) //按鈕不可用
obj.style.cssText="border:1px solid black;width:15px;height:15px;padding:5px;";
else
obj.style.cssText="border:0px solid black;width:25px;height:25px;padding:0px;";
}總結(jié)
本篇文章就到這里了,希望能夠給你帶來幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
您可能感興趣的文章:
相關(guān)文章
JavaScript實(shí)現(xiàn)為指定對(duì)象添加多個(gè)事件處理程序的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)為指定對(duì)象添加多個(gè)事件處理程序的方法,可實(shí)現(xiàn)讓指定對(duì)象處理多個(gè)事件的功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-04-04
基于JavaScript實(shí)現(xiàn)新增內(nèi)容滾動(dòng)播放效果附完整代碼
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)新增內(nèi)容滾動(dòng)播放效果,效果非常棒,實(shí)現(xiàn)代碼簡(jiǎn)單易懂,需要的朋友可以參考下2017-08-08
模擬用戶點(diǎn)擊彈出新頁(yè)面不會(huì)被瀏覽器攔截
window.open被瀏覽器攔截導(dǎo)致頁(yè)面無法彈出,a標(biāo)簽的彈出就不會(huì)被瀏覽器攔截,下面有個(gè)不錯(cuò)的示例,大家可以學(xué)習(xí)下2014-04-04
javascript中for/in循環(huán)及使用技巧
如果您希望一遍又一遍地運(yùn)行相同的代碼,并且每次的值都不同,那么使用循環(huán)是很方便的,本篇文章給大家介紹javascript中for/in循環(huán)及使用技巧 ,需要的朋友可以參考下2015-09-09

