JavaScript的计时器和按钮效果怎么设置

本篇内容主要讲解"JavaScript的计时器和按钮效果怎么设置"，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习"JavaScript的计时器和按钮效果怎么设置"吧!

计时器效果：

    0        //需要固定时间值的宽度，避免时间值从9变到10（以及从99变到100）时后面三张图片的位置发生变化    //但是font是行内元素，无法设置宽度，所以把font变为行内块元素display:inline-block            

.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')[xss_clean]=0; //计时数值清零        timerState=2; //标识 停止计时        changeImgBtnState(); //改变按钮的显示效果}function f7(){        var i=document.getElementById('timeCount')[xss_clean];        document.getElementById('timeCount')[xss_clean]=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的计时器和按钮效果怎么设置"有了更深的了解，不妨来实际操作一番吧！这里是网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！