Comment utiliser JS pour implémenter une horloge numérique simple

Cet article présente principalement comment utiliser JS pour implémenter une horloge numérique simple. Il a une certaine valeur de référence. Maintenant, je le partage avec tout le monde. Les amis dans le besoin peuvent s'y référer

Idées de conception :

L'horloge numérique affiche l'heure actuelle à travers les numéros d'image, et l'URL de l'image à afficher change en fonction de l'heure.

a. Obtenez l'heure actuelle Date() et convertissez les informations de l'heure actuelle en une chaîne à 6 chiffres

b. string La valeur de src, afin de remplacer l'image affichée

Construisez la fondation HTML et ajoutez des styles.

<div id="div1">
    <img src=&#39;./数字时钟（1）_files/0.jpg&#39;>
    <img src=&#39;./数字时钟（1）_files/0.jpg&#39;>
    :
    <img src=&#39;./数字时钟（1）_files/0.jpg&#39;>
    <img src=&#39;./数字时钟（1）_files/0.jpg&#39;>
    :
   <img src=&#39;./数字时钟（1）_files/0.jpg&#39;>
   <img src=&#39;./数字时钟（1）_files/0.jpg&#39;>
</div>　

style

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

Obtenez l'élément d'image et l'heure actuelle :

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

Il y a deux problèmes ici

1. oDate .getHours() renvoie des nombres, il est donc écrit comme une addition de nombres au lieu d'une addition de chaînes.

2. Lorsque la valeur obtenue est un seul chiffre, le nombre de chaînes sera inférieur à 6, ce qui ne répond pas aux exigences de conception initiales.

Solution de code pour résoudre les deux problèmes ci-dessus :

　　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());

Définissez la valeur src de toutes les images :

for(var i=0;i<aImg.length;i++)
    {
        aImg[i].src="./数字时钟（1）_files/"+str.charAt(i)+".jpg";
    }

Utilisez setInterval() pour atteindre toutes les 1 secondes pour réobtenir l'heure actuelle et la valeur src de l'image :

    var op=document.getElementById('p1');    var aImg=op.getElementsByTagName('img');
    
    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);

Mais il y a toujours un problème dans la phase initiale d'ouverture de la page Web, l'heure d'affichage est 00:00:00. Parce que la minuterie a une caractéristique, lorsque la minuterie est activée, la fonction à l'intérieur ne sera pas exécutée immédiatement, mais sera exécutée après 1 seconde. Code solution :

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 : La fonction tick dans le code setInterval(tick,1000); n'a pas de parenthèses, alors quelle est la différence entre les fonctions avec parenthèses et sans parenthèses en JS ?

Le code JS complet de production d'horloge numérique est :

    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(); 
}

Bien sûr, si vous avez de bonnes images créatives, vous pouvez remplacer les images numériques ci-dessus pour générer divers effets d'horloge numérique éblouissants. Par exemple :

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au chinois PHP. site web!

Recommandations associées :

Partagez les extensions couramment utilisées des objets js

Partagez la pleine utilisation de Nodejs pour accéder à WeChat Processus JS-SDK

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!