案例介绍

欢迎来到我的小院，我是霍大侠，恭喜你今天又要进步一点点了！
我们来用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制作进度条相关推荐

组态王怎么做进度条_三种方法制作进度条效果
进度条可以说出现在我们生活的方方面面,游戏.视频加载会碰到它,刷新会碰到它,就连网络不顺畅时也会碰到它.进度条不仅仅只是作为信息载入时的标志,还可以运用到片头开场,让观众对接下来的视频内容产生好奇和期 ...
js练手小项目——JavaScript实现进度条
setInterval( )定义和用法 setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式. setInterval() 方法会不停地调用函数,直到 clearInte ...
html原生js进度条圆形,原生 JavaScript 实现进度条
原生JavaScript特效 JavaScript实现进度进度条实现介绍使用JavaScript实现进度条功能. 原理:通过鼠标移动事件,获取鼠标移动的距离. 步骤: (1)html 中 div ...
JavaScript计时器制作进度条
文章目录前言一.效果图二.代码 1.html代码 2.css代码 3.script代码总结前言学习了计时器函数的用法可以用来制作载入进度条,文章分为3部分代码:html.css.scrip ...
html5 audio js控制进度,HTML5多媒体的之audio和video。JavaScript控制进度条播放进度
使用HTML5多媒体,audio和video两个元素可以让用户不必借助flash player插件即可播放音频和视频. 小知识:视频文件包含了音频轨道,视频轨道和其他一些元数据.当我们播放视频的时候, ...
HTML5+JavaScript实现进度条效果
H5新标签之进度条: <meter></meter>标签是进度条标签,[max]和[min]属性设置其最大值和最小值,[optimum]属性设置最佳状态,[value]属性设置 ...
原生js javascript 实现进度条拖动---移动端
最近的需求有个简单的移动端页面,需要在页面中实现一个进度条的拖动,因为没引入什么框架,所以只能原生JavaScript手写了, 效果图: 代码:这些代码可以复制到本地一个html文件中,直接双击打开, ...
python制作进度条显示_Python进度条的制作代码实例
这篇文章主要介绍了Python进度条的制作代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 import sys,time #导入模块 for ...
手把手教你实现一个 Vue 进度条组件！
最近在个人的项目中,想对页面之间跳转的过程进行优化,想到了很多文档或 npm 等都用到的页面跳转进度条,于是便想自己去实现一个,特此记录. 来看下 npm 搜索组件时候的效果: so 下面咱们一起动手 ...

教你用JavaScript制作进度条