js 实现计数器功能

article/2025/9/14 4:09:49

1.运用 setInterval()定时器计算秒数

<!DOCTYPE html>
<html><head><title>JS实现计数器</title><meta http-equiv="content-type" content="text/html; charset=gbk"><script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script><style type="text/css"></style></head><body><div style='color:red;font-size:50px'><span id='hours'>00</span> :<span id='minutes'>00</span>:<span id='seconds'>00</span></div>时<input type="text" onkeyup="this.value=this.value.replace(/[^\d]/g,'') " onafterpaste="this.value=this.value.replace(/[^\d]/g,'') " id="hour" />分<input type="text" onkeyup="this.value=this.value.replace(/[^\d]/g,'') " onafterpaste="this.value=this.value.replace(/[^\d]/g,'') " id="minute" />秒<input type="text" onkeyup="this.value=this.value.replace(/[^\d]/g,'') " onafterpaste="this.value=this.value.replace(/[^\d]/g,'') " id="second" /><button onclick='start()' id='startt'>开始</button><button onclick="suspend()">暂停</button><script type="text/javascript">function timer() {t=setInterval(() => {var secondtime=$("#seconds").text()//秒var minutetime=$("#minutes").text()//分var hourtime=$("#hours").text()//时if(secondtime.substring(1,0)==0&&secondtime.substring(2,1)>0){var secondtimes=secondtime.substring(2,1)$("#seconds").text('0'+(secondtimes-1))}else if(secondtime.substring(1,0)==0&&secondtime.substring(2,1)==0){if(minutetime.substring(1,0)!=0||minutetime.substring(2,1)!=0||hourtime.substring(1,0)!=0||hourtime.substring(2,1)!=0){$("#seconds").text(59)if(minutetime.substring(1,0)==0&&minutetime.substring(2,1)>0){var minutetimes=minutetime.substring(2,1)$("#minutes").text('0'+(minutetimes-1))console.log(minutetime)}else if(minutetime.substring(1,0)==0&&minutetime.substring(2,1)==0){console.log(hourtime)if(hourtime.substring(1,0)!=0||hourtime.substring(2,1)!=0){$("#minutes").text(59)if(hourtime.substring(1,0)==0&&hourtime.substring(2,1)>0){var hourtimes=hourtime.substring(2,1)$("#hours").text('0'+(hourtimes-1))}else if(hourtime.substring(1,0)==0&&hourtime.substring(2,1)==0){}else if(hourtime.substring(1,0)!=0&&hourtime>10){$("#hours").text($("#hours").text()-1)}else{$("#hours").text('0'+9)}}else{console.log(minutetime)$("#minutes").text('0'+0)}console.log(minutetime)}else if(minutetime.substring(1,0)!=0&&minutetime>10){$("#minutes").text($("#minutes").text()-1)}else{$("#minutes").text('0'+9)console.log(minutetime)}}else{$("#seconds").text('0'+0)}}else if(secondtime.substring(1,0)!=0&&secondtime>10){$("#seconds").text($("#seconds").text()-1)}else{$("#seconds").text('0'+9)}}, 1000)}function start(){if($("#second").val()==''){$("#second").val(0)}if($("#minute").val()==''){$("#minute").val(0)}if($("#hour").val()==''){$("#hour").val(0)}if($("#second").val()>60){alert('秒不能大于60')return}if($("#minute").val()>60){alert('分不能大于60')return}if($("#hour").val()>24){alert('时不能大于24')return}$("#startt").attr("disabled",true);//开始按钮禁用//时-获取输入框的值   小于10，在前面加0if($('#hour').val().length<2){$("#hours").text('0'+$('#hour').val());}else{$("#hours").text($('#hour').val());}//分-获取输入框的值   小于10，在前面加0if($('#minute').val().length<2){$("#minutes").text('0'+$('#minute').val());}else{$("#minutes").text($('#minute').val());}//分-获取输入框的值   小于10，在前面加0if($('#second').val().length<2){$("#seconds").text('0'+$('#second').val());}else{$("#seconds").text($('#second').val());}timer()}//暂停function suspend(){clearInterval(t)//关闭定时器$("#startt").attr("disabled",false);//开始按钮禁用取消}           </script></body>
</html>