So implementieren Sie mit JS eine einfache Digitaluhr

In diesem Artikel wird hauptsächlich die Verwendung von JS zur Implementierung einer einfachen Digitaluhr vorgestellt. Er hat einen gewissen Referenzwert. Jetzt kann ich ihn mit allen teilen, die ihn benötigen.

Designideen:

Die Digitaluhr zeigt die aktuelle Uhrzeit anhand von Bildnummern an und die URL des anzuzeigenden Bildes ändert sich entsprechend der Uhrzeit.

a. Holen Sie sich die aktuelle Uhrzeit Date() und konvertieren Sie die aktuelle Zeitinformation in eine 6-stellige Zeichenfolge.

b. Ändern Sie das Bild entsprechend der Zahl, die jeder Position der Uhrzeit entspricht string Der Wert von src, um das angezeigte Bild zu ersetzen;

Erstellen Sie die HTML-Grundlage und fügen Sie Stile hinzu.

<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 style

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

Holen Sie sich das Bildelement und die aktuelle Zeit:

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

Hier gibt es zwei Probleme

1. Zurückgegeben von oDate.getHours () Sie sind alle Zahlen, daher wird es als Addition von Zahlen und nicht als Addition von Zeichenfolgen geschrieben.

2. Wenn der erhaltene Wert eine einzelne Ziffer ist, beträgt die Anzahl der Zeichenfolgen weniger als 6, was nicht den ursprünglichen Designanforderungen entspricht.

Codelösung zur Lösung der beiden oben genannten Probleme:

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

Legen Sie den Quellwert aller Bilder fest:

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

Verwenden Sie setInterval(), um alle 1 Sekunde eine erneute Erfassung des Stroms zu erreichen Zeit- und Bildquellwert:

In der Anfangsphase des Öffnens der Webseite ist die angezeigte Zeit jedoch 00:00:00 Uhr Der Timer wird eingeschaltet. Danach wird die darin enthaltene Funktion nicht sofort, sondern nach 1 Sekunde ausgeführt. Lösungscode:

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

Problem: Die Funktion tick im Code setInterval(tick,1000); hat keine Klammern, was ist also der Unterschied zwischen Funktionen mit Klammern und ohne Klammern in JS?

Der vollständige JS-Code für die Produktion von Digitaluhren lautet:

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

Wenn Sie gute kreative Bilder haben, können Sie natürlich die oben genannten Digitalbilder ersetzen, um verschiedene umwerfende Digitaluhreffekte zu erzeugen. Zum Beispiel:

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie im PHP-Chinesisch Webseite!

Verwandte Empfehlungen:

Teilen Sie die häufig verwendeten Erweiterungen von js-Objekten

Teilen Sie die vollständige Nutzung von Nodejs für den Zugriff auf WeChat JS-SDK-Prozess

Das obige ist der detaillierte Inhalt vonSo implementieren Sie mit JS eine einfache Digitaluhr. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!