进度条动态增长减少

最新推荐文章于 2024-07-30 22:36:34 发布

进阶的巨人001

最新推荐文章于 2024-07-30 22:36:34 发布

阅读量149

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_45389051/article/details/131128998

版权

在这里插入图片描述
css

.barControl {margin: 0 auto;}
.barContro_space {padding:1px;border-radius: 5px; border:1px #2f3f9c solid;}
.vader{border-radius: 4px;display: block;width: 0%;background-color: #59e8c1;}

html

<div class="progress" id="vaderSize" style="width: 90%;margin: 20px 20px 0 0;"></div>

js

$.fn.extend({ProgressBarWars: function(opciones) {
					var ProgressBarWars=this;
					var theidProgressBarWars=$(ProgressBarWars).attr("id");
					var styleUnique = Date.now();
                    var StringStyle="";
					
					defaults = {
					porcentaje:"100",
					tiempo:1000,
					color:"",
					estilo:"yoda",
					tamanio:"30%",
					alto:"6px"
					}
					
					var opciones = $.extend({}, defaults, opciones);
					if(opciones.color!='')
					{
						StringStyle="<style>.color"+styleUnique+"{ border-radius: 6px;display: block; width: 0%; box-shadow:0px 0px 10px 1px "+opciones.color+", 0 0 1px "+opciones.color+", 0 0 1px "+opciones.color+", 0 0 1px "+opciones.color+", 0 0 1px "+opciones.color+", 0 0 1px "+opciones.color+", 0 0 1px "+opciones.color+";background-color: #fff;}</style>";opciones.estilo="color"+styleUnique;}
					$(ProgressBarWars).before(StringStyle);
	                if(opciones.flag){
					$(ProgressBarWars).append('<span class="barControl" style="width:'+opciones.tamanio+';"><div class="barContro_space"><span class="'+opciones.estilo+'" style="height: '+opciones.alto+';"  id="bar'+theidProgressBarWars+'"></span></div></span>');
	                }
			        $("#bar"+theidProgressBarWars).animate({width: opciones.porcentaje+"%"},opciones.tiempo);


					this.mover = function(ntamanio) {
					$("#bar"+$(this).attr("id")).animate({width:ntamanio+"%"},opciones.tiempo);
					};
	return this;			 
	}
});

使用

   <script>
            var number = 30;
            $(function () {
                $("#vaderSize").ProgressBarWars({ porcentaje: 30, estilo: "vader", tiempo: 5980, alto: "8px", flag: true });
                setInterval(function () {
                    number = Math.floor(Math.random() * 99 + 1);
                    $("#vaderSize").ProgressBarWars({ porcentaje: number, estilo: "vader", tiempo: 5980, alto: "30px", flag: false });
                }, 5000);
            });
        </script>