案例介绍

欢迎来到我的小院，我是霍大侠，恭喜你今天又要进步一点点了！

我们来用 JavaScript 编程实战案例，做一个进度条。进度条数字自动增加，条状图片动画演示进度完成度。通过实战我们将学会函数 function，作用域。

案例演示

进度条自动变化，数字自动增加，条状图片动画演示进度完成度。

案例设计

JavaScript实战案例-进度条

我们来看此案例的思维导图设计，包括需求描述，页面设计和技术架构。

其中架构设计包含了 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、作用域是可访问变量的集合对吗？

关注我，跟着我每天学习一点点，让你不再枯燥，不再孤单..

全网可搜：小院里的霍大侠， 免费获取简单易懂的实战编程案例。编程/就业/副业/创业/资源。

私微信：huodaxia_xfeater

二维码： http://www.yougexiaoyuan.com/images/weixin_huodaxia.jpg

公众号：有个小院（微信公众号：yougexiaoyuan）

github：yougexiaoyuan (视频源码免费获取)

（部分素材来源于互联网，如有保护请联系作者）