利用H5制作一個(gè)倒計(jì)時(shí)demo的實(shí)例教程

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 15:09:22

利用H5制作一個(gè)倒計(jì)時(shí)demo的實(shí)例教程

利用H5制作一個(gè)倒計(jì)時(shí)demo的實(shí)例教程:這幾天正好沒事，所以研究了一下h5前端。h5是一個(gè)標(biāo)簽語言，里面各種各樣的標(biāo)簽相當(dāng)于ios里面各種各樣的控件，其實(shí)思維邏輯是跟ios差不多的，都是把控件創(chuàng)建出來，然后進(jìn)行布局。不扯了，下面甩個(gè)demo：倒計(jì)時(shí).gif簡(jiǎn)單說一下思路：這是一個(gè)倒計(jì)時(shí)加載圖片的小

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀利用H5制作一個(gè)倒計(jì)時(shí)demo的實(shí)例教程:這幾天正好沒事，所以研究了一下h5前端。h5是一個(gè)標(biāo)簽語言，里面各種各樣的標(biāo)簽相當(dāng)于ios里面各種各樣的控件，其實(shí)思維邏輯是跟ios差不多的，都是把控件創(chuàng)建出來，然后進(jìn)行布局。不扯了，下面甩個(gè)demo：倒計(jì)時(shí).gif簡(jiǎn)單說一下思路：這是一個(gè)倒計(jì)時(shí)加載圖片的小

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

h5是一個(gè)標(biāo)簽語言，里面各種各樣的標(biāo)簽相當(dāng)于ios里面各種各樣的控件，其實(shí)思維邏輯是跟ios差不多的，都是把控件創(chuàng)建出來，然后進(jìn)行布局。不扯了，下面甩個(gè)demo：

倒計(jì)時(shí).gif

簡(jiǎn)單說一下思路：這是一個(gè)倒計(jì)時(shí)加載圖片的小demo，實(shí)現(xiàn)的思路很簡(jiǎn)單，就是先創(chuàng)建兩個(gè)控件，

和<p>，在css里面把布局寫一下，然后在javascript里面拿到這兩個(gè)標(biāo)簽，這里說一下document 。document可以根據(jù)標(biāo)簽名類名字等拿到任意標(biāo)簽，相當(dāng)于變成了全局變量，
下面直接甩代碼：

<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>
 //根據(jù)類名取到對(duì)應(yīng)的標(biāo)簽
 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>

自我感覺js是一個(gè)（超級(jí)）弱類型的語言，比oc還要弱，var可以接收任意類型的變量，相當(dāng)于類型推導(dǎo)，相比于swift，簡(jiǎn)直太弱了，根本就沒有自己的立場(chǎng)，哈哈，開個(gè)玩笑，不過這樣倒替我們省去不少事情。

在此歡迎大神指點(diǎn)，如果有喜歡的人，麻煩點(diǎn)個(gè)關(guān)注，謝啦，

【相關(guān)推薦】

1. 免費(fèi)h5在線視頻教程

2. HTML5 完整版手冊(cè)

3. php.cn原創(chuàng)html5視頻教程

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com