教你用JavaScript实现进度条

2022-12-23 19:54:57 来源：博客园

案例介绍

欢迎来到我的小院，我是霍大侠，恭喜你今天又要进步一点点了！我们来用JavaScript编程实战案例，做一个进度条。进度条数字自动增加，条状图片动画演示进度完成度。通过实战我们将学会函数function，作用域。

案例演示

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

(资料图片)

案例设计

JavaScript实战案例-进度条我们来看此案例的思维导图设计，包括需求描述，页面设计和技术架构。其中架构设计包含了HTML，CSS，JavaScript 共三部分代码。

源码学习

进入核心代码学习，我们先来看HTML中的核心代码。

  有个小院-进度条
  0%

然后我们来编写核心的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 (视频源码免费获取)（部分素材来源于互联网，如有保护请联系作者）

关键词：局部变量欢迎来到全局变量