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

Example code for implementing complex table headers in html table

Use HTML to create complex tables. Complex tables...

About the problem of offline installation of Docker package on CentOS 8.4

The virtual machine used is CentOS 8.4, which sim...

Detailed tutorial on installing pxc cluster with docker

Table of contents Preface Preliminary preparation...

Let's talk about the difference between containers and images in Docker

What is a mirror? An image can be seen as a file ...

HTML uses form tags to implement the registration page example code

Case Description: - Use tables to achieve page ef...

Vue+el-table realizes merging cells

This article example shares the specific code of ...

MySQL Series Database Design Three Paradigm Tutorial Examples

Table of contents 1. Knowledge description of the...

Example of how to adapt the Vue project to the large screen

A brief analysis of rem First of all, rem is a CS...

JavaScript to achieve magnifying glass effect

This article shares the specific code for JavaScr...

JavaScript to implement a simple shopping form

This article shares the specific code of JavaScri...

MySQL data type selection principles

Table of contents Small but beautiful Keep it sim...

Detailed explanation of MySql 5.7.17 free installation configuration tutorial

1. Download the mysql-5.7.17-winx64.zip installat...

Detailed explanation of jQuery's copy object

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

Detailed explanation of Vue-router nested routing

Table of contents step 1. Configure routing rules...

Docker implements cross-host container communication based on macvlan

Find two test machines: [root@docker1 centos_zabb...