js实现简单进度条
程序员文章站
2022-03-07 10:37:06
主要用到的 offsetWidth 属性，定时器。 1 2 3 4 5 进度条 </t... ......</div>
<div class="content">
<div class="cnblogs_code">
<pre class="brush: javascript;"><br> 主要用到的 offsetwidth 属性，定时器。</pre>
<pre class="brush: javascript;"> 1 <!doctype html>
2 <html>
3 <head>
4 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
5 <title>进度条 </title>
6 </head>
7 <style>
8 #progress{
9 position: relative;
10 margin: auto;
11 top: 200px;
12 display: block;
13 width: 200px;
14 height: 20px;
15 border-style: dotted;
16 border-width: thin;
17 border-color: darkgreen;
18 }
19 #filldiv{
20 position:absolute;
21 top: 0px;
22 left: 0px;
23 width: 0px;
24 height: 20px;
25 background: blue;
26 }
27 #percent{
28 position: absolute;
29 top: 0px;
30 left: 200px;
31 }
32 </style>
33 <body>
34 <div id="progress">
35 <div id="filldiv"></div>
36 <span id="percent">0</span>
37 </div>
38 </body>
39 </html>
40 <script type="text/javascript">
41 //获取所有需要的元素
42 var progress = document.getelementbyid("progress");
43 var filldiv = document.getelementbyid("filldiv");
44 var percent = document.getelementbyid("percent");
45
46 var w = progress.clientwidth;//获取整个进度条的长度
47
48 //开启一个定时器
49 var timer = setinterval(function(){
50 //filldiv的宽度递增
51 //filldiv.offsetwidth，每一次获取的都是当前的宽
52 filldiv.style.width = filldiv.offsetwidth + 1 + "px";
53 //filldiv添加一个随机背景颜色
54 filldiv.style.background = getcolor();
55 //percent统计百分比
56 percent.innerhtml = parseint((filldiv.offsetwidth/w)*100) + "%";
57 //当filldiv的宽到了200的宽就停止定时器
58 if(filldiv.offsetwidth == w){
59 clearinterval(timer);//当进度达到100%时，关闭定时器，进度停止。
60 }
61 },10);
62
63 //获取十六进制的随机颜色值
64 function getcolor(){
65 var str = "0123456789abcdef";
66 var color = "#";
67 var rand;
68 //str有下标 0-15
69 //获取0-15的随机数
70 //通过这个随机数作为str的下标，
71 //获取随机字符
72 //获取六个随机字符拼成一个字符串
73 for(var i = 0 ; i < 6 ;i++){
74 rand = getrand(0,15);
75 color += str.charat(rand);
76 }
77 return color;
78 }
79
80 //获取min-max之间的随机整数
81 function getrand(min,max){
82 return parseint(math.random() * (max - min + 1) + min);
83 }
84
85 </script><br><br><br>运行效果：<br><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczQuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAxOTA4MTAvYl8wXzIwMTkwODEwMTgwMTQ4MTIxOS5naWY=" alt="js实现简单进度条" title="js实现简单进度条"></pre>
<p> </p>
<pre class="brush: javascript;">**可以将 getcolor() 和 getrand() 函数放入一个公共的js库，下次使用时可以直接调用。</pre>
</div>
<p> </p> </div>
<div class="info-pre-next">
<p>
上一篇： <a href="/article/90014.html">
javascript基础修炼(13)——记一道有趣的JS脑洞练习题 </a>
</p>
<p>
下一篇： <a href="/article/90016.html">
PHP $_SERVER超全局变量详解 </a>
</p>
</div>
<div class="wz_tuijian">
<p>
推荐阅读 </p>
<ul>
<li>
<a href="/article/2324507.html" target="_blank" title="使用Node.js实现压缩和解压缩功能">
<h2>
使用Node.js实现压缩和解压缩功能 </h2>
</a>
</li>
<li>
<a href="/article/2324531.html" target="_blank" title="在VUE里实现一个简单的地图">
<h2>
在VUE里实现一个简单的地图 </h2>
</a>
</li>
<li>
<a href="/article/2324352.html" target="_blank" title="HTML+CSS+JS实现堆叠轮播效果的示例代码">
<h2>
HTML+CSS+JS实现堆叠轮播效果的示例代码 </h2>
</a>
</li>
<li>
<a href="/article/2324362.html" target="_blank" title="jQuery实现简单的间隔向上滚动效果_jquery">
<h2>
jQuery实现简单的间隔向上滚动效果_jquery </h2>
</a>
</li>
<li>
<a href="/article/2324263.html" target="_blank" title="遗传算法集装箱优化算法Django+Three.js实现">
<h2>
遗传算法集装箱优化算法Django+Three.js实现 </h2>
</a>
</li>
<li>
<a href="/article/2324293.html" target="_blank" title="JS实现基本的网页计算器功能示例">
<h2>
JS实现基本的网页计算器功能示例 </h2>
</a>
</li>
<li>
<a href="/article/2324319.html" target="_blank" title="Python数据可视化正态分布简单分析及实现代码">
<h2>
Python数据可视化正态分布简单分析及实现代码 </h2>
</a>
</li>
<li>
<a href="/article/2324312.html" target="_blank" title="php文件上传简单实现方法">
<h2>
php文件上传简单实现方法 </h2>
</a>
</li>
<li>
<a href="/article/2324302.html" target="_blank" title="PHP实现加减乘除最简单的实例分享">
<h2>
PHP实现加减乘除最简单的实例分享 </h2>
</a>
</li>
<li>
<a href="/article/2324209.html" target="_blank" title="PHP实现简单实用的验证码类">
<h2>
PHP实现简单实用的验证码类 </h2>
</a>
</li>
</ul>
</div>
</article>
</div>
</main>
<footer><div class="box"><div class="ft_nav"><div class="ft_about"><p>关于网站</p><ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益，请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"><p> 备案号：<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a></p><p>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </p></div></div></div></footer> </body>
</html>