三国杀的联想-前端页面进度条的生成
生活随笔
收集整理的這篇文章主要介紹了
三国杀的联想-前端页面进度条的生成
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
三國殺，真好玩！歡迎加我好友來和我一起耍！三國殺
今天玩三國殺，看到進度條慢慢的加載，我又慢慢進入了聯(lián)想的世界，想到各式各樣的進度條，因為正在學習前端知識，于是決定自己做一個進度條試試！
關于進度條的概念，百度百科是這樣解釋的：
進度條即計算機在處理任務時，實時的、以圖片形式顯示處理任務的速度、完成度、剩余未完成的任務量的大小和可能需要的處理時間，一般以長方形條狀顯示。
由該概念可以概括出構成進度條的兩大組件：任務量和完成度。
在清楚進度條的概念后，我決定每隔100ms加載一張圖片、共加載一百張來模擬任務量，使用h5中input的range類型來實現進度條。
如圖所示：
首先，在文檔里放一個p標簽來作提示語：
<p id="bai"></p>然后放一個range類型的input標簽來顯示進度條：
<input type="range" name="" id="proc" value="0" />放一個img標簽模擬初始任務量：
<div id="asd"><img src="img/20201124032511.png" id="imag"> </div>至此，樣式和結構都有了，還缺一個動作，在script腳本中開始寫動作：
<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="網頁已加載"+document.getElementById("proc").value+"%"}var interval2=setInterval("createimg()",100);//每隔100ms執(zhí)行一次函數，加載一張圖片，等待加載100張圖片后，進度條達到100%setTimeout(function() {clearInterval(interval2);},10600);//等待函數執(zhí)行100次后，停止執(zhí)行。 </script>最終結果如下:
完整代碼如下：
<!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("網頁已加載完成")}document.getElementById("bai").innerText="網頁已加載"+document.getElementById("proc").value+"%"}var interval2=setInterval("createimg()",100);setTimeout(function() {clearInterval(interval2);},10600);</script> </html>總結
以上是生活随笔為你收集整理的三国杀的联想-前端页面进度条的生成的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 解决Ubuntu中Edge浏览器smar
- 下一篇： Android产品研发（十）--尽量不使