jQuery仿苹果手机秒表计时器特效仿苹果手机「jQuery仿苹果手机秒表计时器特效」

jQuery仿苹果手机秒表计时器特效仿苹果手机「jQuery仿苹果手机秒表计时器特效」

2025-01-12 17:34

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>愛芳芳-jQuery仿苹果手机秒表计时器特效</title> <style> html,body{margin:0;padding:0;width: 100%;height: 100%;overflow: hidden;} .box{margin:10px auto;width:400px;height: 100%;} #showtime{margin:20px;margin-bottom: 20px;text-align: center;} span{font-size: 60px;} button{width:100px;height:100px;border-radius: 50px;border:0;outline:none ;margin:0 48px;font-size:24px;cursor: pointer;} button:nth-of-type(1){ background: #287eff; color: #FFFFFF; } button:nth-of-type(2){ background: #00ad00; color: #FFFFFF; } #record{margin-top:20px;height: calc(100% - 240px);overflow: auto;} #record div{width:340px;margin: 0 20px;height:30px;border-bottom:1px dotted #666;} #record span{font-size:20px;} .left{float:left;} .right{float:right;} ::-webkit-scrollbar{ width: 7px; height: 7px; background-color: transparent; } ::-webkit-scrollbar-thumb { border-radius: 5px; background-color: rgba(144,147,153,.3); } ::-webkit-scrollbar-track-piece { background-color: transparent; } </style> </head> <body> <div class="box"> <div id="showtime"> <span>00</span> <span>:</span> <span>00</span> <span>:</span> <span>00</span> </div> <div class="bnt"> <button>记次</button> <button>启动</button> </div>  <div id="record">  </div> </div> <script src=https://download.csdn.net/download/lucky_fang/"jquery-1.12.4.min.js"></script> <script> //添加事件 $(function(){ let min=0; let sec=0; let ms=0; let timer=null; let count=0; //点击第一个按钮 $('.bnt button:eq(0)').click(function(){ if($(this).html()==='记次'){ if(!timer){ alert("没有开启定时器!"); return; } count++; let right1="<span class='right'>"+$('#showtime').text()+"</span>"; let insertStr = "<div><span class='left'>记次"+count+"</span>" +right1+"</div>"; $("#record").prepend($(insertStr)); }else{ min=0; sec=0; ms=0; count=0; $('#showtime span:eq(0)').html('00'); $('#showtime span:eq(2)').html('00'); $('#showtime span:eq(4)').html('00'); $('#record').html(''); } }); //点击第二个按钮 $('.bnt button:eq(1)').click(function(){ if($(this).html()==='启动'){ $(this).css({"background":"#f12e2e","color":"#ffffff"}); $(this).html('停止'); $('.bnt button:eq(0)').html('记次'); clearInterval(timer); timer=setInterval(show,10) }else{ $(this).css({"background":"#00ad00","color":"#ffffff"}); $(this).html('启动'); $('.bnt button:eq(0)').html('复位'); clearInterval(timer); } }); //生成时间 function show(){ ms++; if(sec===60){ min++;sec=0; } if(ms===100){ sec++;ms=0; } let msStr=ms; if(ms<10){ msStr="0"+ms; } let secStr=sec; if(sec<10){ secStr="0"+sec; } let minStr=min; if(min<10){ minStr="0"+min; } $('#showtime span:eq(0)').html(minStr); $('#showtime span:eq(2)').html(secStr); $('#showtime span:eq(4)').html(msStr); } }) </script> </body>

以上就是本篇文章【jQuery仿苹果手机秒表计时器特效仿苹果手机「jQuery仿苹果手机秒表计时器特效」】的全部内容了，欢迎阅览！文章地址：http://sjzytwl.xhstdz.com/news/13831.html
栏目首页相关文章动态同类文章热门文章网站地图返回首页物流园资讯移动站 http://sjzytwl.xhstdz.com/mobile/ , 查看更多