JavaScript：计时器，包含按钮效果设置

计时器效果：

<div><font id='timeCount' style='display:inline-block; font-size:72px;width:100px;text-align:right;'>0</font> &nbsp;&nbsp;&nbsp;//需要固定时间值的宽度，避免时间值从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;";elseobj.style.cssText="border:0px solid black;width:25px;height:25px;padding:0px;";
}

JavaScript：计时器，包含按钮效果设置相关推荐

JavaScript计时器实现倒计时效果
1.计时器: 描述:window中提供了两种计时器,即延迟期和定时器语法: 1) 定时器: ...
【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个果冻导航标签栏图标按钮效果~~适合初学者~超简单~ |前端开发|IT软件
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个果冻导航标签栏图标按钮效果~~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: < ...
Qt中按钮图标的设置、按钮按下时浮动效果设置以及 QT的EXE程序图标设置
本文内容皆为Qt 5.13版本. 使用 IDE为 QTCreator.若是 VS+QT插件环境则可能有略微差异. 推荐一个不错的图标网站,大部分资源都可以免费下载: https://www.easyi ...
【web前端特效源码】Html5+css3+JavaScript实现计算器2功能+新拟态新拟物风格(Neumorphism)网页图标按钮效果~手把手教学~适合初学者~超简单~
b站视频演示效果: [web前端特效源码]Html5+css3+JavaScript实现计算器2功能+新拟态新拟物风格(Neumorphism)网页图标按钮效果!手把手教学! 效果图: 完整代码: & ...
创建输入控件(input控件、文本框、密码框、单项选择、多项选择、重置与提交按钮的设置)
创建输入控件 input控件的相关概念 input控件的属性 input控件的类型文本框的设置密码框的设置单项选择的设置多项选择的设置重置与提交按钮的设置综合运用相关概念选择题及参考答案 ...
shazam 算法_类似于Shazam的变形按钮效果
shazam 算法 View demo 查看演示Download Source 下载源 Today we'd like to show you how to create a fun little m ...
JavaScript 图片滑动展示效果javascript
javascript 图片滑动展示效果更新版本:slideview 图片滑动(扩展/收缩)展示效果看到jquery实例:图片展示效果后,我也想拿来试试,但我不太喜欢用框架,所以自己做了个. 其中的 ...
js php滚动图代码,JavaScript_JS实现的N多简单无缝滚动代码(包含图文效果)，本文实例讲述了JS实现的N多简 - phpStudy...
JS实现的N多简单无缝滚动代码(包含图文效果) 本文实例讲述了JS实现的N多简单无缝滚动代码.分享给大家供大家参考,具体如下: 实现原理很简单,注册事件之后,立即将元素的innerHTML累加一次. ...
JavaScript 图片切换展示效果
JavaScript 图片切换展示效果看到alibaba的一个图片切换效果,感觉不错,想拿来用用.但代码一大堆的,看着昏,还是自己来吧. 由于有了做图片滑动展示效果的经验,做这个就容易得多了. 先看 ...

JavaScript：计时器，包含按钮效果设置

JavaScript：计时器，包含按钮效果设置相关推荐

最新文章

热门文章