原生js做一个简单的进度条

mikepan mikepan     2022-11-21     792

关键词:

用原生js做进度条,布局非常简单,一个盒子里放一个span标签,让它的宽度为0,并且转成块元素。

主要用定时器动态增加span的宽度,并且当它的宽度大于父级盒子的宽度的时候停止

效果如下:

技术分享图片

一 css如下:

		*
			margin: 0;
			padding: 0;
		
			#box
				width: 500px;
				height: 30px;
				margin: 50px auto;
				overflow: hidden;
				border: 1px solid #CCCCCC;
				border-radius: 15px;
			
			
			span
				height: 30px;
				width: 0;
				display: block;
				line-height: 30px;
				background: red;
				text-indent: 250px;
				color: #000;
				
			
		</style>
	</head>
	<body>
	<div id="box">
		<span id="bar"></span>
	</div>

  

二 js代码:

	<script>
	//获取dom元素
	var obar=document.getElementById("bar");
	//定义一个定时器,因为后面要清除我们给它命名
		var timer=setInterval(function()
	//速度为3,匀速,也可以利用随机数函数让速度随机
			var speed=3;
	//设置退出条件,当span的宽度大于盒子超出就清除定时器
			if(obar.offsetWidth>=500)
				clearInterval(timer);
			else
	//条件不满足时我们span的宽度为当前宽度加速度
				obar.style.width=speed+obar.offsetWidth+"px"
	//由于浮点数误差,这边我们乘以一百再取整。
				obar.innerHTML=parseInt(obar.offsetWidth/500*100)+"%"
			
		,30)
		
		
		
		
	</script>

  

 

原生js实现加载进度条

 分享一个原生JS实现的动态加载进度条特效,效果如下:实现的代码如下:<!DOCTYPEhtml><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>& 查看详情

简单实用的进度条加载组件loader.js

本文提供一个简单的方法实现一个流程的进度条加载效果,以便在页面中可以通过它来更好地反馈耗时任务的完成进度。要实现这个功能,首先要考虑怎样实现一个静态的进度条效果,类似下面这样的:这个倒是比较简单,两个... 查看详情

用js写一个网页进度条

...编写的网页进度条满足现有需求,又足够轻便,所以使用原生js写一个构造函数,为了见名知义,可以把该函数命名为”Loading”。该函数接收2个参数,分别为arr、callback。其中arr定义图片数组,callback定义执行完成后回调函数。... 查看详情

c语言做一个百分比进度条

参考技术A1.c和js通信可以用xml来解决,这个就不详细讲了2.进度条,使用css百分比做,比如:htmlcode<divid="warp"style="width:100px;height:10px;border:1pxsolid#eee;background:#000;overflow:hidden"><!-#warp用以包裹进度以及显示这个进度... 查看详情

在android进度条中删除进度条背景

....com/questions/16893209/…这不是我想要的。我想要没有背景的原生全息进度条。您仍然需要自定义进度条。只需将背景更改为白色不能简单地改变原生 查看详情

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

转自:http://blog.csdn.net/yuehailin/article/details/53999288说起进度条,其实大家常常见到,比如说你在下载视频或文件的时候,提示你当前下载进度的就是我们今天要说的进度条,进度条的模拟实现是挺简单的,但是要做的比较实用还... 查看详情

asp.net的一个简单进度条功能(代码片段)

...完成后,进度条消失,其实也是比较简单的了。我们需要一个进度条代码文件ProgressBar.htm(注意:是没有head这些标签的) <scriptlanguage="javascript">functionSetPorgressBar(pos)//设置进度条居中varscreenWidth=document.body.of 查看详情

原生js编写了个简易进度条,还请各位前辈指教~(代码片段)

刚开始学习JS不久,以及第一次来到博客园,第一次进行分享博文。。。噢,不对,不能说是分享,而是学习请教,请前辈多多指教,各个方面都可以~感谢您的路过~ <!DOCTYPEhtml><html><head><metacharset="UTF-8"><ti... 查看详情

css3做圆形进度条

...sp;今天就重点讲解这个效果,首先,当有人说你能不能做一个圆形进度条效果出来时,如果是静态完整圆形进度条,那么就很简单了:.circleprogress{  width:160px;  height:160px;  border:20pxsolidred;  border-radius:... 查看详情

实现winfrom进度条及进度信息提示

...(无法适时看到进度信息)。下面我就简单结合一个我写的例子给大家做一个介绍 查看详情

js控制进度条到达100%跳转界面一

...好最近的项目也是一直在做手机站,这个特效是手机端的一个界面,现在我把改成pc端了,进度条的快慢速度和样式可自行调节,改动也是很方便的,不多说,看代码:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8">... 查看详情

一个非常简单的bash进度条。

#!/usr/bin/envbash#simplepb.sh#Averysimplebashprogressbar.#Stillneedsalotofworktobecomeuseful.#ksaver(atidenti.ca),Aug2010.#License:PublicDomain functionprogr_bar(){MAX=$1PERCENT=0FO 查看详情

vb中的进度条怎么用??

...面写的是用图片控件做进度条.方法2这个是COPY别人的采用一个完整的图片来作为进度条,每次当进度条改变时,采用先贴图再用背景色擦去不需显示的一段进度的方法来实现进度条的变化,可实现制作任何复杂美观的进度条。二... 查看详情

flash网站加载太慢,如何加进度条

整个网站就是一个flash插到静态页面中,打开的时候由于flash过大,很久都打不开,页面程空白状,问:如何加入进度条,要自动跳转的,是用flash做还是代码做??求高手解救啊,不会吝啬分数的先用flash做一个加载界面,这个... 查看详情

c#winform想做一个csv传入数据库的进度条,怎么做?

现在CSV导入数据库的工作已经完成,现在想新添加一个进度条的提示,采用多线程,求大神指教。参考技术A两个线程,一个线程读取数据,一个线程设置进度条进度。后者靠前者给的数据来知道当前到什么进度了,当然,两个... 查看详情

python无依赖实现一个带百分比的简单进度条

使用sys.stdout或sys.stderr就可以输出一个简单的进度条:importtimeimportsysdefreport_progress(progress,total,lbar_prefix='',rbar_prefix=''):percent=round(progress/float(total)*100)buf& 查看详情

android开发中,如何修改进度条的粗细、长度属性?代码如下

...工程文件实现吗?参考技术A一般客户端进度条都不会用原生的,因为太丑,都是自定义控件。追问恩。这个自定义无非就是继承于原生的来吧?那继承后,如何进行显示效果的改进呢?追答美工配合程序猿设计具体的进度条效... 查看详情

android自定义圆弧进度条(代码片段)

...没写文章了,近段时间被拉过去写JS项目了,在做一个项目的时候,遇到一个新的需求就是空气质量,实现空气污染指数的时候,需要到一个圆弧的进度,在网上没找到合适,干脆就自己写了一个,... 查看详情