利用H5製作一個倒數demo的實例教學
這幾天剛好沒事，所以研究了一下h5前端。
h5是一個標籤語言，裡面各種各樣的標籤相當於ios裡面各種各樣的控件，其實思維邏輯是跟ios差不多的，都是把控件創建出來，然後進行佈局。不扯了，下面甩個demo：
倒數計時.gif
簡單說一下想法：這是一個倒數計時載入圖片的小demo，實現的思路很簡單，就是先創建兩個控件，
和
，在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>自我感覺js是一個（超級）弱類型的語言，比oc還要弱，var可以接收任意類型的變量，相當於類型推導，相較於swift，簡直太弱了，根本就沒有自己的立場，哈哈，開個玩笑，不過這樣倒替我們省去不少事情。
在此歡迎大神指點，如果有喜歡的人，麻煩點個關注，謝啦，
【相關推薦】
1. 免費h5在線影片教學
2. HTML5 完整版手冊
#######################################################以上是利用H5製作一個倒數demo的實例教學的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
demo是什麼意思
Feb 12, 2024 pm 09:12 PM
demo這個字對喜歡唱歌的朋友已經不在陌生了，但有很多沒有接觸到的使用者好奇了demo是什麼意思呢？現在就來看看小編帶來的demo的含義介紹吧。 demo是什麼意思答案：錄音樣帶。 1.demo讀音英['deməʊ]、美['demoʊ]2、demo是"demonstration"的縮寫，一般指歌曲正式錄製前試聽的初步效果;3、demo用作名詞是錄音樣帶和試樣唱片的意思，用動詞是試用(尤指軟體)、示範和示範;
Python中的SVM實例
Jun 11, 2023 pm 08:42 PM
Python中的支援向量機（SupportVectorMachine，SVM）是一個強大的監督學習演算法，可以用來解決分類和回歸問題。 SVM在處理高維度資料和非線性問題的時候表現出色，被廣泛地應用於資料探勘、影像分類、文字分類、生物資訊學等領域。在本文中，我們將介紹在Python中使用SVM進行分類的實例。我們將使用scikit-learn函式庫中的SVM模
h5是指什麼
Aug 02, 2023 pm 01:52 PM
H5是指HTML5，是HTML的最新版本，H5是一個功能強大的標記語言，為開發者提供了更多的選擇和創造空間，它的出現推動了Web技術的發展，使得網頁的交互和效果更加出色，隨著H5技術的逐漸成熟和普及，相信它將在互聯網的世界中發揮越來越重要的作用。
VUE3入門實例：製作一個簡單的影片播放器
Jun 15, 2023 pm 09:42 PM
隨著新一代前端框架的不斷湧現，VUE3作為一個快速、靈活、易上手的前端框架備受熱愛。接下來，我們就來一起學習VUE3的基礎知識，製作一個簡單的影片播放器。一、安裝VUE3首先，我們需要在本地安裝VUE3。開啟命令列工具，執行以下命令:npminstallvue@next接著，新建一個HTML文件，引入VUE3：<!doctypehtml>
學習Golang指標轉換的最佳實務範例
Feb 24, 2024 pm 03:51 PM
Golang是一門功能強大且高效的程式語言，可用於開發各種應用程式和服務。在Golang中，指標是一種非常重要的概念，它可以幫助我們更靈活和有效率地操作資料。指標轉換是指在不同類型之間進行指標操作的過程，本文將透過具體的實例來學習Golang中指標轉換的最佳實踐。 1.基本概念在Golang中，每個變數都有一個位址，位址就是變數在記憶體中的位置。
python random函式庫如何使用demo
May 05, 2023 pm 08:13 PM
pythonrandom函式庫簡單使用demo當我們需要產生隨機數或從一個序列中隨機選擇元素時，可以使用Python內建的random函式庫。以下是一個有註解的例子，示範如何使用random函式庫：#導入random函式庫importrandom#產生一個0到1之間的隨機小數random_float=random.random()print(random_float)#產生一個指定範圍內的隨機整數（包括端點）random_int=random.randint(1,10)print(random_int)#
PHP 簡單網頁爬蟲開發實例
Jun 13, 2023 pm 06:54 PM
隨著網路的快速發展，數據已成為了當今資訊時代最為重要的資源之一。而網路爬蟲作為一種自動化獲取和處理網路數據的技術，也越來越受到人們的關注和應用。本文將介紹如何使用PHP開發簡單的網路爬蟲，並實現自動化取得網路資料的功能。一、網路爬蟲概述網路爬蟲是一種自動化取得和處理網路資源的技術，其主要工作流程是模擬瀏覽器行為，自動存取指定的URL位址並提取所
