案例介紹

歡迎來到我的小院，我是霍大俠，恭喜你今天又要進步一點點了！
我們來用JavaScript編程實戰案例，做一個進度條。進度條數字自動增加，條狀圖片動畫演示進度完成度。通過實戰我們將學會函數function，作用域。

案例演示

進度條自動變化，數字自動增加，條狀圖片動畫演示進度完成度。

案例設計

我們來看此案例的思維導圖設計，包括需求描述，頁面設計和技術架構。
其中架構設計包含了HTML，CSS，JavaScript 共三部分代碼。

源碼學習

進入核心代碼學習，我們先來看HTML中的核心代碼。

<!-- 有個小院-興趣編程 --> <div class="container"><h1>有個小院-進度條</h1><div class="counter">0%</div><hr class="loading-bar-back"/><hr class="loading-bar-front"/> </div>

然后我們來編寫核心的JavaScript代碼，通過querySelector獲取HTML元素的信息；設置初始進度為0；編寫更新進度數字函數，設置HTML元素為進度數字+%，進度數字+1，如果進度數字小于101，則每隔20毫秒刷新數字。

//有個小院-興趣編程 const counterEl=document.querySelector(".counter"); const barEl = document.querySelector(".loading-bar-front"); let idx=0; updateNum(); function updateNum(){counterEl.innerText=idx+"%";barEl.style.width=idx+"%";idx++;if(idx<101){setTimeout(updateNum,20);} }

總結思考

學習點
1、函數就是包裹在花括號中的代碼塊，前面使用了關鍵詞 function，具體結構如下：

function functionname() {// 執行代碼 }

當調用該函數時，會執行函數內的代碼。
可以在某事件發生時直接調用函數（比如當用戶點擊按鈕時），并且可由 JavaScript 在任何位置進行調用。
2、作用域是可訪問變量的集合，變量在函數內聲明，變量為局部變量，具有局部作用域。
局部變量如下：

// 此處不能調用 Name 變量 function myFunction() {var Name = "test";// 函數內可調用 Name 變量 }

全局變量如下：

var Name = "test";// 此處可調用 Name 變量 function myFunction() {// 函數內可調用 Name 變量 }

問答
1、創建函數使用關鍵詞 function對嗎？
2、作用域是可訪問變量的集合對嗎？

關注我，跟著我每天學習一點點，讓你不再枯燥，不再孤單…

全網可搜：小院里的霍大俠， 免費獲取簡單易懂的實戰編程案例。編程/就業/副業/創業/資源。
github：yougexiaoyuan (視頻源碼免費獲取)
（部分素材來源于互聯網，如有保護請聯系作者）

總結

以上是生活随笔為你收集整理的教你用JavaScript制作进度条的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。