JavaScript实现简单进度条效果

 更新时间:2020年03月25日 11:53:58   作者:Humy.  
这篇文章主要为大家详细介绍了JavaScript实现简单进度条效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了JavaScript实现进度条效果的具体代码,供大家参考,具体内容如下

效果图:

简单说一下思路:

主要就是进度条的宽度的动态调整!要用到JS的间隔定时器 setInterval( )

setInterval( )
功能:每隔指定时间调用一次函数
参数:函数,时间间隔
返回值:定时器编号(数字)

想让它到一定的宽度就停止,那么需要设定它的最大宽度,在它外面套一个有宽度的元素就可以啦!这样的话控制它在父元素里的百分比就行了。
在函数里进行判断是否道达指定宽度,没有到达就增长,否则就停止。
为了便于理解,后面JS代码中也有注释

1.HTML结构

<div id="box"> 
 <p id="progress"></p> //不断增长的进度条
 <span id=n>0%</span> //百分比的显示
</div>
<button id="btn">开 始</button> //按钮

2.CSS样式

<style>
 #box{
  width: 500px;
  height: 30px;
  border: black 2px solid;
  position: relative;
 }
 #progress{
  width: 0px;
  height: 30px;
  background: pink;
  
 }
 #btn{
  width: 50px;
  height: 30px;
 }
 #n{
  position: absolute;
  top: 5px;
  right: 0;
 }
</style>

重点来啦!

3.JavaScript代码

<script>
 //通过id获取元素
 var progress = document.getElementById('progress')
 var n = document.getElementById('n')
 var btn = document.getElementById('btn')

 //定义函数,并用元素的单击事件触发函数
 btn.onclick = function(){
  var w = 0 //定义变量,用来存储进度条的长度

  //启动定时器
  var t = setInterval(function(){
  w += 10 //每隔指定时间,让进度条长度增加10
  if(w >= 100){ //判断进度条的长度有没有等于或大于指定长度
   w = 100 
   clearInterval(t) //条件成立,清除定时器
  }
  progress.style.width = w + '%' //给元素赋值变化后的宽度
  n.innerHTML = w + '%' //同时百分比也要增长
  },100) //每隔0.1秒执行一次
 }
</script>

这是我的学习记录,分享给大家
也希望对看到这篇博文的你有帮助!!!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 微信小程序wxs日期时间处理的实现示例

    微信小程序wxs日期时间处理的实现示例

    最近在做一个列表的时候,涉及到时间格式化操作。本文主要介绍了微信小程序wxs日期时间处理的实现示例,分享给大家,感兴趣的可以了解一下
    2021-07-07
  • IScroll5 中文API参数说明和调用方法

    IScroll5 中文API参数说明和调用方法

    IScroll是移动页面上被使用的一款仿系统滚动插件。IScroll5相对于之前的IScroll4改进了许多,使得大家可以更方便的定制所需的功能了。
    2016-05-05
  • js字符串替换所有的指定字符或文字(推荐replaceAll方法)

    js字符串替换所有的指定字符或文字(推荐replaceAll方法)

    要实现js字符串替换所有的某个字符,推荐大家使用replaceAll方法,默认不是所有浏览器都兼容,所以这里给出一个解决方案,需要的朋友可以参考下
    2014-07-07
  • js DNA动态序列比对代码

    js DNA动态序列比对代码

    JavaScript动态序列比对代码,随便 写着玩的,在网上见到用VC、VB写的比较多,这个算法以前在高中课本上见到过,我只是用Js写一下试试,或许还不是太准确。
    2010-07-07
  • javascript之卸载鼠标事件的代码

    javascript之卸载鼠标事件的代码

    javascript之卸载鼠标事件的代码...
    2007-05-05
  • javascript实现固定侧边栏

    javascript实现固定侧边栏

    这篇文章主要为大家详细介绍了javascript实现固定侧边栏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-02-02
  • 用js读、写、删除Cookie代码分享及详细注释说明

    用js读、写、删除Cookie代码分享及详细注释说明

    JavaScript是运行在客户端的脚本,因此一般是不能够设置Session的,因为Session是运行在服务器端的。而cookie是运行在客户端的,所以可以用JS来设置cookie. 下面我们来分析下案例
    2014-06-06
  • 微信小程序版翻牌小游戏

    微信小程序版翻牌小游戏

    这篇文章主要为大家详细介绍了微信小程序版翻牌小游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-01-01
  • 第十章之巨幕页头缩略图与警告框组件

    第十章之巨幕页头缩略图与警告框组件

    Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。本文给大家介绍BootStrap组件第十章之巨幕页头缩略图和警告框组件 的相关资料,需要的朋友可以参考下
    2016-04-04
  • js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果

    js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果

    这篇文章主要介绍了js实现首屏延迟加载实现方法,以及js实现多屏单张图片延迟加载效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07

最新评论