用JS实现一个秒表功能

最新推荐文章于 2024-04-24 18:14:24 发布
最新推荐文章于 2024-04-24 18:14:24 发布
阅读量700 收藏 1
点赞数
分类专栏： javascript复习之路 # javascript基础 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wang_swa99er/article/details/119817099
版权

用JS实现一个秒表功能

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            #div1{width: 100px;height: 200px;padding: 50px;background-color: orange;border: 1px solid black;}
            #div1 span{font-size: 20px;}
            #div1 button{width: 100px;height: 30px;font-size: 16px;margin-top: 20px;background-color: black;color: white;}
        </style>
        <script>
            /* 
                window.onload = function(){
                    写在这里代码，是整个页面加载完成以后运行的(固定格式)
                }
            */
           //通过id获取标签的方法进行简化
           function $(id){
               return document.getElementById(id);
           }
           var i = 0;//总秒数
           var timer = null//纪录定时器的返回值
            window.onload = function(){
                //获取按钮
                $("start").onclick = function(){
                    timer = setInterval(function(){
                        i++;
                        $("sec").innerHTML = doubleNum(i % 60);
                        $("min").innerHTML = doubleNum(parseInt(i / 60) % 60);
                        $("hour").innerHTML = doubleNum(parseInt(i / 3600));
                    }, 1000);
                }
                //暂停
                $("pause").onclick = function(){
                    clearInterval(timer);
                }
                //复位
                $("reset").onclick = function(){
                    clearInterval(timer);
                    i = 0;
                    $("sec").innerHTML = "00";
                    $("min").innerHTML = "00";
                    $("hour").innerHTML = "00";
                }
            }
            
            function doubleNum(n){
                if(n < 10)
                {
                    return "0" + n;
                }else{
                    return n;
                }
            }
        </script>
    </head>
    <body>
        <div id = "div1">
            <span id='hour'>00</span>
            <span>:</span>
            <span id='min'>00</span>
            <span>:</span>
            <span id='sec'>00</span>
            
            <br/>
            <button id = 'start'>开始</button>
            <button id = 'pause'>暂停</button>
            <button id = 'reset'>复位</button>
        </div>
    </body>
</html>

运行结果:
秒表
定时器相关知识：
点击这里

东方求败、
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
js实现简单的秒表
Hbiude的博客
04-29 2104
这篇文章主要为大家详细介绍了js实现简单的秒表，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下 本文实例为大家分享了js实现简单的秒表具体代码，供大家参考，具体内容如下 描述： 实现一个简单的秒表，点击启动按钮时开始计时，随后启动按钮变为暂停， 点击暂停暂停计时，点击复位回到最初始状态。 效果： 代码： 1 2 3 4 5 6 7 8 9 10 11 12
js制作简易秒表效果详细讲解、开始、暂停与结束（定时器制作和时间戳制作）
Cat_LIKE_Mouse的博客
09-03 1428
首先，css和html <section> <div class="minute"></div> <div class="second"></div> <div class="mill"></div> </section> <button class="start">开始</button> <butto
web前端：利用js实现随机点名和秒表计数器
2301_76862126的博客
04-24 220
2.再次点击点名按钮，显示当前被点名学生姓名，按钮文字由停止变为点名。1.界面为一个显示计时面板和三个按钮分别为:开始，暂停，重置。1.点击点名按钮，名字界面随机显示，按钮文字由点名变为停止。提示：采用定时器及定义计数器变量完成，定时器间隔为1s。3.样式请参考css及html自由发挥完成。4.点击重置，计时面板重新为0。2.点击开始，面板开始计时，3.点击暂停，面板停止。
操作元素之修改样式属性
leechoy
06-12 638
<!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>..
js实现秒表
weixin_41812196的博客
12-07 158
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ margin: 0 auto; text-align: center; border: 1px solid red; .
JS实现简易秒表
路漫漫其修远兮，吾将上下而求索
08-17 304
<!DOCTYPE html> <html> <head> <title>简易秒表</title> <style> body { text-align: center; } </style> </head> <body> <h1>JS实现简易秒表</h1> <h...
Js实现简单的秒表
进击的葱
12-17 5837
描述： 实现一个简单的秒表，点击启动按钮时开始计时，随后启动按钮变为暂停， 点击暂停暂停计时，点击复位回到最初始状态。 效果： 代码： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&
js实现计时器秒表功能
01-19
本文实例为大家分享了js实现计时器秒表功能的具体代码，供大家参考，具体内容如下 HTML <input type=text id=timetext value=00:00:00 readonly> <button type=button onclick=start()>开始</button...
原生js实现秒表计时器功能
12-11
本文实例为大家分享了带有开始、暂停、清除功能的js计时器，供大家参考，具体内容如下 效果图：   下面贴代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <...
js计时器(开始计时、停止计时、重置)
02-20
计时器的实现，有开始计时、停止计时、重置功能。
javascript设计简单的秒表计时器
11-24
本文实例讲述了javascript设计简单的秒表计时器的实现代码。分享给大家供大家参考。具体如下： 运行效果截图如下： 具体代码如下： <html> <head> <title> New Document </title> </head> <body> <form action="somepage.asp"> <input type="text" value="0" name="txt1"/> <input type="button" value="开始" name="btnStart"/> <input type="button" value="重置" name="btnRese
Javascript实现秒表倒计时功能
10-17
主要为大家详细介绍了Javascript实现秒表倒计时功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
原生js实现秒表
weixin_30621711的博客
04-02 89
秒表最核心的功能是计时。每个人的手机上都有秒表功能，打开手机就可以看到。我们可以看看手机上的秒表是怎么样的。 手机上的秒表有分钟和秒，有一个开始按钮，点击开始按钮，秒表就开始计时，当秒走到59的时候，分钟加1，秒归零。 下面是实现这个功能的代码。 <html> <head> <title>秒表</title>...
js秒表计时器
ninjya_luck的专栏
07-29 4414
var c=0 var t function timedCount() { var temptextmin=document.getElementById('txt'); hour = parseInt(c / 3600);// 小时数 min = parseInt(c / 60);// 分钟数 if(min>=60){ min=min%60 } la
JS秒表（代码实现）
qq_44024359的博客
09-19 1014
JS代码实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <head> <script> function timedText(){ var x=document.getEleme...
用原生js实现秒表
qq_37635012的博客
07-24 263
秒表 秒表作用是计时，先看下最终效果: 点击"开始"按钮，开始计时，点击"暂停"按钮暂停，点击"复位"就复位归零。代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title&
JS 秒表
珎珎啊
04-01 187
<body> <div>00:00:00:00</div> <button>开始</button> <button disabled>暂停</button> <button disabled>继续</button> <button disable...
js多功能秒表计时器代码
最新发布
06-21
在JavaScript中，创建一个多功能秒表计时器的代码可以分为几个步骤，包括初始化、开始/停止计时和重置计时。下面是一个简单的例子，使用`setInterval`和`clearInterval`来实现： ```javascript // 定义一个计时器对象 var stopwatch = { running: false, startTime: null, timerId: null, seconds: 0, minutes: 0, hours: 0, }; // 开始计时 stopwatch.start = function() { if (!this.running) { this.startTime = new Date(); this.running = true; this.timerId = setInterval(() => { var now = new Date(); var elapsedTime = now - this.startTime; this.seconds = Math.floor(elapsedTime / 1000); this.minutes = Math.floor(this.seconds / 60); this.hours = Math.floor(this.minutes / 60); // 如果超过24小时，则重新从0开始 if (this.hours >= 24) { this.hours = this.hours % 24; this.minutes = this.minutes % 60; this.seconds = this.seconds % 60; } // 更新显示 console.log(`Hours: ${this.hours}, Minutes: ${this.minutes}, Seconds: ${this.seconds}`); }, 1000); } }; // 停止计时 stopwatch.stop = function() { if (this.running) { clearInterval(this.timerId); this.running = false; } }; // 重置计时器 stopwatch.reset = function() { this.startTime = null; this.seconds = 0; this.minutes = 0; this.hours = 0; this.running = false; }; // 示例用法 stopwatch.start(); // 开始计时 // 停止计时时调用stopwatch.stop(); // 重置时调用stopwatch.reset();
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

东方求败、

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值