用JS实现一个秒表功能

最新推荐文章于 2024-04-24 18:14:24 发布
最新推荐文章于 2024-04-24 18:14:24 发布
阅读量699 收藏 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 1427
首先，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 215
2.再次点击点名按钮，显示当前被点名学生姓名，按钮文字由停止变为点名。1.界面为一个显示计时面板和三个按钮分别为:开始，暂停，重置。1.点击点名按钮，名字界面随机显示，按钮文字由点名变为停止。提示：采用定时器及定义计数器变量完成，定时器间隔为1s。3.样式请参考css及html自由发挥完成。4.点击重置，计时面板重新为0。2.点击开始，面板开始计时，3.点击暂停，面板停止。
秒表JS
03-04
秒表JS
JS实现秒表操作
houmanjunxi的专栏
10-12 202
【代码】JS实现秒表操作。
js-5秒之后跳转页面
qq_41670147的博客
12-03 1655
<!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-...
JS实现秒表
Hedia Pan的博客
08-25 464
<!DOCTYPE html> <html lang="zn"> <head> 　　<meta charset="UTF-8"> 　　<title>秒表</title> 　　<style> .contain{ width: 200px; height: 50px; background: #000; b.
js 实现 ---- 秒表
王 濤
03-31 239
简单的说一下这个秒表，它由 开始 、 暂停 、 继续 、 重置4个按钮控制的 话不多说，干活走起 展示图： HTML && CSS 代码： <style> *{ padding: 0; margin: 0; } ...
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实现秒表计时器
10-15
主要为大家详细介绍了js实现秒表计时器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Javascript实现秒表倒计时功能
10-17
主要为大家详细介绍了Javascript实现秒表倒计时功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
用JS制作一个简单的秒表
qq_44211323的博客
06-09 1130
时间与我们生活息息相关，在日常生活中人们总以时间作为参考点对一些事情进行评比，例如各种运动就是通过选手们完成时间的多少进行排名的。而这些时间的计算往往就是依靠比较精准的秒表。现在我就为大家介绍一下如何用JS代码编写一个简单的秒表。 页面代码很简单，通过两按钮和一个装时间的div组成，代码和页面就在这下面，可以参考一下。 在编写功能之前要先定义几个必须要使用到的变量，一共...
秒针计时器 html,js实现秒表计时器
weixin_31147757的博客
06-15 654
本文实例为大家分享了js实现秒表计时器的具体代码，供大家参考，具体内容如下秒表计时器的实现：效果图如下：附代码，已调试运行Document#div1 {width: 300px;height: 400px;background: skyblue;margin: 100px auto;text-align: center;}#count {width: 200px;height: 150px;lin...
前端JavaScript——秒表实现
tingyu_的博客
07-03 1969
秒表实现这一部分主要是通过JavaScript代码来实现的，在这里重点说JavaScript 图长这样： 页面结构样式代码如下： HTML： <body> <div id="div1"> <div id="count"> <span id="id_H">00</span><span>:</span> <span id="id_M"&.
操作元素之修改样式属性
leechoy
06-12 633
<!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>..
flex实现元素水平居中
weixin_42009735的博客
03-19 393
<!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>Doc
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、付费专栏及课程。

余额充值