JS realizes picture digital clock

JS realizes picture digital clock

This article example shares the specific code of JS to realize the picture digital clock for your reference. The specific content is as follows

First, this is the picture we prepared 

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
  
 </style>
</head>
<body>
 <div>
  <img src="img/0.png" alt="">
  <img src="img/0.png" alt="">
  <img src="img/10.png" alt="">
  <img src="img/0.png" alt="">
  <img src="img/0.png" alt="">
  <img src="img/10.png" alt="">
  <img src="img/0.png" alt="">
  <img src="img/0.png" alt="">
 
 </div>
 
 <script type="text/javascript">
    //Function function get(){
      //Get the page img
      var img = document.getElementsByTagName('img');
      //Get time var date=new Date();
      var hour=date.getHours();
      var minute=date.getMinutes();
      var secind=date.getSeconds();
      //Fill in 0
      if(hour<10){
       hour='0'+hour;
      }else if(minute<0){
       minute='0'+minute;
      }else if (secind) {
       secind='0'+secind;
      }
    // string concatenation img[0].src='img/'+parseInt(hour/10)+'.png';
    img[1].src='img/'+hour%10+'.png';
    img[3].src='img/'+parseInt(minute/10)+'.png';
    img[4].src='img/'+minute%10+'.png';
    img[6].src='img/'+parseInt(secind/10)+'.png';
    img[7].src='img/'+secind%10+'.png';
 
    }
    get(); 
    setInterval(get,1000);
//Call to refresh every second</script>
</body>
</html>

Final implementation

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:
  • js clock flip effect code sharing
  • js to realize real-time clock of pictures
  • js realizes a simple digital clock effect
  • JavaScript to implement the compass clock of Tik Tok
  • HTML5 canvas js (digital clock) example code
  • Five steps to easily implement JavaScript HTML clock effect
  • A simple clock effect js implementation code
  • JavaScript to implement a simple clock example code
  • Realizing dynamic clock effects based on javascript
  • js implements a clock with flip animation pictures

<<:  Detailed explanation of the murder caused by a / slash in Nginx proxy_pass

>>:  Solution to the problem of mysql master-slave switch canal

Recommend

Working principle and implementation method of Vue instruction

Introduction to Vue The current era of big front-...

Introduction to the usage of common XHTML tags

There are many tags in XHTML, but only a few are ...

10 tips for designing useful, easy-to-use web applications

Here are 10 tips on how to design better-usable w...

MySQL helps you understand index pushdown in seconds

Table of contents 1. The principle of index push-...

HTML code to add quantity badge to message button

HTML code: <a onclick="goMessage();"...

How to convert Chinese into UTF-8 in HTML

In HTML, the Chinese phrase “學好好學” can be express...

Detailed explanation of how to cleanly uninstall Docker

First, the server environment information: Reason...

Detailed explanation of the characteristics, differences and conversion of px, em, rem and pt in CSS

Concept introduction : 1. px (pixel): It is a vir...

Mysql sql slow query monitoring script code example

1. Modify my.cnf #The overall effect is that both...

JavaScript to achieve full screen page scrolling effect

After I finished reading JavaScript DOM, I had a ...

CSS to achieve Cyberpunk 2077 style visual effects in a few steps

background Before starting the article, let’s bri...

How to reset the root password of Mysql in Windows if you forget it

My machine environment: Windows 2008 R2 MySQL 5.6...

Ajax responseText parses json data case study

Solve the problem that the responseText returned ...

WeChat applet picker multi-column selector (mode = multiSelector)

Table of contents 1. Effect diagram (multiple col...

Some parameter descriptions of text input boxes in web design

<br />In general guestbooks, forums and othe...