用JS写一个进度条

最新推荐文章于 2022-12-07 15:18:03 发布
VIP文章 最新推荐文章于 2022-12-07 15:18:03 发布
阅读量2.2k 收藏 1
点赞数 2
文章标签： js进度条
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44644573/article/details/86888950
版权

这是我在CSDN写的第一篇文章，把它献给我正在学习的JS吧，作为一个菜鸟，写的东西会很low，大神们就别看了，JS新手可以看一下，我们共同交流学习！
首先，进度条的原理不是很难，说白了就是一个有宽高的大的DIV，里面有一个与大DIV等高但是宽度为0的小DIV，然后让小DIV的宽随着时间的变化慢慢增大直到与大DIV相等就可以了，最后在大DIV最右边加一个表示进度的数字让它从0%渐渐变到100%就可以了。不多说了，直接上代码吧。

![在这里插入图片描述](https://img-blog.csdnimg.cn/20190210123219844.png
这是HTML的内容，大小DIV以及百分比的数字都在里面

这是css样式，大的DIV加相对定位，小DIV和数字加绝对定位

这就是最初的效果，下面就差最重要的js了

首先获得两个DIV和百分比数字的ID

最低0.47元/天 解锁文章
weixin_44644573
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
js实现简单的进度条
12-15
js实现简单的进度条，用于答题进度，分数指针
JavaScript案例之加载进度条
再中二也会被现实打败
10-09 202
JavaScript案例之加载进度条
JS简单实现进度条效果
weixin_45971638的博客
10-06 2336
JS简单实现进度条效果 今天我们来学习一下，用JS来实现简单的进度条效果 首先我们先来到HTML部分 <div class="box1"></div> css部分 .box1{ width:500px;//先设置宽高 height:200px; background-color: aqua; border-radius: 100px 100px 100px 100px; 接下来就到了咱们的重点部分，JS，咱们用JS来写，首先要想到的是应该怎么样去实现
css简易的进度条
qq_45723045的博客
10-22 748
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <metahttp-eq...
CSS实现进度条
anminyao3477的博客
01-30 264
进度条经常运用于网页，即使我们意识到不是所有的东西都将瞬间被加载完成，这些进度条用于提醒使用者关于网页上具体的任务进程，譬如上传，下载，加载应用程序等。 以前如果想要创建一个进度条的动画效果，没有使用JavaScript是不可能实现的。然而感谢CSS3的出现，我们现在能够在div里执行动画，添加梯度和彩色元素。事实上，HTML5为实现此目的也创建了一个特殊的进度条元素。 当你看完这个教...
css 圆形扩散特效 水波
笔记库
10-16 2004
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=...
JS实现简单进度条
热门推荐
苏灵均的博客
06-01 1万+
思路： 1.定义一个外框+内部进度框+显示； 2.定义i从0加到100； 3.循环的i的大小作为参考修改内部框的颜色样式的宽度，记得加上px； 4.显示与循环保持一致，记得加上%； 5.外部考虑用定时器，每0.1秒更新一个i，不然只显示‘100%’，当i<100时，执行2、3，否则，退出当前进程。 ...
js 中原生php代码,JavaScript实现进度条的原生代码
weixin_28715081的博客
03-21 113
在我们日常开发工作中、相信小伙伴们对进度条应该不陌生吧，进度条在我们项目中，还是有非常大的做用，那么我们今天就到大家详细的介绍下JavaScript实现进度条的实例分析！setTimeout和clearTimeou进度条.container{width:450px;border:1px solid #6C9C2C;height:25px;}#bar{background:#95CA0D;float...
【javascript 画进度条】js实现进度条的方法
赖德发的博客
12-18 3551
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>进度条</title> </head> <style type="text/css"> .container{ width:450px; border:1px solid #6C9C2C;
教你用JavaScript制作进度条
小院里的霍大侠
12-07 1574
关注我，学习更多简单易懂的编程实战案例。进主页获取更多编程/就业/副业/创业/资源。
js写一个简单的进度条加载
蒲小若的博客
08-09 1608
下载进度 /*定义父容器*/ .content{ width: 500px; height: 200px; background: pink; margin:0 auto; } /*定义进度条*/ .box{ width: 20px; height: 30px; line-height: 30px; text-align: center; background: #
js实现的非常好看的进度条
12-04
这是一款不错的进度提示条，用js写的，大家可以看一下，是那种交互性比较强的进度条。
js一个非常实用好看得进度条
08-17
一个实用的进度条，欢迎大家下载使用。通过点击百分数，进度相应变化。适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。
Javascript 写的简单进度条控件
01-19
期间或许加入一个类似于进度条的东西让用户有点“安慰”。这个东西实现起来并不复杂，无非就是获得总的处理条目，然后获得一个百分比，再显示输出。 通过我们伟大的 CSS，可以实现非常漂亮的进度条样式。加上 ...
html javascript js制作加载进度条.loading
01-28
html js制作加载进度条.zip
JS中实现一个下载进度条及播放进度条的代码
10-16
主要介绍了JS中实现一个下载进度条及播放进度条的代码,本文图文并茂给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
Javascript jquery css 写的简单进度条控件
10-30
很多的时候用户需要等待你“臃肿”的 Javascript 代码处理完成...期间或许加入一个类似于进度条的东西让用户有点“安慰”。这个东西实现起来并不复杂，无非就是获得总的处理条目，然后获得一个百分比，再显示输出。
Python课程设计 课设 手写数字识别卷积神经网络源码+文档说明.zip
最新发布
04-24
高分设计源码，详情请查看资源内容中使用说明 高分设计源码，详情请查看资源内容中使用说明高分设计源码，详情请查看资源内容中使用说明高分设计源码，详情请查看资源内容中使用说明高分设计源码，详情请查看资源内容中使用说明高分设计源码，详情请查看资源内容中使用说明高分设计源码，详情请查看资源内容中使用说明高分设计源码，详情请查看资源内容中使用说明高分设计源码，详情请查看资源内容中使用说明高分设计源码，详情请查看资源内容中使用说明高分设计源码，详情请查看资源内容中使用说明高分设计源码，详情请查看资源内容中使用说明高分设计源码，详情请查看资源内容中使用说明高分设计源码，详情请查看资源内容中使用说明高分设计源码，详情请查看资源内容中使用说明高分设计源码，详情请查看资源内容中使用说明高分设计源码，详情请查看资源内容中使用说明高分设计源码，详情请查看资源内容中使用说明高分设计源码，详情请查看资源内容中使用说明高分设计源码，详情请查看资源内容中使用说明高分设计源码，详情请查看资源内容中使用说明高分设计源码，详情请查看资源内容中使用说明
SpringBoot2.0快速开发框架权限.rar
04-24
SpringBoot2.0快速开发框架权限.rarSpringBoot2.0快速开发框架权限.rarSpringBoot2.0快速开发框架权限.rar
用js语言写一个进度条按钮
02-28
以下是一个使用 JavaScript 和 HTML/CSS 创建的简单进度条按钮示例： HTML 代码： ```html <button onclick="startProgress()">开始进度条</button> <div id="progressBarContainer"> <div id="progressBar"></div> </div> ``` CSS 代码： ```css #progressBarContainer { width: 200px; height: 20px; background-color: #eee; margin-top: 10px; } #progressBar { width: 0%; height: 100%; background-color: #4CAF50; } ``` JavaScript 代码： ```javascript function startProgress() { var progressBar = document.getElementById("progressBar"); var width = 0; var interval = setInterval(frame, 10); function frame() { if (width >= 100) { clearInterval(interval); } else { width++; progressBar.style.width = width + '%'; } } } ``` 解释： - HTML 代码中包含一个按钮和一个用于包装进度条的 `<div>` 元素。 - CSS 代码中定义了进度条和进度条容器的样式。 - JavaScript 代码中定义了一个名为 `startProgress()` 的函数，它将启动进度条的动画。 - `startProgress()` 函数使用 `setInterval()` 方法在每个 10 毫秒的时间间隔内执行 `frame()` 函数，直到进度条宽度达到 100% 或用户停止进度条。 - `frame()` 函数每次将进度条的宽度增加 1%，直到宽度达到 100% 为止。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值