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 条评论
登录 后参与评论

相关文章

来自专栏HTML5学堂

特殊字体神器-fontmin,秒杀一切工具

HTML5学堂:此前,我们介绍过font-spider这款软件,也讲解过处理网络字体的方法。而今我们为大家介绍一款能够秒杀之前所有工具的“特殊字体”制作工具。 ...

49440
来自专栏xx_Cc的学习总结专栏

六天完成一个简单iOS App - 第六天

31450
来自专栏拂晓风起

HTML5动画软件工具编辑器 HTML5动画分类 工具推荐

22330
来自专栏Taylor技术日志

Laravel-Excel导出功能文档

可以在闭包中修改一些属性,很多属性可在配置文件中设置默认值 config/excel.php

2.5K500
来自专栏WindCoder

用CSS让头像动起来

不知之前什么时候起,喜欢是不是玩头像的特效。现在换了主题,头像不会动了,反而有点不太习惯,于是就又找了个常用的出来。原本以为那个把头像变成圆形并可以旋转的特效会...

32010
来自专栏黒之染开发日记

移动web开发中,好用的小方法

10620
来自专栏菩提树下的杨过

silverlight数据绑定模式TwoWay,OneWay,OneTime的研究

asp.net开发中,数据绑定是一个很简单的概念,控件与数据绑定后,控件可以自动把数据按一定的形式显示出来。(当然控件上的值改变后,可以通过提交页面表单,同时后...

24160
来自专栏Coco的专栏

【技巧篇】解决悬浮的<header>、<footer>遮挡内容的处理技巧

26150
来自专栏hrscy

iOS常见问题总结(二)

在导入框架libxml2.2.dylib后, 最到了XCode仍然找不到<libxml/tree.h>的情况, 最后解决过程如下: 1 )项目 -Targ...

11520
来自专栏逸鹏说道

06.移动先行之谁主沉浮----我的代码我来写(Xaml的优势)

如果移动方向有任何问题请参考===> 异常处理汇总-移动系列(点) 前面几节课,我们都是在前台创建对象,进行一些设置,那么我们为什么不用传统的方法来编程呢? 我...

27450

扫码关注云+社区

领取腾讯云代金券