• 售前

  • 售后

热门帖子
入门百科

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

[复制链接]
井底燕雀傥 显示全部楼层 发表于 2022-1-8 03:55:23 |阅读模式 打印 上一主题 下一主题
计时器结果:
  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. }
复制代码
总结

本篇文章就到这里了,希望能够给你带来资助,也希望您能够多多关注草根技术分享的更多内容!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作