JavaScript的計(jì)時(shí)器和按鈕效果怎么設(shè)置

本篇內(nèi)容主要講解“JavaScript的計(jì)時(shí)器和按鈕效果怎么設(shè)置”，感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“JavaScript的計(jì)時(shí)器和按鈕效果怎么設(shè)置”吧!

計(jì)時(shí)器效果： 

<div>
    <font id='timeCount' style='display:inline-block; font-size:72px;width:100px;text-align:right;'>0</font> &nbsp;&nbsp;&nbsp;
    //需要固定時(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;";
}

到此，相信大家對(duì)“JavaScript的計(jì)時(shí)器和按鈕效果怎么設(shè)置”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！