js实现秒表功能

1.问题描述

实现秒表功能, 包含时,分,秒,毫秒，点击按钮1开始计时，点击按钮2结束计时，如下图所示：

 

 

2.问题分析

秒表的设计无疑需要用到延时器从而达到秒表变化的效果，通过设计一个延时器从而记录时间，再通过增加的毫秒数将其转化为对应的秒时分，等，设计两个操控按钮从而开始计时以及暂停计时

的操作，通过函数去绑定相应的按钮，从而达到操控的效果。当然，每一次计时器的计时都需要在页面上进行数据的更新，只有这样才能够达到动态的效果。这里我们使用innerHTML这个方法将新的数据重新覆盖到相应的位置。具体代码实现如下：

 

3.代码实现

!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div {
        margin-left: 200px;
        width: 200px;
        height: 100px;
        float: left;
    }



    button {
        float: left;
    }
</style>



<body>
    <div>00时00分00秒0</div>
    <button>点我开始计时</button>
    <button>点我暂停</button>
</body>



</html>
<script>
    var ms = 0;//毫秒
    var s = 0; // 秒
    var m = 0; // 分钟
    var h = 0; // 小时



    var msStr = '';
    var sStr = '';
    var mStr = '';
    var hStr = '';




    var time = 0;



    var oDiv = document.querySelector('div');



    var oStart = document.querySelectorAll('button')[0];
    var oPause = document.querySelectorAll('button')[1];





    oStart.onclick = function(){
        setTimestart();
    }



    oPause.onclick = function(){
        clearInterval(time);
    }




    function setTimestart(){
        time = setInterval(function(){
    ms++;



    if(ms == 10){
     s++;  // 秒进位
     ms = 0; // ms本身清零,重新记录
    }



    if(s == 60){
     m++;  // 分钟进位 
     s = 0;  // s秒 清零
    }



    if(m == 60){
     h++;  // 小时进位 
     m = 0;  // m分钟 清零
    }



    // 小时记录可以每24小时清零一次，或者100小时清零一次，都可以
    if(h == 100){
     h = 0;
    }



    // 如果记录的时间小于0，要做补零操作



    
     msStr = ms;



    if(s < 10){
     sStr = '0' + s;
    }else{
     sStr = s;
    }



    if(m < 10){
     mStr = '0' + m;
    }else{
     mStr = m;
    }



    if(h < 10){
     hStr = '0' + h;
    }else{
     hStr = h;
    }
    // 每次执行返回一个记录时间的字符串，将这个字符串写入到div中
    oDiv.innerHTML = `${hStr}时${mStr}分${sStr}秒${msStr}`;
   } , 100);  
   console.log(time);
   
  } 



</script>

 

 
这里我秒数转换利用的是if语句，只要达到60秒或者60min之后便会进一同时清零，当然，为了美观以及工整，所以当位数不足两位时需要进行
补零的操作，进行字符串拼接的操作。
秒数的转换还可以利用取余取整的操作得到，具体实现如下所示：
 
  
i++
 s = fn(i%60)
 m = fn(parseInt(i/60%60))
 h = fn(parseInt(i/3600%24))

 

 

posted @ 2022-08-03 20:49  啊wei  阅读(677)  评论(0)    收藏  举报