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 相关文章推荐
简易js代码实现计算器操作
Apr 15 Javascript
js 数值转换为3位逗号分隔的示例代码
Feb 19 Javascript
jquery 取子节点及当前节点属性值的方法
Aug 24 Javascript
jQuery的css() 方法使用指南
May 03 Javascript
JavaScript类型系统之Object详解
Jan 07 Javascript
javascript中获取class的简单实现
Jul 12 Javascript
从零学习node.js之mysql数据库的操作(五)
Feb 24 Javascript
原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】
May 27 Javascript
详解小程序原生使用ES7 async/await语法
Aug 06 Javascript
Vue插件打包与发布的方法示例
Aug 20 Javascript
jQuery 图片查看器插件 Viewer.js用法简单示例
Apr 04 jQuery
多种类型jQuery网页验证码插件代码实例
Jan 09 jQuery
React实现动效弹窗组件
关于React Native 无法链接模拟器的问题
React-vscode使用jsx语法的问题及解决方法
vue3使用vue-router的完整步骤记录
一篇文章学会Vue中间件管道
Jun 20 #Vue.js
Ajax 的初步实现(使用vscode+node.js+express框架)
帮你提高开发效率的JavaScript20个技巧
You might like
php 截取字符串并以零补齐str_pad() 函数
2011/05/07 PHP
WordPress中给媒体文件添加分类和标签的PHP功能实现
2015/12/31 PHP
解决laravel5中auth用户登录其他页面获取不到登录信息的问题
2019/10/08 PHP
js输入框邮箱自动提示功能代码实现
2013/12/10 Javascript
javascript操作字符串的原生方法
2014/12/22 Javascript
自定义jQuery插件方式实现强制对象重绘的方法
2015/03/23 Javascript
页面内容排序插件jSort使用方法
2015/10/10 Javascript
关于JavaScript中事件绑定的方法总结
2016/10/26 Javascript
JS简单封装的图片无缝滚动效果示例【测试可用】
2017/03/22 Javascript
nodejs async异步常用函数总结(推荐)
2017/11/17 NodeJs
解决jquery的ajax调取后端数据成功却渲染失败的问题
2018/08/08 jQuery
ES6中Promise的使用方法实例总结
2020/02/18 Javascript
vue根据条件不同显示不同按钮的操作
2020/08/04 Javascript
[04:12]第二届DOTA2亚洲邀请赛选手传记-Newbee.Sccc
2017/04/03 DOTA
[01:04:05]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
[01:16:16]DOTA2-DPC中国联赛定级赛 RNG vs Phoenix BO3第二场 1月8日
2021/03/11 DOTA
Python中的类与对象之描述符详解
2015/03/27 Python
python常见排序算法基础教程
2017/04/13 Python
Python3 实现随机生成一组不重复数并按行写入文件
2018/04/09 Python
Python实现获取本地及远程图片大小的方法示例
2018/07/21 Python
Python中字符串List按照长度排序
2019/07/01 Python
DJANGO-URL反向解析REVERSE实例讲解
2019/10/25 Python
Python figure参数及subplot子图绘制代码
2020/04/18 Python
DjangoWeb使用Datatable进行后端分页的实现
2020/05/18 Python
Django模型验证器介绍与源码分析
2020/09/08 Python
Python的Tqdm模块实现进度条配置
2021/02/24 Python
纯CSS3实现手风琴风格菜单具体步骤
2013/05/06 HTML / CSS
拥有超过850家商店的美国在线派对商店:Party City
2018/10/21 全球购物
安全员岗位职责
2013/11/11 职场文书
医院护士专业个人的求职信
2013/12/09 职场文书
师范教师大学生职业生涯规划范文
2014/01/05 职场文书
土建专业毕业生自荐书
2014/07/04 职场文书
会计专业求职信
2014/08/10 职场文书
党员创先争优心得体会
2014/09/11 职场文书
2014年学生资助工作总结
2014/12/18 职场文书
通过Python把学姐照片做成拼图游戏
2022/02/15 Python