秒表，计数器

港控/mmm° 2022-06-02 12:52 252阅读 0赞

\*\*模拟秒表计时器  
场景：  
有三个按钮，开始，暂停，停止  
点击开始秒表走动，点击暂停秒表的数字暂停，点击停止，秒表清零  
\*\*

<style type="text/css">
        #div1{
                width:300px;
                height:400px;
                background-color:grey;
                margin: 100px auto;
                text-align:center;
            }
    
            #count{
                width:200px;
                height:150px;
                line-height:150px;
                margin:auto;
                font-size:35px;
            }
    
            #div1 input{
                width:150px;
                height:40px;
                background-color:yellow;
                font-size:25px;
                margin-top:20px;
            }
    </style>
    
    <script type="text/javascript">
    
            window.onload = function(){
         
            //可以将查找标签节点的操作简化
                function $(id){
         
                    return document.getElementById(id);
                }
           //计时器,初始化为零
                var count = 0;
                var timer = null;
            //创建开始点击事件
                $("start").onclick = function(){
         
                    clearInterval(timer);
    
                    timer = setInterval(function(){
         
                       //点击开始，开始计时
                        count++;
                       //计算小时分钟和秒数
                        $("hour").innerHTML = showNum(parseInt(count/3600));
                        $("minute").innerHTML = showNum(parseInt(count/60%60));
                        $("second").innerHTML = showNum(count%60);
                    },1000);
                }
            //创建暂停点击事件
                $("pause").onclick = function(){
         
                //清除定时器
                    clearInterval(timer);
                }
                //创建停止点击事件
                $("stop").onclick = function(){
         
                //清除定时器
                    clearInterval(timer);
                //计时器清零
                    count=0;
                //小时分钟秒数清零
                    $("hour").innerHTML = "00";
                    $("minute").innerHTML = "00";
                    $("second").innerHTML = "00";
                }
                //处理单个数字，如果这个数字小于十，则这个数字前面加上0,例如：01
                function showNum(num){
         
    
                    if(num<10){
                        return "0" + num;
                    }else{
                        return num;
                    }
                }
    
            }
        </script>
    
    <div id="div1">
        <div id="count">
                <span id="hour">00</span>
                :
                <span id="minute">00</span>
                :
                <span id="second">00</span>
            </div>
    
            <input id="start" type="button" value="开始" />
            <input id="pause" type="button" value="暂停" />
            <input id="stop" type="button" value="停止" />
    </div>

效果图如下：

![这里写图片描述][SouthEast]

[SouthEast]: /images/20220602/e6722e6f70a14c9db92402405b47f85f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，252人围观）

还没有评论，来说两句吧...

相关阅读

相关简单的Winform秒表工具

![47894fc423264c108bc61297dd97016a.png][] 核心代码： using static System.Windows.Forms.

分手后的思念是犯贱/ 2024年04月03日 09:24/ 0 赞/ 79 阅读

相关机械秒表的使用方法_秒表的使用方法？

秒表是一种常用的测时仪器。又可称"机械停表"。由暂停按钮、发条柄头、分针等组成。它是利用摆的等时性控制指针转动而计时的。它是利用摆的等时性控制指针转动而计时的。在它的正面是

拼搏现实的明天。/ 2023年01月01日 04:59/ 0 赞/ 210 阅读

相关 css 实现计数器_CSS计数器简介

css 实现计数器 Counters are a big part of programming. They help keep tabs on loops by stori

港控/mmm°/ 2022年11月27日 04:27/ 0 赞/ 208 阅读

相关计时秒表程序设计

;题目要求： ;秒表计时，按S0开始计时，并由数码管显示； ;再按S0停止。若计满1分钟结束未按S0停止，则蜂鸣器报警。 ;要在proteus软件上面模拟.....

本是古典何须时尚/ 2022年08月19日 15:25/ 0 赞/ 179 阅读

相关 HTML5超酷秒表动画可暂停和重置秒表

关于[HTML5][]和[CSS3][]的时钟[应用][Link 1]在之前我们已经分享过不少了，还有一些HTML5的日期选择应用。今天我们要分享一款基于HTML5和CSS3的

悠悠/ 2022年08月07日 06:39/ 0 赞/ 214 阅读

相关简易秒表

实现功能有 1：暂停 2：暂停继续继续计时 3：复位 include<reg52.h> //包含头文件，一般情况不需要改动，头文件包含特殊功能寄存器的定义

悠悠/ 2022年07月11日 09:21/ 0 赞/ 171 阅读

相关 Javascript实现秒表倒计时

![这里写图片描述][SouthEast] -------------------- <html> <body> <span id="cl

红太狼/ 2022年06月12日 08:59/ 0 赞/ 249 阅读

相关秒表

![这里写图片描述][SouthEast] <!DOCTYPE html> <html> <head> <meta c

缺乏、安全感/ 2022年06月05日 05:37/ 0 赞/ 164 阅读

相关 C#实现秒表程序

在部分效率测试的项目中，很多时候需要使用到秒表，虽然网上有可用的运行版本，但是加入不了自己的需求，于是就使用C\来写一个。程序的逻辑很简单，就是使用一个时钟，把时间间隔设置

我会带着你远行/ 2021年12月22日 15:44/ 0 赞/ 232 阅读

相关 Spring计时秒表StopWatch

代码中常规的耗时处理方法为： long start = System.currentTimeMillis(); log.info("耗时{}毫秒", Sys

秒速五厘米/ 2021年11月19日 16:16/ 0 赞/ 319 阅读