saber酱的抱枕

Fly me to the moon

09/9
08:00
学习

做了一个js控制的进度条效果

现在可以直接设置进度条的长度、或手动指定,以及读取特定属性来设置。

先看看基础结构:

<div id="box">
	<div id="lbar" data-l="70"></div>
</div>
<br><br>
<input type="button" id="setLBtn" value="设置一个进度">
<style>
	#box{width: 500px;height: 16px;border-radius: 8px;background: #ccc;}
	#lbar{width: 0px;height: 16px;border-radius: 8px;background: #0c0;transition:all .4s;}
</style>
<script src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.js"></script>

js代码:
function setL (element,length) {
element.width(element.parent().eq(0).width()*length);
}

//读取特定属性来设置进度,适用于多个进度条的场景
var allL=$("[data-l]");
for (var i = 0; i < allL.length; i++) { setL ($(allL[i]),parseInt($(allL[i]).attr("data-l"),10)/100); }; //直接设置进度条的百分比 setL($("#lbar"),0.4); //手动指定进度条的百分比 $("#setLBtn").click(function (argument) { setL($("#lbar"),parseInt(window.prompt("请输入一个表示百分比的整数", ""),10)/100); });[/code] 这次学到了把JQuery对象和DOM对象互相转换的方法。 JQuery对象和DOM对象的方法不通用,例如上面代码中读取特定属性的代码中,本来取到的属性的集合是jquery对象,可是在for循环里用了索引之后就成了DOM对象了,然后使用函数里的parent()方法就报错。这时候需要把索引之后的DOM对象重新转换为Jquery对象。 [code lang="js"]//把Jquery对象转换为dom对象,方法1:使用索引 $("p")[0]; //把Jquery对象转换为dom对象,方法2:使用get()方法,参数和索引一样 $("p").get(0); //把DOM对象转换为Jquery对象,使用$()包含DOM对象 var box=document.getElementById("box"); box=$(box);[/code] 查看demo

做了一个js控制的进度条效果