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

MySQL 5.0.96 for Windows x86 32-bit green simplified version installation tutorial

MySQL 5.0 has become a classic because of its few...

Detailed explanation of MySQL combined index and leftmost matching principle

Preface I have seen many articles about the leftm...

How to solve the timeout during pip operation in Linux

How to solve the timeout problem when pip is used...

The whole process of node.js using express to automatically build the project

1. Install the express library and generator Open...

CSS tips for controlling animation playback and pause (very practical)

Today I will introduce a very simple trick to con...

Sample code for displaying reminder dots in the upper left or upper right corner using CSS3

Effect picture (if you want a triangle, please cl...

Using Apache ab to perform http performance testing

Mac comes with Apache environment Open Terminal a...

Introduction to adding new users to MySql, creating databases for users, and assigning permissions to users

1. Add a new user Only allow local IP access crea...

Solutions to browser interpretation differences in size and width and height in CSS

Let’s look at an example first Copy code The code ...

Practice of multi-layer nested display of element table

There is a requirement for a list containing mult...

How to install mysql database in deepin 2014 system

Deepin 2014 download and installation For downloa...

Detailed explanation of the process of zabbix monitoring sqlserver

Let's take a look at zabbix monitoring sqlser...

Vue implements local storage add, delete and modify functions

This article example shares the specific code of ...

Examples of using html unordered list tags and ordered list tags

1. Upper and lower list tags: <dl>..</dl...

CentOS7 deploys version 19 of docker (simple, you can follow it)

1. Install dependency packages [root@localhost ~]...