亚洲最大看欧美片,亚洲图揄拍自拍另类图片,欧美精品v国产精品v呦,日本在线精品视频免费

  • 站長資訊網(wǎng)
    最全最豐富的資訊網(wǎng)站

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


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

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

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

    倒計時.gif

    簡單說一下思路:這是一個倒計時加載圖片的小demo,實(shí)現(xiàn)的思路很簡單,就是先創(chuàng)建兩個控件,

    和<p>,在css里面把布局寫一下,然后在javascript里面拿到這兩個標(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ù)類名取到對應(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是一個(超級)弱類型的語言,比oc還要弱,var可以接收任意類型的變量,相當(dāng)于類型推導(dǎo),相比于swift,簡直太弱了,根本就沒有自己的立場,哈哈,開個玩笑,不過這樣倒替我們省去不少事情。

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

    【相關(guān)推薦】

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

    2. HTML5 完整版手冊

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

    贊(0)
    分享到: 更多 (0)
    網(wǎng)站地圖   滬ICP備18035694號-2    滬公網(wǎng)安備31011702889846號