Posted in Javascript onFebruary 18, 2022
计时器效果:
<div>
<font id='timeCount' style='display:inline-block; font-size:72px;width:100px;text-align:right;'>0</font>
//需要固定时间值的宽度,避免时间值从9变到10(以及从99变到100)时后面三张图片的位置发生变化
//但是font是行内元素,无法设置宽度,所以把font变为行内块元素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(正在计时) 1-suspend(暂停计时) 2-stop(停止计时)
var timerID;//计时器
//点击开始按钮,调用该函数
function start(obj){
if(timerState==0) //如果当前状态为正在计时,本次点击不起作用
return;
else
{
timerState=0;//标识 正在计时
changeImgBtnState(); //改变按钮的显示效果
timerID=setInterval("f7()",500); //启动计时器
}
}
function suspend(obj){
if(timerState==1 || timerState==2)
return; //如果当前状态为 暂停计时 或 停止计时,本次点击不起作用
else
{
timerState=1; //标识 暂停计时
changeImgBtnState(); //改变按钮的显示效果
clearInterval(timerID); //清除计时器
}
}
function stop(obj){
if(timerState==2) //如果当前状态为 停止计时,本次点击不起作用
return;
if(timerState==0) //如果当前状态为正在计时,清除计时器
clearInterval(timerID);
document.getElementById('timeCount').innerHTML=0; //计时数值清零
timerState=2; //标识 停止计时
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;";
}
总结
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注三水点靠木的更多内容!
详解JavaScript的计时器和按钮效果设置
- Author -
杨鑫(青岛理工大学)- Original Sources -
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@