html用样式写进度条,html、css和jquery相结合实现简单的进度条效果实例代码

废话不多说了，直接给大家贴代码了，具体代码如下所示：

jquery实现进度条

body{

padding:30px;

margin-left:450px;

margin-top:200px;

width:350px;

border: 1px solid #98AFB7;

}

.progressBar{

width:280px;

height:20px;

border: 1px solid #98AFB7;

border-radius:8px;

background:#e1dfdf;

}

input{

margin-bottom:15px;

}

span{

position:relative;

top:-20px;

left:290px;

}

#bar {

width: 0px;

height: 20px;

border-radius: 7px;

background: #5EC4EA;

}

//引入Jquery文件

function progressBar() {

$("#bar").css("width", "0px");

var speed =20;//进度条的速度

bar = setInterval(function () {

nowWidth = parseInt($("#bar").width());

if (nowWidth <= 279) {

var barWidth = (nowWidth + 1);

$("#bar").css("width", barWidth + "px");

var totla = parseInt($(".progressBar").width())

var ss = barWidth / totla * 100;

$("#span_s").text(ss);

var index = $("#span_s").text().indexOf(".");

if (index != -1) {

var context = $("#span_s").text().substring(0, index);

$("#span_s").text(context);

}

else {

$("#span_s").text(ss);

if (parseInt($("#span_s").text()) == 100) {

alert('完成');

}

}

} else {

clearInterval(bar);

}

}, speed);

}

0 %

这个进度条特别简单，首先html里面的话就是一个div里面嵌套一个div，然后写好想要的样式就行，特效的实现也很简单就是，一个定时器里面写一个匿名函数里面实现也很简单，我这里是20毫秒执行一个匿名函数，里面的代码就是一次增加一个像素，当然你这里也可以用百分比去增加像素。如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！