JavaScript实现简单计时器


Posted in Javascript onJune 22, 2021

本文实例为大家分享了JavaScript实现简单计时器的具体代码,供大家参考,具体内容如下

JavaScript实现简单计时器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计时器</title>
    <style>
        .bigDiv {
            margin: 50px auto;
            width: 200px;
            height: 200px;
            background-color: lightskyblue;
            border-radius: 10px;
        }

        #showNum {
            width: 200px;
            height: 20px;
            background-color: orange;
            text-align-all: center;

            border-radius: 5px;
        }
    </style>
</head>
<body>
<div class="bigDiv">
    <h2 align="center">计时器</h2>
    <div id="showNum" align="center">
        0
    </div>
    <br>
    <br>
    <div class="butDiv">&nbsp&nbsp&nbsp&nbsp
        <button type="button" id="start">开始</button>
        &nbsp
        <button type="button" id="stop">停止</button>
        &nbsp
        <button type="button" id="reset">复位</button>
        &nbsp
    </div>
</div>
<script>
    //定义显示的时间
    let int = null;
    /**
     * 开始  单击事件
     */
    document.getElementById("start").addEventListener('click', function () {
        if (int == null) {
            //设置定时器
            //每隔参数二毫秒执行一次参数一
            int = setInterval(startNum, 1000);
        }
    });
    /**
     * 停止   单击事件
     */
    document.getElementById("stop").addEventListener('click', function () {
        //清除定时器,
        clearInterval(int);
        int = null;
    });
    /**
     * 复位    单击事件
     */
    let num = 0;
    document.getElementById("reset").addEventListener('click', function () {
        if (int == null) {
            num = 0;
            //将时间变成0
            document.getElementById("showNum").innerHTML = num;
        }
    });

    function startNum() {
        num++;
        //持续改变时间
        document.getElementById("showNum").innerHTML = num;
    }
</script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
没有document.getElementByName方法
Aug 19 Javascript
javascript 获取iframe里页面中元素值的方法
Feb 17 Javascript
JavaScript中的原型链prototype介绍
Dec 30 Javascript
js实现的简单radio背景颜色选择器代码
Aug 18 Javascript
jQuery+CSS实现的网页二级下滑菜单效果
Aug 25 Javascript
js查看一个函数的执行时间实例代码
Sep 12 Javascript
javascript 实现动态侧边栏实例详解
Nov 11 Javascript
javascript 开发之百度地图使用到的js函数整理
May 19 Javascript
使用Bootrap和Vue实现仿百度搜索功能
Oct 26 Javascript
jQuery实现标签子元素的添加和赋值方法
Feb 24 jQuery
JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析
Jul 31 Javascript
利用Angular7开发一个Radio组件的全过程
Jul 11 Javascript
React实现动效弹窗组件
关于React Native 无法链接模拟器的问题
React-vscode使用jsx语法的问题及解决方法
vue3使用vue-router的完整步骤记录
一篇文章学会Vue中间件管道
Jun 20 #Vue.js
Ajax 的初步实现(使用vscode+node.js+express框架)
帮你提高开发效率的JavaScript20个技巧
You might like
php解决和避免form表单重复提交的几种方法
2016/08/31 PHP
PHP实现批量删除(封装)
2017/04/28 PHP
JavaScript 类的定义和引用 JavaScript高级培训 自定义对象
2010/04/27 Javascript
jQuery EasyUI 的EasyLoader功能介绍
2010/09/12 Javascript
js注意img图片的onerror事件的分析
2011/01/01 Javascript
jQuery插件原来如此简单 jQuery插件的机制及实战
2012/02/07 Javascript
JS完成代码前最好对其做5件事
2013/04/07 Javascript
javascript中SetInterval与setTimeout的定时器用法
2015/08/24 Javascript
JQuery日历插件My97DatePicker日期范围限制
2016/01/20 Javascript
Jquery和Js获得元素标签名称的方法总结
2016/10/08 Javascript
html5 canvas 详细使用教程
2017/01/20 Javascript
jQuery点击导航栏选中更换样式的实现代码
2017/01/23 Javascript
无法获取隐藏元素宽度和高度的解决方案
2017/03/07 Javascript
JSON stringify方法原理及实例解析
2020/10/23 Javascript
js基于canvas实现时钟组件
2021/02/07 Javascript
[07:49]2014DOTA2国际邀请赛 Newbee夺冠后采访xiao8坦言奖金会上交
2014/07/23 DOTA
Python操作SQLite简明教程
2014/07/10 Python
python3使用urllib模块制作网络爬虫
2016/04/08 Python
教你使用python画一朵花送女朋友
2018/03/29 Python
利用python的socket发送http(s)请求方法示例
2018/05/07 Python
python微信公众号之关键词自动回复
2018/06/15 Python
推荐10款最受Python开发者欢迎的Python IDE
2018/09/16 Python
在Qt5和PyQt5中设置支持高分辨率屏幕自适应的方法
2019/06/18 Python
Python3.7 读取 mp3 音频文件生成波形图效果
2019/11/05 Python
使用Python实现画一个中国地图
2019/11/23 Python
Django数据模型中on_delete使用详解
2020/11/30 Python
英国在线购买马术服装:EQUUS
2019/07/12 全球购物
同步和异步有何异同,在什么情况下分别使用他们?举例说明
2014/02/27 面试题
计算机专业毕业生自荐信范文
2014/03/06 职场文书
理想演讲稿范文
2014/05/21 职场文书
法定代表人身份证明书
2014/09/10 职场文书
青春飞扬演讲稿
2014/09/11 职场文书
民间借贷纠纷答辩状
2015/08/03 职场文书
html5中sharedWorker实现多页面通信的示例代码
2021/05/07 Javascript
MySQL表字段时间设置默认值
2021/05/13 MySQL
MySQL查看表和清空表的常用命令总结
2021/05/26 MySQL