JavaScript实现一个简单的进度条（有进度含百分比）

傷城~ 2021-07-24 11:14 349阅读 0赞

效果图：

![20201217201811429.png][]

代码：

<!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=GBK">
            <style>
            *{margin:0;padding:0;}
    		.box{
    		    width: 300px;
    		    height:10px;
    		    border:1px solid #9e9e9e;
    		}
    		.load{
    			 width:0px;
    			 height:10px;
    			 background:#325976;
    		}
            </style>
            </head>
            <body>
            	<div style="left:40%;position:absolute;top: 20%;font-size:70px">
            		<div class="box" id="div_box"><div class="load" id="load"></div></div>
            		<span id='result'></span>
            	</div>
    			
            </body>
            
    <script>
    	var speed=110;
    	var n=0;
    	var result = document.getElementById('result');
    	var load = document.getElementById('load');
    	var timer = setInterval(function(){
    		if(n<=100){
    			n+=Math.floor(Math.round(Math.random()*(100-10)+10)/10);// 这里采用随机的两位数来模拟
    			if(n>100)n=100;
    			result.innerText=n+"%"; 
    			load.style.width=n*3+'px';
    		}else{
    			clearInterval(timer);
    		}
    	},speed)
    </script>
    </html>

[20201217201811429.png]: /images/20210724/5ed689e63bfa4c05b04ba716ae62dd60.png

发表评论取消回复

表情：

评论列表（有 0 条评论，349人围观）

还没有评论，来说两句吧...

相关阅读

相关实现一个条形进度条

<style> c1 { width: 100%; background-color: darkgray; } c2 { width: 10%; background-

港控/mmm°/ 2022年12月07日 12:03/ 0 赞/ 145 阅读

相关纯css实现进度条百分比效果

> 一个完整的进度条效果其实可以拆分一下 > 一段背景 > 一小段的静态的斜纹进度条 > 斜纹进度条用线性渐变 linear-gradien

亦凉/ 2022年10月07日 04:59/ 0 赞/ 225 阅读

相关实现一个进度条效果

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schem

左手的ㄟ右手/ 2022年09月24日 04:21/ 0 赞/ 163 阅读

相关 ajax提交百分比,使用Ajax实现简单的带百分比进度条实例

需求：当进行文件长传保存等操作时，能在页面显示一个带百分比的进度条，给用户一个好的交互体验实现步骤 JSP页面 1.添加table标签 <table style="b

爱被打了一巴掌/ 2022年09月03日 06:21/ 0 赞/ 142 阅读

相关 linux中实现一个简单的进度条

相信大家都用计算机或者手机下载过视屏或者游戏，那仫对于网速这个概念相信大家都不陌生，而我今天模拟实现的进度条就是来模拟实现类似加载或者拷贝文件时速度的显示。要了解进度条

本是古典何须时尚/ 2022年07月13日 07:55/ 0 赞/ 170 阅读

相关 Javascript实现简单进度条

<html> <head> <meta charset="utf-8"> <link rel="stylesheet" type

水深无声/ 2022年06月05日 08:17/ 0 赞/ 204 阅读

相关【Linux】一个简单的进度条

我们都知道缓冲区，缓冲区又称为缓存，它是内存空间的一部分。也就是说，在内存空间中预留了一定的存储空间，这些存储空间用来缓冲输入或输出的数据，这部分预留的空间就叫做缓冲区。比如：

约定不等于承诺〃/ 2022年06月04日 02:59/ 0 赞/ 169 阅读

相关 h5圆形百分比进度条

但不支持IE浏览器：[http://www.htmleaf.com/html5/html5-canvas/201705154511.html][http_www.htmleaf

古城微笑少年丶/ 2022年04月23日 12:26/ 0 赞/ 238 阅读

相关进度条制作-百分比形式

百分比形式进度条 1、思路分析首先，获取页面中的所有 img 标签，并进行遍历，对 img 标签的 src 属性赋值。根据遍历的图

分手后的思念是犯贱/ 2021年09月16日 21:44/ 0 赞/ 386 阅读

相关 JavaScript实现一个简单的进度条（有进度含百分比）

效果图： ![20201217201811429.png][] 代码： <!DOCTYPE html> <html> <hea

傷城~/ 2021年07月24日 11:14/ 0 赞/ 350 阅读