三国杀的联想-前端页面进度条的生成
生活随笔
收集整理的這篇文章主要介紹了
三国杀的联想-前端页面进度条的生成
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
三國殺，真好玩！歡迎加我好友來和我一起耍！三國殺
今天玩三國殺，看到進(jìn)度條慢慢的加載，我又慢慢進(jìn)入了聯(lián)想的世界，想到各式各樣的進(jìn)度條，因?yàn)檎趯W(xué)習(xí)前端知識(shí)，于是決定自己做一個(gè)進(jìn)度條試試！
關(guān)于進(jìn)度條的概念，百度百科是這樣解釋的：
進(jìn)度條即計(jì)算機(jī)在處理任務(wù)時(shí)，實(shí)時(shí)的、以圖片形式顯示處理任務(wù)的速度、完成度、剩余未完成的任務(wù)量的大小和可能需要的處理時(shí)間，一般以長方形條狀顯示。
由該概念可以概括出構(gòu)成進(jìn)度條的兩大組件：任務(wù)量和完成度。
在清楚進(jìn)度條的概念后，我決定每隔100ms加載一張圖片、共加載一百張來模擬任務(wù)量，使用h5中input的range類型來實(shí)現(xiàn)進(jìn)度條。
如圖所示：
首先，在文檔里放一個(gè)p標(biāo)簽來作提示語：
<p id="bai"></p>然后放一個(gè)range類型的input標(biāo)簽來顯示進(jìn)度條：
<input type="range" name="" id="proc" value="0" />放一個(gè)img標(biāo)簽?zāi)M初始任務(wù)量：
<div id="asd"><img src="img/20201124032511.png" id="imag"> </div>至此，樣式和結(jié)構(gòu)都有了，還缺一個(gè)動(dòng)作，在script腳本中開始寫動(dòng)作：
<script type="text/javascript">function createimg(){var d=document.getElementById("asd")var image=document.createElement('img')image.src="img/20201124032511.png"d.appendChild(image)document.getElementById("proc").value++document.getElementById("bai").innerText="網(wǎng)頁已加載"+document.getElementById("proc").value+"%"}var interval2=setInterval("createimg()",100);//每隔100ms執(zhí)行一次函數(shù)，加載一張圖片，等待加載100張圖片后，進(jìn)度條達(dá)到100%setTimeout(function() {clearInterval(interval2);},10600);//等待函數(shù)執(zhí)行100次后，停止執(zhí)行。 </script>最終結(jié)果如下:
完整代碼如下：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><p id="bai"></p><input type="range" name="" id="proc" value="0" /><div id="asd"><img src="img/20201124032511.png" id="imag"></div></body><script type="text/javascript">var m=0;console.log(document.getElementById("imag").src)function createimg(){var d=document.getElementById("asd")var image=document.createElement('img')image.src="img/20201124032511.png"d.appendChild(image)document.getElementById("proc").value++if(document.getElementById("proc").value===100){alert("網(wǎng)頁已加載完成")}document.getElementById("bai").innerText="網(wǎng)頁已加載"+document.getElementById("proc").value+"%"}var interval2=setInterval("createimg()",100);setTimeout(function() {clearInterval(interval2);},10600);</script> </html>總結(jié)
以上是生活随笔為你收集整理的三国杀的联想-前端页面进度条的生成的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 解决Ubuntu中Edge浏览器smar
- 下一篇： html语言加入图片背景音乐,如何插入背