首頁 > 文章 > web前端 > 利用H5製作一個倒數demo的實例教學

利用H5製作一個倒數demo的實例教學

零下一度原創: 2017-05-05 15:44:543801瀏覽

這幾天剛好沒事，所以研究了一下h5前端。

h5是一個標籤語言，裡面各種各樣的標籤相當於ios裡面各種各樣的控件，其實思維邏輯是跟ios差不多的，都是把控件創建出來，然後進行佈局。不扯了，下面甩個demo：

利用H5製作一個倒數demo的實例教學

倒數計時.gif

簡單說一下想法：這是一個倒數計時載入圖片的小demo，實現的思路很簡單，就是先創建兩個控件，

和e388a4556c0f65e1904146cc1a846bee，在css裡面把佈局寫一下，然後在javascript裡面拿到這兩個標籤，這裡說一下document 。 document可以根據標籤名類名字等拿到任意標籤，相當於變成了全局變量，
下面直接甩代碼：

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

自我感覺js是一個（超級）弱類型的語言，比oc還要弱，var可以接收任意類型的變量，相當於類型推導，相較於swift，簡直太弱了，根本就沒有自己的立場，哈哈，開個玩笑，不過這樣倒替我們省去不少事情。

在此歡迎大神指點，如果有喜歡的人，麻煩點個關注，謝啦，

【相關推薦】

1. 免費h5在線影片教學

2. HTML5 完整版手冊

#3. php.cn原始html5影片教學

#######################################################

以上是利用H5製作一個倒數demo的實例教學的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：利用H5實作一個輪播器（觸控版）的實例教程下一篇：利用H5實作一個輪播器（觸控版）的實例教程

看更多