三国杀的联想-前端页面进度条的生成
三國殺,真好玩!歡迎加我好友來和我一起耍!三國殺
今天玩三國殺,看到進(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语言加入图片背景音乐,如何插入背