文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

使用JavaScript编写一个秒表计时器

2023-06-07 18:48

关注

本篇文章给大家分享的是有关使用JavaScript编写一个秒表计时器,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。

JavaScript是什么

JavaScript是一种直译式的脚本语言,其解释器被称为JavaScript引擎,是浏览器的一部分,JavaScript是被广泛用于客户端的脚本语言,最早是在HTML网页上使用,用来给HTML网页增加动态功能。

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <meta http-equiv="X-UA-Compatible" content="ie=edge">  <title>Document</title>  <style>    #div1 {      width: 300px;      height: 400px;      background: skyblue;      margin: 100px auto;      text-align: center;    }        #count {      width: 200px;      height: 150px;      line-height: 150px;      margin: auto;      font-size: 40px;    }        #div1 input {      width: 150px;      height: 40px;      background: orange;      font-size: 25px;      margin-top: 20px    }  </style></head><body>  <div id="div1">    <div id="count">      <span id="id_H">00</span>      <span id="id_M">00</span>      <span id="id_S">00</span>    </div>    <input id="start" type="button" value="开始">    <input id="pause" type="button" value="暂停">    <input id="stop" type="button" value="停止">  </div>  <script>    //可以将查找标签节点的操作进行简化 var btn = getElementById('btn')    function $(id) {      return document.getElementById(id)    }    window.onload = function() {      //点击开始建 开始计数      var count = 0      var timer = null //timer变量记录定时器setInterval的返回值      $("start").onclick = function() {        timer = setInterval(function() {          count++;          console.log(count)            // 需要改变页面上时分秒的值          console.log($("id_S"))          $("id_S").innerHTML = showNum(count % 60)          $("id_M").innerHTML = showNum(parseInt(count / 60) % 60)          $("id_H").innerHTML = showNum(parseInt(count / 60 / 60))        }, 1000)      }      $("pause").onclick = function() {          //取消定时器          clearInterval(timer)        }        //停止记数 数据清零 页面展示数据清零      $("stop").onclick = function() {        //取消定时器        $("pause").onclick()          // clearInterval(timer)          //数据清零 总秒数清零        count = 0          //页面展示数据清零        $("id_S").innerHTML = "00"        $("id_M").innerHTML = "00"        $("id_H").innerHTML = "00"      }      //封装一个处理单位数字的函数      function showNum(num) {        if (num < 10) {          return '0' + num        }        return num      }    }  </script></body></html>

以上就是使用JavaScript编写一个秒表计时器,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯