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 相关文章推荐
web开发人员学习jQuery的6大理由及jQuery的优势介绍
Jan 03 Javascript
javascript中[]和{}对象使用介绍
Mar 20 Javascript
jquery必须知道的一些常用特效方法及使用示例(整理)
Jun 24 Javascript
JavaScript获得url查询参数的方法
Jul 02 Javascript
JS+CSS实现分类动态选择及移动功能效果代码
Oct 19 Javascript
JS函数的几种定义方式分析
Dec 17 Javascript
Vue实现一个无限加载列表功能
Nov 13 Javascript
JS解惑之Object中的key是有序的么
May 06 Javascript
JavaScript 作用域scope简单汇总
Oct 23 Javascript
用Angular实现一个扫雷的游戏示例
May 15 Javascript
jquery插件实现图片悬浮
Apr 16 jQuery
vue @ ~ 相对路径 路径别名设置方式
Jun 05 Vue.js
React实现动效弹窗组件
关于React Native 无法链接模拟器的问题
React-vscode使用jsx语法的问题及解决方法
vue3使用vue-router的完整步骤记录
一篇文章学会Vue中间件管道
Jun 20 #Vue.js
Ajax 的初步实现(使用vscode+node.js+express框架)
帮你提高开发效率的JavaScript20个技巧
You might like
php url地址栏传中文乱码解决方法集合
2010/06/25 PHP
windows8.1下Apache+Php+MySQL配置步骤
2015/10/30 PHP
WordPress中用于获取文章作者与分类信息的方法整理
2015/12/17 PHP
Zend Framework实现自定义过滤器的方法
2016/12/09 PHP
PHP addAttribute()函数讲解
2019/02/03 PHP
PHP封装mysqli基于面向对象的mysql数据库操作类与用法示例
2019/02/25 PHP
JScript内置对象Array中元素的删除方法
2007/03/08 Javascript
jquery学习笔记二 实现可编辑的表格
2010/04/09 Javascript
基于JQuery的一句代码实现表格的简单筛选
2010/07/26 Javascript
JQuery+DIV自定义滚动条样式的具体实现
2013/06/25 Javascript
js简单实现用户注册信息的校验代码
2013/11/15 Javascript
js实现最短的XML格式化工具实例
2015/03/12 Javascript
轻松掌握JavaScript代理模式
2016/08/26 Javascript
javascript创建对象的3种方法
2016/11/02 Javascript
Vue无限滑动周选择日期的组件的示例代码
2018/07/18 Javascript
微信小程序实现图片滚动效果示例
2018/12/05 Javascript
jQuery实现简单QQ聊天框
2020/08/27 jQuery
Vue+element+cookie记住密码功能的简单实现方法
2020/09/20 Javascript
Python正则表达式知识汇总
2017/09/22 Python
Python基础语言学习笔记总结(精华)
2017/11/14 Python
PyQt5重写QComboBox的鼠标点击事件方法
2019/06/25 Python
libreoffice python 操作word及excel文档的方法
2019/07/04 Python
微信小程序python用户认证的实现
2019/07/29 Python
使用Matplotlib 绘制精美的数学图形例子
2019/12/13 Python
德国机车企业:FC-Moto
2017/10/27 全球购物
澳大利亚先进的皮肤和激光诊所购物网站:Soho Skincare
2018/10/15 全球购物
新加坡一家在线男士皮具品牌:Faire Leather Co.
2019/12/01 全球购物
用缩写的指针比较"if(p)" 检查空指针是否可靠?如果空指针的内部表达不是0会怎么样?
2014/01/05 面试题
学校后勤人员职责
2013/12/27 职场文书
大学生期末自我鉴定
2014/02/01 职场文书
大学生活动策划方案
2014/02/10 职场文书
产品质量保证书
2014/04/29 职场文书
2015年企业员工工作总结范文
2015/05/21 职场文书
会计试用期工作总结2015
2015/05/28 职场文书
环保宣传语大全
2015/07/13 职场文书
nginx部署多前端项目的几种方法
2021/05/25 Servers