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

Detailed explanation of Linux mpstat command usage

1. mpstat command 1.1 Command Format mpstat [ -A ...

Docker+daocloud realizes automatic construction and deployment of front-end projects

Automated project deployment is more commonly use...

Docker MQTT installation and use tutorial

Introduction to MQTT MQTT (Message Queuing Teleme...

Common commands for mysql authorization, startup, and service startup

1. Four startup methods: 1.mysqld Start mysql ser...

A brief discussion on the CSS overflow mechanism

Why do you need to learn CSS overflow mechanism i...

Detailed explanation of this pointing in JS arrow function

Arrow function is a new feature in ES6. It does n...

Use ab tool to perform API stress test on the server

Table of contents 1 A brief introduction to syste...

18 common commands in MySQL command line

In daily website maintenance and management, a lo...

Detailed configuration of Nginx supporting both Http and Https

It is almost a standard feature for websites nowa...

CSS3 property line-clamp controls the use of text lines

Description: Limit the number of lines of text di...

Detailed explanation of software configuration using docker-compose in linux

Preface This article will share some docker-compo...

Vue-CLI multi-page directory packaging steps record

Page directory structure Note that you need to mo...

WeChat applet implements login interface

The login interface of WeChat applet is implement...

MySQL complete collapse query regular matching detailed explanation

Overview In the previous chapter, we learned abou...

How to upload the jar package to nexus via the web page

When using Maven to manage projects, how to uploa...