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

Synchronize the full and incremental data of a specific MySQL table to the message queue - Solution

Table of contents 1. Original demand 2. Solution ...

MySQL bypasses granting information_schema objects and reports ERROR 1044 (4200) error

This question is a discussion among netizens in a...

Vue implements websocket customer service chat function

This article mainly introduces how to implement a...

Key issues and solutions for web page access speed

<br /> The website access speed can directly...

Detailed steps for developing Java payment interface for Alipay

Table of contents first step Step 2 Step 3 Step 4...

Use Python to connect to MySQL database using the pymysql module

Install pymysql pip install pymysql 2|0Using pymy...

How to add a pop-up bottom action button for element-ui's Select and Cascader

As shown in the figure below, it is a common desi...

Method of iframe adaptation in web responsive layout

Problem <br />In responsive layout, we shou...

A comprehensive analysis of what Nginx can do

Preface This article only focuses on what Nginx c...

The perfect solution for forgetting the password in mysql8.0.19

Recommended reading: MySQL 8.0.19 supports accoun...

A detailed introduction to Linux memory management and addressing

Table of contents 1. Concept Memory management mo...

Detailed steps to deploy lnmp under Docker

Table of contents Pull a centos image Generate ng...

Detailed explanation of common methods of JavaScript String

Table of contents 1. charAt grammar parameter ind...

MySQL 5.6.27 Installation Tutorial under Linux

This article shares the installation tutorial of ...

Example of disabling browser cache configuration in Vue project

When releasing a project, you will often encounte...