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

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

零下一度

Freigeben： 2017-05-05 15:44:54

Original

3814 Leute haben es durchsucht

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:

Ein Beispiel-Tutorial zur Verwendung von H5 zum Erstellen einer Countdown-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

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

Nach dem Login kopieren

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!