JavaScript to achieve digital clock effect

JavaScript to achieve digital clock effect

This article example shares the specific code of JavaScript to achieve the digital clock effect for your reference. The specific content is as follows

Rendering

Demand Analysis

1. Get time through date
2. Dynamically obtain time through interval timer setInterval
3. Set the interval of the interval timer setInterval to 1000 milliseconds (1 second) to get the time once
4. For a good-looking style, we use digital pictures instead of numbers.

source code

HTML Part

<div id="div">
 <img src="img/0.png" />
 <img src="img/0.png" />
 <img src="img/0.png" />
 <img src="img/0.png" />
 <img src="img/0.png" />
 <img src="img/0.png" />
 seconds</div>

CSS part

<style>
/*none*/ 
</style>

JavaScript

<script>
 // Requirement: digital clock var date = new Date();
 var imgArr = document.getElementsByTagName('img'); //Get a collection of img pictures var hours, minutes, seconds;
 var time = setInterval(function () {
 date = new Date();
 // Get hours hours = date.getHours();
 
 imgArr[0].src = "img/" + parseInt(hours / 10) + ".png"
 imgArr[1].src = "img/" + hours % 10 + ".png"
 // Get minutes minutes = date.getMinutes();
 imgArr[2].src = "img/" + parseInt(minutes / 10) + ".png"
 imgArr[3].src = "img/" + minutes % 10 + ".png"
 // Get seconds seconds = date.getSeconds();
 imgArr[4].src = "img/" + parseInt(seconds / 10) + ".png"
 imgArr[5].src = "img/" + seconds % 10 + ".png"
 console.log(hours);
 console.log(minutes);
 console.log(seconds);
 }, 1000)
</script>

Total code

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body>
 <div id="div">
 <img src="img/0.png" />
 <img src="img/0.png" />
 <img src="img/0.png" />
 <img src="img/0.png" />
 <img src="img/0.png" />
 <img src="img/0.png" />
 seconds</div>
</body>

</html>
<script>
 // Requirement: digital clock var date = new Date();
 var imgArr = document.getElementsByTagName('img'); //Get a collection of img pictures var hours, minutes, seconds;
 var time = setInterval(function () {
 date = new Date();
 // Get hours hours = date.getHours();
 
 imgArr[0].src = "img/" + parseInt(hours / 10) + ".png"
 imgArr[1].src = "img/" + hours % 10 + ".png"
 // Get minutes minutes = date.getMinutes();
 imgArr[2].src = "img/" + parseInt(minutes / 10) + ".png"
 imgArr[3].src = "img/" + minutes % 10 + ".png"
 // Get seconds seconds = date.getSeconds();
 imgArr[4].src = "img/" + parseInt(seconds / 10) + ".png"
 imgArr[5].src = "img/" + seconds % 10 + ".png"
 }, 1000)
</script>

Images used:

Since you don't have pictures, directly copying the code will not show the effect. You can find a few pictures to replace them and modify them slightly. As long as you can understand the code, there will be no problem in modifying it.

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 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
  • JavaScript to implement dynamic digital clock

<<:  Detailed explanation of CentOS configuration of Nginx official Yum source

>>:  4 Ways to Quickly Teach Yourself Linux Commands

Recommend

Vant+postcss-pxtorem implements browser adaptation function

Rem layout adaptation The styles in Vant use px a...

Detailed steps to install 64-bit Ubuntu system and Docker tool on Raspberry Pi 3B+

If you want to install some 64-bit applications (...

Interview questions: The difference between the Holy Grail layout and the double-wing layout

Preface Today I will share with you a holy grail ...

JavaScript design pattern chain of responsibility pattern

Table of contents Overview Code Implementation Pa...

How to process blob data in MySQL

The specific code is as follows: package epoint.m...

2 reasons why html-css tag style setting does not work

1 CSS style without semicolon ";" 2 Tags...

js date and time formatting method example

js date time format Convert the date and time to ...

Steps to deploy ingress-nginx on k8s

Table of contents Preface 1. Deployment and Confi...

How to implement remote connection for Redis under Linux

After installing Redis on Linux, use Java to conn...

8 Reasons Why You Should Use Xfce Desktop Environment for Linux

For several reasons (including curiosity), I star...

MySQL 8.0.22 installation and configuration graphic tutorial

MySQL8.0.22 installation and configuration (super...

Analysis of slow insert cases caused by large transactions in MySQL

【question】 The INSERT statement is one of the mos...

CSS float (float, clear) popular explanation and experience sharing

I came into contact with CSS a long time ago, but...

Discuss the value of Web standards from four aspects with a mind map

I have roughly listed some values ​​to stimulate ...

Detailed steps to install Sogou input method on Ubuntu 20.04

1. Install Fcitx input framework Related dependen...