详解JavaScript的计时器和按钮效果设置

乔微博

计时器效果：

1. <div>
   
2.     <font id='timeCount' style='display:inline-block; font-size:72px;width:100px;text-align:right;'>0</font> &nbsp;&nbsp;&nbsp;
   
3.     //需要固定时间值的宽度，避免时间值从9变到10（以及从99变到100）时后面三张图片的位置发生变化
   
4.     //但是font是行内元素，无法设置宽度，所以把font变为行内块元素display:inline-block
   
5.     <img src='start.png'   class='imgBtn'  onclick="start(this)" >
   
6.     <img src='suspend.png' class='imgBtn'  onclick="suspend(this)">
   
7.     <img src='stop.png'    class='imgBtn'  onclick="stop(this)">
   
8. </div>

复制代码

1. .imgBtn{
   
2.     cursor:pointer;
   
3.     width:25px;
   
4.     height:25px;
   
5. }

复制代码

1. var timerState=2;//0-start（正在计时）  1-suspend（暂停计时）  2-stop（停止计时）
   
2. var timerID;//计时器
   
3. //点击开始按钮，调用该函数
   
4. function start(obj){
   
5.         if(timerState==0) //如果当前状态为正在计时，本次点击不起作用
   
6.                 return;
   
7.         else
   
8.         {
   
9.                 timerState=0;//标识 正在计时
   
10.                 changeImgBtnState(); //改变按钮的显示效果
    
11.                 timerID=setInterval("f7()",500); //启动计时器
    
12.         }
    
13. }
    
14. function suspend(obj){
    
15.         if(timerState==1 || timerState==2)
    
16.                 return; //如果当前状态为 暂停计时 或 停止计时，本次点击不起作用
    
17.         else
    
18.         {
    
19.                 timerState=1; //标识 暂停计时
    
20.                 changeImgBtnState(); //改变按钮的显示效果
    
21.                 clearInterval(timerID); //清除计时器
    
22.         }
    
23. }
    
24. function stop(obj){
    
25.         if(timerState==2) //如果当前状态为 停止计时，本次点击不起作用
    
26.                 return;
    
27.         if(timerState==0)  //如果当前状态为正在计时，清除计时器
    
28.                 clearInterval(timerID);
    
29.         document.getElementById('timeCount').innerHTML=0; //计时数值清零
    
30.         timerState=2; //标识 停止计时
    
31.         changeImgBtnState(); //改变按钮的显示效果
    
32. }
    
33. function f7()
    
34. {
    
35.         var i=document.getElementById('timeCount').innerHTML;
    
36.         document.getElementById('timeCount').innerHTML=parseInt(i)+1;
    
37. }
    
38. function changeImgBtnState(){
    
39.         var imgBtn=document.getElementsByClassName('imgBtn');
    
40.         for(var i=0;i<3;i++){
    
41.                 imgBtnState(imgBtn[i],timerState!=i);
    
42.         }
    
43. }
    
44. function imgBtnState(obj,flag){
    
45.         if(flag==false) //按钮不可用
    
46.                 obj.style.cssText="border:1px solid black;width:15px;height:15px;padding:5px;";
    
47.         else
    
48.                 obj.style.cssText="border:0px solid black;width:25px;height:25px;padding:0px;";
    
49. }

复制代码

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!
                                                        
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！