本篇内容主要讲解“JavaScript的计时器和按钮效果怎么设置”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“JavaScript的计时器和按钮效果怎么设置”吧!
计时器效果:
<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的计时器和按钮效果怎么设置”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。