Heim > Artikel > Web-Frontend > Ein Beispiel-Tutorial zur Verwendung von H5 zum Erstellen einer Countdown-Demo

Ein Beispiel-Tutorial zur Verwendung von H5 zum Erstellen einer Countdown-Demo

零下一度Original: 2017-05-05 15:44:543875Durchsuche

Ich hatte heutzutage zufällig nichts zu tun, also habe ich das h5-Frontend studiert.

h5 ist eine Tag-Sprache. Die verschiedenen Tags darin entsprechen den verschiedenen Steuerelementen in iOS. Die Denklogik ähnelt der von iOS. Hier ist ohne weiteres eine Demo:

Countdown.gif

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 in

Javascript 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:

Ich denke, dass js ein (Super) schwach typisierte Sprache, schwächer als oc, var kann Variablen jeden Typs empfangen, was einer Typableitung entspricht, es ist einfach zu schwach und hat überhaupt keine eigene Position. Haha, nur ein Scherz, aber das hier erspart uns einiges.

<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(&#39;image&#39;)[0];
    var time = document.getElementsByClassName(&#39;time&#39;)[0];

    var timer= setInterval(function(){
    time.innerHTML = time.innerHTML - 1;
    if(time.innerHTML == 0){
        clearInterval(timer);
        time.style.display = &#39;none&#39;
        image.style.display = &#39;inline-block&#39;;
    }
},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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Ein Beispiel-Tutorial zur Implementierung eines Karussells (Touchscreen-Version) mit H5Nächster Artikel：Ein Beispiel-Tutorial zur Implementierung eines Karussells (Touchscreen-Version) mit H5

In Verbindung stehende Artikel

Mehr sehen