Heim > Artikel > Web-Frontend > Ein Beispiel-Tutorial zur Verwendung von H5 zum Erstellen einer Countdown-Demo
Erklären Sie einfach die Idee: Dies ist ein Countdown, der Bild s kleine Demo, die Implementierungsidee ist sehr einfach, das heißt, erstellen Sie zuerst zwei Steuerelemente,
und e388a4556c0f65e1904146cc1a846bee, schreiben Sie das Layout in CSS und fügen Sie es dann inJavascript Holen Sie sich diese beiden Tags und sprechen Sie hier über Dokument. Das Dokument kann jedes Tag basierend auf dem Tag-Namen, dem Klassennamen usw. erhalten, was einer globalen Variable entspricht. Geben Sie den folgenden Code direkt aus:
<html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .image{ margin: 10px; width: 200px; height: 200px; display: none; } .time{ margin: 10px; font-size: 200px; color: red; } </style> </head> <body> ![](http://upload-images.jianshu.io/upload_images/2011313-6952b2e445095ac6.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) <p class="time">10</p> <script> //根据类名取到对应的标签 var image = document.getElementsByClassName('image')[0]; var time = document.getElementsByClassName('time')[0]; var timer= setInterval(function(){ time.innerHTML = time.innerHTML - 1; if(time.innerHTML == 0){ clearInterval(timer); time.style.display = 'none' image.style.display = 'inline-block'; } },1000) </script> </body> </html>
Wir freuen uns über Ratschläge von Experten hier, bitte folgen Sie uns, vielen Dank,
[Verwandte Empfehlungen]
Kostenloses h5 Online-Video-Tutorial
2. HTML5-Vollversionshandbuch
3. php.cn Original-HTML5-Video-Tutorial
Das obige ist der detaillierte Inhalt vonEin Beispiel-Tutorial zur Verwendung von H5 zum Erstellen einer Countdown-Demo. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!