這篇文章將為大家詳細講解有關如何利用html5制作一個倒計時demo,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
成都創新互聯成立于2013年,是專業互聯網技術服務公司,擁有項目做網站、成都網站制作網站策劃,項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命,1280元四子王做網站,已為上家服務,為四子王各地企業和個人服務,聯系電話:18980820575h6是一個標簽語言,里面各種各樣的標簽相當于ios里面各種各樣的控件,其實思維邏輯是跟ios差不多的,都是把控件創建出來,然后進行布局。不扯了,下面甩個demo:倒計時.gif
簡單說一下思路:這是一個倒計時加載圖片的小demo,實現的思路很簡單,就是先創建兩個控件,
和<p>,在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>  <p class="time">10</p> <script> //根據類名取到對應的標簽 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>
關于“如何利用html5制作一個倒計時demo”這篇文章就分享到這里了,希望以上內容可以對大家有一定的幫助,使各位可以學到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。
網頁標題:如何利用html5制作一個倒計時demo-創新互聯
文章起源:http://vcdvsql.cn/article36/cdshpg.html
成都網站建設公司_創新互聯,為您提供網站收錄、品牌網站建設、外貿建站、微信公眾號、搜索引擎優化、靜態網站
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯