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

Best Practices for Implementing Simple Jira Projects with React+TS

A set of projects for training react+ts Although ...

How to periodically clean up images that are None through Jenkins

Preface In the process of continuous code deliver...

Detailed explanation of the problem of mixed use of limit and sum functions in MySQL

Preface Today, after synchronizing the order data...

Sample code for installing Jenkins using Docker

Two problems that are easy to encounter when inst...

Steps to build a Docker image using Dockerfile

Dockerfile is a text file that contains instructi...

Detailed steps for building a React application with a Rails API

Table of contents Backend: Rails API part Front-e...

How to change the terminal to a beautiful command line prompt in Ubuntu 18

I reinstalled VMware and Ubuntu, but the command ...

Tutorial on using iostat command in Linux

Preface It is said that if the people doing opera...

Vue form input binding v-model

Table of contents 1.v-model 2. Binding properties...

Detailed explanation of Vue's live broadcast function

Recently, the company happened to be doing live b...

Detailed explanation of calculated properties, monitoring properties and life cycle in Vue.js

Table of contents Preface Computed properties Int...

Detailed steps for Spring Boot packaging and uploading to Docker repository

Important note: Before studying this article, you...

Implementation steps for Docker deployment of SpringBoot applications

Table of contents Preface Dockerfile What is a Do...

Learn how to use JavaScript's new Element Traversal property to traverse child elements

Table of contents 1. ChildNodes attribute travers...

Vue3 encapsulates the side navigation text skeleton effect component

Vue3 project encapsulation side navigation text s...