如何使用JavaScript实现网页秒表功能-创新互联

这篇文章主要为大家展示了如何使用JavaScript实现网页秒表功能，内容简而易懂，希望大家可以学习一下，学习完之后肯定会有收获的，下面让小编带大家一起来看看吧。

公司主营业务：成都网站设计、成都做网站、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。创新互联公司是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联公司推出兴海免费做网站回馈大家。

效果图展示，感觉不错可以参考实例代码。

如何使用JavaScript实现网页秒表功能

具体代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body>
 <div>00:00:00:00</div>
 <button>开始</button>
 <button disabled>暂停</button>
 <button disabled>继续</button>
 <button disabled>重置</button>

 <script>
//定义一个变量，根据定时器每秒执行一次，每次执行++自增操作，变量存储的数值，就会每秒+1。现在需要的记录效果是每0.01秒，也就是10毫秒执行一次。根据累计的数值执行进位。如果毫秒达到100就是1秒，如果秒达到60就是1分钟，如果分钟达到60就是1小时

  var ms = 0; // 毫秒
  var s = 0; // 秒
  var m = 0; // 分钟
  var h = 0; // 小时

  // 单独定义存储时、分、秒、毫秒的字符串的变量来存储累加时间的执行结果，因为如果直接在ms、s、m、h变量上进行拼接操作，会影响++操作的执行  
  var msStr = '';
  var sStr = '';
  var mStr = '';
  var hStr = '';

  // 因为定时器是定义在函数内部，必须定义一个全局变量来存储定时器，在函数外部可以调用终止定时器
  var time = 0;

  // 获取div标签对象
  var oDiv = document.querySelector('div');

  // 获取按钮的标签对象
  var oStart = document.querySelectorAll('button')[0]; // 开始
  var oPause = document.querySelectorAll('button')[1]; // 暂停
  var oCont = document.querySelectorAll('button')[2]; //继续
  var oReset = document.querySelectorAll('button')[3]; // 重置

  // 给四个按钮添加点击事件效果
  
  // 开始按钮
  oStart.onclick = function(){
   // 点击开始按钮执行函数，执行秒表计时
   setTimeStr();
   // 可以点暂停
   oPause.disabled = false;
   // 其他标签都不能点
   oStart.disabled = true;
   oCont.disabled = true;
   oReset.disabled = true;
  }

  // 暂停按钮
  oPause.onclick = function(){
   // 点击暂停按钮,清除定时器,终止秒表执行
   clearInterval(time);
   // 暂停本身和开始不能点
   oPause.disabled = true;
   oStart.disabled = true;
   // 继续和重置能点了
   oCont.disabled = false;
   oReset.disabled = false;
  }

  // 继续按钮
  oCont.onclick = function(){
   // 点击继续按钮，继续执行定时器
   setTimeStr();
   // 暂停可以点
   oPause.disabled = false;
   // 其他都不能点
   oCont.disabled = true;
   oReset.disabled = true;
   oStart.disabled = true;
  }


  // 重置按钮
  oReset.onclick = function(){
   // 点击重置按钮,将所有的数据都恢复到0的状态
   // 所有变量存储的数据都是0, div中的内容也恢复到0   
   // 定义所有存储时间的变量存储的数值为0 
   ms = 0; // 毫秒
   s = 0; // 秒
   m = 0; // 分钟
   h = 0; // 小时
   // 将div中的内容,设定为初始状态的00:00:00:00内容
   oDiv.innerHTML = '00:00:00:00';
   // 开始可以点
   oStart.disabled = false;
   // 其他都不能点
   oPause.disabled = true;
   oCont.disabled = true;
   oReset.disabled = true;
  }

  // 每次点击开始按钮或者继续按钮都会调用执行函数，都会生成一个新的定时器。time中存储的是当前这个新的定时器，是整个程序中定时器的序号
  // 例如点击开始按钮10次会生成10个定时，time中存储最后一个定时器的序号10
  // 当点击暂停按钮时，清除的是time中存储的序号是10的这一个定时器，之前 1-9定时器仍然会执行  
  // 解决方法：点击开始按钮之后，在点击暂停按钮之前，禁止再次点击开始按钮。也就是在清除原有定时器之前，不允许生成新的定时器

  // 定义函数，这个函数的作用就是记录执行的时间，有小时、分钟、秒、毫秒 4个部分。将记录的时间写入到div中，div中起始时默认都是0
  function setTimeStr(){  
   // 赋值操作,将定时器,存储在全局作用域变量中
   // 此处只是赋值操作
   time = setInterval(function(){
    ms++;
    // 毫秒是10毫秒一增加
    // ms存储的数值如果达到100，就是1秒种了
    // 给秒单位进位 s++ 
    // ms本身需要重新开始记录数值
    // 0:0:0:99 ---> 0:0:1:00
    if(ms == 100){
     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，要做补零操作
    if(ms < 10){
     msStr = '0' + ms;
    }else{
     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}`;
   } , 10);  
   console.log(time);
  } 
 </script>
</body>
</html>

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

网站栏目：如何使用JavaScript实现网页秒表功能-创新互联
文章起源：https://www.cdcxhl.com/article0/diegoo.html

成都网站建设公司_创新互联，为您提供移动网站建设、标签优化、网站导航、品牌网站制作、品牌网站建设、定制网站

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容