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 相关文章推荐
javascript 树形导航菜单实例代码
Aug 13 Javascript
javascript新建标签,判断键盘输入,以及判断焦点(示例代码)
Nov 25 Javascript
javascript移出节点removeChild()使用介绍
Apr 03 Javascript
js操作滚动条事件实例
Jan 29 Javascript
JavaScript如何实现在文本框(密码框)输入提示语
Dec 25 Javascript
AngularJs directive详解及示例代码
Sep 01 Javascript
Yarn的安装与使用详细介绍
Oct 25 Javascript
jQuery实现文字自动横移
Jan 08 Javascript
JavaScript错误处理操作实例详解
Jan 04 Javascript
ES6之Proxy的get方法详解
Oct 11 Javascript
vue.js this.$router.push获取不到params参数问题
Mar 03 Javascript
vue2路由基本用法实例分析
Mar 06 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模拟HTTP认证
2006/10/09 PHP
Zend Guard使用指南及问题处理
2015/01/07 PHP
在Laravel 的 Blade 模版中实现定义变量
2019/10/14 PHP
多广告投放代码 推荐
2006/11/13 Javascript
jquery CSS选择器笔记
2010/03/29 Javascript
JavaScript初学者需要了解10个小技巧
2010/08/25 Javascript
JQuery操作三大控件(下拉,单选,复选)的方法
2013/08/06 Javascript
原生javascript模仿win8等待提示圆圈进度条
2014/04/24 Javascript
jquery进行数组遍历如何跳出当前的each循环
2014/06/05 Javascript
jQuery使用removeClass方法删除元素指定Class的方法
2015/03/26 Javascript
50 个 jQuery 插件可将你的网站带到另外一个高度
2016/04/26 Javascript
JS面试题---关于算法台阶的问题
2016/07/26 Javascript
JS框架之vue.js(深入三:组件1)
2016/09/29 Javascript
Javascript 创建类并动态添加属性及方法的简单实现
2016/10/20 Javascript
详解angular如何调用HTML字符串的方法
2018/06/30 Javascript
JS中的两种数据类型及实现引用类型的深拷贝的方法
2018/08/12 Javascript
vue移动端城市三级联动组件使用详解
2019/07/26 Javascript
微信小程序之 catalog 切换实现解析
2019/09/12 Javascript
Vue中keep-alive组件作用详解
2020/02/04 Javascript
JSONP 的原理、理解 与 实例分析
2020/05/16 Javascript
[28:48]《真视界》- 2017年国际邀请赛
2017/09/27 DOTA
Python检测字符串中是否包含某字符集合中的字符
2015/05/21 Python
Python找出文件中使用率最高的汉字实例详解
2015/06/03 Python
Python的Flask框架标配模板引擎Jinja2的使用教程
2016/07/12 Python
在 Python 应用中使用 MongoDB的方法
2017/01/05 Python
Python简单生成随机姓名的方法示例
2017/12/27 Python
解决python 3 urllib 没有 urlencode 属性的问题
2019/08/22 Python
python 实现分组求和与分组累加求和代码
2020/05/18 Python
Django+Celery实现动态配置定时任务的方法示例
2020/05/26 Python
HTML5实时语音通话聊天MP3压缩传输3KB每秒
2019/08/28 HTML / CSS
装修公司管理制度
2015/08/05 职场文书
高一化学教学反思
2016/02/22 职场文书
中学生打架检讨书之500字
2019/08/06 职场文书
详解Python 3.10 中的新功能和变化
2021/04/28 Python
golang协程池模拟实现群发邮件功能
2021/05/02 Golang
Python 处理表格进行成绩排序的操作代码
2021/07/26 Python