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

Implementation of tomcat deployment project and integration with IDEA

Table of contents 3 ways to deploy projects with ...

JavaScript's unreliable undefined

undefined In JavaScript, if we want to determine ...

Detailed explanation of JavaScript object conversion to primitive value

Table of contents Object.prototype.valueOf() Obje...

A simple example of how to implement fuzzy query in Vue

Preface The so-called fuzzy query is to provide q...

Detailed explanation of Vue mixin

Table of contents Local Mixin Global Mixins Summa...

Solution to 404 error when downloading apk file from IIS server

Recently, when using IIS as a server, the apk fil...

Summary of MySQL basic common commands

Table of contents MySQL basic common commands 1. ...

Detailed explanation of the method of comparing dates in MySQL

If there is a table product with a field add_time...

In-depth reading and practice records of conditional types in TypeScript

Table of contents Using conditional types in gene...

A simple method to regularly delete expired data records in MySQL

1. After connecting and logging in to MySQL, firs...

Solution to MySQL unable to read table error (MySQL 1018 error)

1. Error reproduction I can access the MySQL data...

Docker containers communicate directly through routing to achieve network communication

Overview As for the current default network of Do...

Low-version Druid connection pool + MySQL driver 8.0 causes thread blocking and performance limitation

Table of contents Phenomenon Root Cause Analysis ...

Floating menu, can achieve up and down scrolling effect

The code can be further streamlined, but due to t...

Nginx sample code for implementing dynamic and static separation

In combination with the scenario in this article,...