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

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

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

這幾天剛好沒事,所以研究了一下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