脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js简单计时器

JavaScript实现简单计时器

 更新时间：2021年06月22日 09:13:44   作者：妄痴梦中  
这篇文章主要为大家详细介绍了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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • 详谈for循环里面的break和continue语句

    详谈for循环里面的break和continue语句

    下面小编就为大家带来一篇详谈for循环里面的break和continue语句。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • JS可以控制样式的名称写法一览

    JS可以控制样式的名称写法一览

    这篇文章主要介绍了JS可以控制样式的名称写法，有需要的朋友可以参考一下
    2014-01-01
  • 详解js中常用4个基础算法

    详解js中常用4个基础算法

    本文主要介绍了JS中常用的四个基础算法，主要介绍了冒泡排序，选择排序，插入排序和快速排序这四种算法,需要的朋友可以参考下
    2023-05-05
  • 分享自己用JS做的扫雷小游戏

    分享自己用JS做的扫雷小游戏

    引用了jQuery，节省了很多鼠标点击上的判断。界面显然都是照搬Windows的扫雷啦，详细的内容注释里都有，感兴趣的朋友参考下吧
    2016-02-02
  • 容易被忽略的JS脚本特性

    容易被忽略的JS脚本特性

    容易被忽略的JS脚本特性，学习js的朋友可以参考下。
    2011-09-09
  • layui动态表头的实现代码

    layui动态表头的实现代码

    这篇文章主要介绍了layui动态表头的实现代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • JavaScript实现基于十进制的四舍五入实例

    JavaScript实现基于十进制的四舍五入实例

    这篇文章主要介绍了JavaScript实现基于十进制的四舍五入的方法,实例分析了javascript针对数值判断与相关运算技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07
  • JS实现链表数据结构的代码详解

    JS实现链表数据结构的代码详解

    很多前端的同学对数据结构和算法这块没有太多的概念,很多leetcode的题目看不懂,有时候可能看了题解也不知道是什么意思,这篇文章咱们来简单的谈一谈链表,文中给大家介绍了JS实现链表数据结构的示例代码,需要的朋友可以参考下
    2024-01-01
  • Bootstrap DateTime Picker日历控件简单应用

    Bootstrap DateTime Picker日历控件简单应用

    这篇文章主要介绍了Bootstrap DateTime Picker日历控件的简单应用，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-03-03
  • JavaScript获取URL中参数querystring的方法详解

    JavaScript获取URL中参数querystring的方法详解

    这篇文章先给大家介绍了JavaScript获取URL中参数querystring的方法，而后有详解介绍了Location对象的属性和，Location对象的方法，对大家的理解很有帮助，有需要的朋友们可以参考借鉴，下面来一起看看吧。
    2016-10-10

最新评论