JavaScript原生秒表、计时器

可以开始、暂停、清除。

效果图:

下面贴代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计时器</title>
    <script>
        var hour,minute,second;//时 分 秒
        hour=minute=second=0;//初始化
        var millisecond=0;//毫秒
        var int;
        function Reset()//重置
        {
            window.clearInterval(int);
            millisecond=hour=minute=second=0;
            document.getElementById('timetext').value='00时00分00秒000毫秒';
        }

        function start()//开始
        {
            int=setInterval(timer,50);
        }

        function timer()//计时
        {
            millisecond=millisecond+50;
            if(millisecond>=1000)
            {
                millisecond=0;
                second=second+1;
            }
            if(second>=60)
            {
                second=0;
                minute=minute+1;
            }

            if(minute>=60)
            {
                minute=0;
                hour=hour+1;
            }
            document.getElementById('timetext').value=hour+'时'+minute+'分'+second+'秒'+millisecond+'毫秒';

        }

        function stop()//暂停
        {
            window.clearInterval(int);
        }
    </script>
</head>
<body>
<div style="text-align: center">
    <input type="text" id="timetext" value="00时00分00秒" readonly><br>
    <button type="button" onclick="start()">开始</button> <button type="button" onclick="stop()">暂停</button> <button type="button" onclick="Reset()">重置</button>
</div>
</body>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏崔庆才的专栏

Scrapy框架的使用之Spider Middleware的用法

1824
来自专栏小古哥的博客园

基于jquery的-获取短信验证码-倒计时

在制作短信验证的时候,需要做一个获取短信按钮,点击后显示倒计时, html代码如下: 1 <input class="gain" type="button" v...

34310
来自专栏大内老A

通过重建Hosting系统理解HTTP请求在ASP.NET Core管道中的处理流程[中]:管道如何处理请求

从上面的内容我们知道ASP.NET Core请求处理管道由一个服务器和一组中间件构成,所以从总体设计来讲是非常简单的。但是就具体的实现来说,由于其中涉及很多对象...

2569
来自专栏向治洪

Android热修复技术总结

插件化和热修复技术是Android开发中比较高级的知识点,是中级开发人员通向高级开发中必须掌握的技能,插件化的知识可以查我我之前的介绍:Android插件化。本...

2386
来自专栏不止是前端

一次搞懂Event loop

4178
来自专栏nummy

python blinker库学习

Blinker 是一个基于Python的强大的信号库,它既支持简单的对象到对象通信,也支持针对多个对象进行组播。Flask的信号机制就是基于它建立的。

722
来自专栏mini188

学习笔记:因为java匿名类学习到接口的一些小用法

在看CometD的示例代码时发现了许多有意思的代码,但说实话看别人的代码确实是件很累的事情,所以就看到这个知识点做一下记录吧。 先看一段代码: ? 代码1 这段...

1918
来自专栏Java帮帮-微信公众号-技术文章全总结

05.HTML脚本/字符实体/URL/速查列表/

05.HTML脚本/字符实体/ URL/速查列表/ HTML 脚本 ---- JavaScript 使 HTML 页面具有更强的动态和交互性。 ---- HTM...

2854
来自专栏企鹅号快讯

Python条件控制之if

各位小伙伴 周一早 又开始了新的一周 不知道各位周末过的怎么样? 反正常老师是觉得睡不够啊 这是不是说明我还是个小伙?嘿嘿! 本周我们要进行Python的继续学...

1915
来自专栏web前端教室

JavaScript-事件委托(事件代理)

今天给自己的知识结构填个坑,再复习下JS的事件代理。 事件代理可以给JS批量生成的DOM元素添加事件,并且还可以提高效率,因为你确实不用给每个DOM节点添加事件...

17110

扫码关注云+社区