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

40 fonts recommended for famous website logos

Do you know what fonts are used in the logo desig...

Linux Jenkins configuration salve node implementation process diagram

Preface: Jenkins' Master-Slave distributed ar...

The MySql 8.0.16 version installation prompts that "UTF8B4" is used instead of "UTF8B3"

When installing in MySQL 8.0.16, some errors may ...

3 solutions to make your website support old versions of IE6, 7, 8, and 9 browsers

Although Microsoft has done a lot of research and ...

Join operation in Mysql

Types of joins 1. Inner join: The fields in the t...

VMWare15 installs Mac OS system (graphic tutorial)

Installation Environment WIN10 VMware Workstation...

In-depth understanding of MySQL master-slave replication thread state transition

Preface The basic principle of MySQL master-slave...

Detailed explanation of the basic use of centos7 firewall in linux

1. Basic use of firewalld start up: systemctl sta...

Detailed code for building a multi-person video chat service based on webrtc on Ubuntu

WebRTC, which stands for Web Real-Time Communicat...

Vue component encapsulates sample code for uploading pictures and videos

First download the dependencies: cnpm i -S vue-uu...

JavaScript to achieve progress bar effect

This article example shares the specific code of ...

Specific use of Docker anonymous mount and named mount

Table of contents Data volume Anonymous and named...

Summary of pitfalls encountered in installing mysql and mysqlclient on centos7

1. Add MySQL Yum repository MySQL official websit...

Comprehensive analysis of prototypes, prototype objects, and prototype chains in js

Table of contents Understanding Prototypes Unders...

How to use Nginx to solve front-end cross-domain problems

Preface When developing static pages, such as Vue...