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: