Implementing a simple timer in JavaScript

Implementing a simple timer in JavaScript

This article example shares the specific code of JavaScript to implement a simple timer for your reference. The specific content is as follows 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Timer</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">Timer</h2>
    <div id="showNum" align="center">
        0
    </div>
    <br>
    <br>
    <div class="butDiv">&nbsp&nbsp&nbsp&nbsp
        <button type="button" id="start">Start</button>
        &nbsp
        <button type="button" id="stop">Stop</button>
        &nbsp
        <button type="button" id="reset">Reset</button>
        &nbsp
    </div>
</div>
<script>
    //Define the displayed time let int = null;
    /**
     * Start click event */
    document.getElementById("start").addEventListener('click', function () {
        if (int == null) {
            //Set the timer//Execute every 2 milliseconds parameter 1 int = setInterval(startNum, 1000);
        }
    });
    /**
     * Stop click event */
    document.getElementById("stop").addEventListener('click', function () {
        // Clear the timer,
        clearInterval(int);
        int = null;
    });
    /**
     * Reset click event */
    let num = 0;
    document.getElementById("reset").addEventListener('click', function () {
        if (int == null) {
            num = 0;
            //Change the time to 0
            document.getElementById("showNum").innerHTML = num;
        }
    });

    function startNum() {
        num++;
        //Continuously change time document.getElementById("showNum").innerHTML = num;
    }
</script>
</body>
</html>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:
  • Vue.js implements simple timer function
  • JS implements a stopwatch timer
  • JS uses setInterval timer to implement the 10-second challenge
  • JavaScript implements a good-looking stopwatch timer
  • JavaScript setInterval() vs setTimeout() Timers
  • js implements built-in timer
  • Detailed explanation of JavaScript timer and button effect settings

<<:  Explanation of the usage of replace and replace into in MySQL

>>:  Introduction to ApplicationHost.config (IIS storage configuration area file)

Recommend

8 ways to manually and automatically backup your MySQL database

As a popular open source database management syst...

Native JS object-oriented typing game

This article shares the specific code of JS objec...

Detailed explanation of EXT series file system formats in Linux

Linux File System Common hard disks are shown in ...

Should I use UTF-8 or GB2312 encoding when building a website?

Often when we open foreign websites, garbled char...

Full steps to create a high-performance index in MySQL

Table of contents 1. Index Basics 1. Types of Ind...

React native realizes the monitoring gesture up and down pull effect

React native implements the monitoring gesture to...

Specific use of the wx.getUserProfile interface in the applet

Recently, WeChat Mini Program has proposed adjust...

MySQL 8.0.16 winx64 installation and configuration method graphic tutorial

I just started learning about databases recently....

Docker-compose creates a bridge, adds a subnet, and deletes a network card

1. Create a docker network card [root@i ~]# brctl...

Summary of some practical little magic in Vue practice

How can you forget lazy loading of routes that al...

Use of Linux cal command

1. Command Introduction The cal (calendar) comman...

Examples of adding, modifying, deleting and clearing values ​​in MySQL database

3. MySQL Data Management The first method: not re...

Node.js sends emails based on STMP protocol and EWS protocol

Table of contents 1 Node.js method of sending ema...

CSS3 realizes the effect of triangle continuous enlargement

1. CSS3 triangle continues to zoom in special eff...

Introduction to MySQL <> and <=> operators

<> Operator Function: Indicates not equal t...