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 打印内容方法小结
Nov 04 Javascript
jQuery 树形结构的选择器
Feb 15 Javascript
jQuery表单验证插件formValidator(改进版)
Feb 03 Javascript
往光标所在位置插入值的js代码
Sep 22 Javascript
js中typeof的用法汇总
Dec 12 Javascript
Jquery Easyui验证组件ValidateBox使用详解(20)
Dec 18 Javascript
如何在Angular2中使用jQuery及其插件的方法
Feb 09 Javascript
微信小程序 上传头像的实例详解
Oct 27 Javascript
Vue按需加载的具体实现
Dec 02 Javascript
JavaScript引用类型Array实例分析
Jul 24 Javascript
vue实现的树形结构加多选框示例
Feb 02 Javascript
Javascript类型判断相关例题及解析
Aug 26 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中的加密功能
2006/10/09 PHP
php 来访国内外IP判断代码并实现页面跳转
2009/12/18 PHP
php学习之 认清变量的作用范围
2010/01/26 PHP
PHP XML error parsing SOAP payload on line 1
2010/06/17 PHP
php中执行系统命令的方法
2015/03/21 PHP
从JavaScript 到 JQuery (1)学习小结
2009/02/12 Javascript
jQuery 1.4 15个你应该知道的新特性(译)
2010/01/24 Javascript
jQuery asp.net 用json格式返回自定义对象
2010/04/07 Javascript
使用原生javascript创建通用表单验证——更锋利的使用dom对象
2011/09/13 Javascript
原生js做的手风琴效果的导航菜单
2013/11/08 Javascript
jquery实现邮箱自动补全功能示例分享
2014/02/17 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
2015/04/30 Javascript
JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
2016/08/24 Javascript
Underscore之Array_动力节点Java学院整理
2017/07/10 Javascript
解决webpack+Vue引入iView找不到字体文件的问题
2018/09/28 Javascript
解决ng-repeat产生的ng-model中取不到值的问题
2018/10/02 Javascript
Python 正则表达式入门(初级篇)
2016/12/07 Python
解决pytorch-yolov3 train 报错的问题
2020/02/18 Python
python编程进阶之类和对象用法实例分析
2020/02/21 Python
Python通过正则库爬取淘宝商品信息代码实例
2020/03/02 Python
Python数据相关系数矩阵和热力图轻松实现教程
2020/06/16 Python
使用css3制作动感导航条示例
2014/01/26 HTML / CSS
Canvas图片分割效果的实现
2019/07/29 HTML / CSS
单身旅行者的单身假期:Just You
2018/04/08 全球购物
百度软件工程师职位
2013/02/14 面试题
优秀老员工获奖感言
2014/02/15 职场文书
公务员政审个人鉴定
2014/02/25 职场文书
个人委托书格式
2014/04/04 职场文书
会计专业毕业生求职信
2014/07/04 职场文书
中职招生先进个人材料
2014/08/31 职场文书
信用卡结清证明怎么写
2014/09/13 职场文书
反腐倡廉观后感
2015/06/08 职场文书
聘任书格式及范文
2015/09/21 职场文书
go结构体嵌套的切片数组操作
2021/04/28 Golang
Python3中PyQt5简单实现文件打开及保存
2021/06/10 Python
SQL Server删除表中的重复数据
2022/05/25 SQL Server