JavaScript to implement dynamic digital clock

JavaScript to implement dynamic digital clock

This article shares the specific code for implementing a dynamic digital clock with JavaScript for your reference. The specific content is as follows

Achieve results

Code Implementation

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;

        }

        #box {
            width: 1000px;
            height: 300px;
            background-image:url(1.jpg);
            line-height: 300px;
            text-align: center;
            font-size: 50px;
            font-weight: 500;
            margin: 100px auto;

        }
    </style>

</head>

<body>
    <div id="box"></div>
    <script>
        let box = document.getElementById('box')

        //Add zeros to the number less than 10 let addZero = val => val < 10 ? '0' + val : val

        //Convert the Arabic numerals of the week into Chinese characters // Week mapping table let trans = val => {
            let obj = {
                0: 'day',
                1: '一',
                2: 'Two',
                3: 'three',
                4: 'Four',
                5: 'Five',
                6: 'Six'
            }
            return obj[val]
        }
        setTime ()
        //Method to get time function setTime() {
            let time = new Date();
            let year = time.getFullYear(); // Get the year let month = time.getMonth() + 1; // Get the month (it is from 0 to 11, so we have to add 1 to it)
            let date = time.getDate(); // Get the datelet day = time.getDay(); // Get the day of the week (0 is Sunday)
            let hour = time.getHours(); // Get hourslet min = time.getMinutes(); // Get minuteslet sec = time.getSeconds(); // Get secondslet value = year + 'year' + addZero(month) + 'month' + addZero(date) + 'day of week' + trans(day) + ' '+addZero(hour) +
                'hour' + addZero(min) + 'minute' + addZero(sec) + 'second'
            // Put all the time together box.innerText = value
            // console.log(value)
            //Insert the spliced ​​time into the page}
        // Let the timer execute the setTime method once every second (this is the core of implementing the clock)
        setInterval(setTime, 1000)
    </script>
</body>

</html>

material

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:
  • JavaScript to achieve digital clock effect
  • Vue.js implements a digital clock function example with date and week
  • JS+CSS to achieve scrolling digital clock effect
  • js realizes a simple digital clock effect
  • Use JS to display the countdown digital clock effect
  • JavaScript digital clock example to achieve scrolling effect
  • JS realizes the countdown digital clock effect [with example code]
  • Web page countdown digital clock effect implemented by JS
  • JavaScript digital clock example sharing
  • HTML5 canvas js (digital clock) example code

<<:  Use the ip netns command in Linux to isolate the network port and configure the IP address

>>:  MySQL 5.7.23 version installation tutorial and configuration method

Recommend

Three common style selectors in html css

1: Tag selector The tag selector is used for all ...

mysql IS NULL using index case explanation

Introduction The use of is null, is not null, and...

Detailed explanation of Docker container network port configuration process

Exposing network ports In fact, there are two par...

VMware Workstation 14 Pro installation and activation graphic tutorial

This article shares the installation and activati...

Detailed explanation of JavaScript progress management

Table of contents Preface question principle test...

CSS delivery address parallelogram line style example code

The code looks like this: // Line style of the pa...

Zookeeper request timeout problem in dubbo: configuration of mybatis+spring connecting to mysql8.0.15

I am going to review Java these two days, so I wr...

jQuery solves the problem of not executing the original event after adding elements

Let's take a look at my error code first. htm...

CSS3 implements the sample code of NES game console

Achieve resultsImplementation Code html <input...

MySQL installation and configuration tutorial for win10 free installation version

I searched a lot online and found that many of th...

Detailed explanation of MySQL deadlock and database and table sharding issues

Record the problem points of MySQL production. Bu...

Use of TypeScript Generics

Table of contents 1. Easy to use 2. Using generic...

Using jQuery to implement the carousel effect

This article shares the specific code for impleme...

How to achieve seamless token refresh

Table of contents 1. Demand Method 1 Method 2 Met...

Research on the Input Button Function of Type File

<br />When uploading on some websites, a [Se...