How to use JS to implement a simple digital clock

This article mainly introduces how to use JS to implement a simple digital clock, which has certain reference value. Now I share it with you. Friends in need can refer to it

Design ideas:

The digital clock displays the current time through picture numbers, and the URL of the picture to be displayed changes according to the time.

a. Get the current time Date() and convert the current time information into a 6-digit string;

b. Change the image according to the number corresponding to each position of the time string The value of src, so as to replace the displayed image;

Build the HTML foundation and add styles.

<div id="div1">
    <img  src="/static/imghwm/default1.png"  data-src="./数字时钟（1）_files/"  class="lazy"  src=&#39;./数字时钟（1）_files/0.jpg&#39; alt="How to use JS to implement a simple digital clock" >
    <img  src="/static/imghwm/default1.png"  data-src="./数字时钟（1）_files/"  class="lazy"  src=&#39;./数字时钟（1）_files/0.jpg&#39; alt="How to use JS to implement a simple digital clock" >
    :
    <img  src="/static/imghwm/default1.png"  data-src="./数字时钟（1）_files/"  class="lazy"  src=&#39;./数字时钟（1）_files/0.jpg&#39; alt="How to use JS to implement a simple digital clock" >
    <img  src="/static/imghwm/default1.png"  data-src="./数字时钟（1）_files/"  class="lazy"  src=&#39;./数字时钟（1）_files/0.jpg&#39; alt="How to use JS to implement a simple digital clock" >
    :
   <img  src="/static/imghwm/default1.png"  data-src="./数字时钟（1）_files/"  class="lazy"  src=&#39;./数字时钟（1）_files/0.jpg&#39; alt="How to use JS to implement a simple digital clock" >
   <img  src="/static/imghwm/default1.png"  data-src="./数字时钟（1）_files/"  class="lazy"  src=&#39;./数字时钟（1）_files/0.jpg&#39; alt="How to use JS to implement a simple digital clock" >
</div>　

style style

#p1{
    width:50%;
    margin:300px auto;
    background:black;
    }

Get the picture element and current time:

    var op=document.getElementById('p1');    
    var aImg=op.getElementsByTagName('img');    
    var oDate=new Date();    
    var str=oDate.getHours()+oDate.getMinutes()+oDate.getSeconds();

There are two problems here

1. Returned by oDate.getHours() They are all numbers, so it is written as the addition of numbers, not the addition of strings.

　2. When the obtained value is a single digit, the number of strings will be less than 6, which does not meet the initial design requirements.

Code solution to solve the above two problems:

　　var op=document.getElementById('p1');

　　var aImg=op.getElementsByTagName('img');

　　var oDate=new Date();

　　function twoDigitsStr()

　　{

　　if(n<10)

　　{return &#39;0&#39;+n;}

　　else　　{return &#39;&#39;+n;}

　　}

　　var str=twoDigitsStr(oDate.getHours())+twoDigitsStr(oDate.getMinutes())+twoDigitsStr(oDate.getSeconds());

Set the src value of all pictures:

for(var i=0;i<aimg.length><p> Use setInterval() to achieve re-acquisition every 1 second Current time and image src value: </p><pre class='brush:php;toolbar:false;'>    var op=document.getElementById(&#39;p1&#39;);    var aImg=op.getElementsByTagName(&#39;img&#39;);
    
    setInterval(function tick()
    {        var oDate=new Date();        var str=twoDigitsStr(oDate.getHours())+twoDigitsStr(oDate.getMinutes())+twoDigitsStr(oDate.getSeconds());        for(var i=0;i<aImg.length;i++)
        {
            aImg[i].src="./数字时钟（1）_files/"+str.charAt(i)+".jpg";
        }
    }
    
    ,1000);

But there is still a problem. In the initial stage of opening the web page, the display time is 00:00:00. This is because the timer has a characteristic. When the timer is turned on After that, the function inside will not be executed immediately, but will be executed after 1 second. Solution code:

var op=document.getElementById('p1');
var aImg=op.getElementsByTagName('img');
function tick()
{
var oDate=new Date();        
var str=twoDigitsStr(oDate.getHours())+twoDigitsStr(oDate.getMinutes())+twoDigitsStr(oDate.getSeconds());        
for(var i=0;i<aImg.length;i++)
        {
            aImg[i].src="./数字时钟（1）_files/"+str.charAt(i)+".jpg";
        }
    }
        
    setInterval(tick,1000);
    tick();

Question: The function tick in the code setInterval(tick,1000); does not have parentheses, so what is the difference between functions in JS with parentheses and without parentheses?

The complete digital clock production JS code is:

    function twoDigitsStr(n)
    {        if(n<10)
        {return &#39;0&#39;+n;}        else
        {return &#39;&#39;+n;}
    }
window.onload=function()
{    var op=document.getElementById(&#39;p1&#39;);   
var aImg=op.getElementsByTagName(&#39;img&#39;);    
function tick()
    {var oDate=new Date();        
    var str=twoDigitsStr(oDate.getHours())+twoDigitsStr(oDate.getMinutes())+twoDigitsStr(oDate.getSeconds());        for(var i=0;i<aImg.length;i++)
        {
            aImg[i].src="./数字时钟（1）_files/"+str.charAt(i)+".jpg";
        }
    }
        
    setInterval(tick,1000);
    tick(); 
}

Of course, if you have good creative pictures, you can replace the above digital pictures to generate various dazzling digital clock effects. For example:

The above is the entire content of this article. I hope it will be helpful to everyone’s study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Share common extensions for js objects

Share the complete way of Nodejs accessing WeChat JS-SDK process

The above is the detailed content of How to use JS to implement a simple digital clock. For more information, please follow other related articles on the PHP Chinese website!