<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery实现进度条</title>
<style>
.progressBar{width:300px;height:30px;border:1px solid #98AFB7;border-radius:5px;margin-top:10px;}
#bar{width:0px;height:30px;background:#5EC4EA;}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script type="text/javascript">
var arr = new Array();
arr.push('1 春种一粒粟，秋收万颗子。');
// 这个超出显示区域长度，会断句，新增到下一行
arr.push('2 四海无闲田，农夫犹饿死。1 春种一粒粟，秋收万颗子。');
arr.push('3 锄禾日当午，汗滴禾下土。');
arr.push('4 谁知盘中餐，粒粒皆辛苦。');
var bar;
var lineNum = 0;
var lineWidth = 0;
var status = 0;
var contentMaxLength = 20;
function progressBar(){
// 开始&&继续
if(status == 0){
$('#btn').val('暂停');
status = 1;
setTimer();
}else{
$('#btn').val('继续');
status = 0;
clearInterval(bar);
}
}
function setTimer(){
var speed = 20;
bar = setInterval(function(){
nowWidth = parseInt($("#bar").width());
//宽度要不能大于进度条的总宽度
if(nowWidth <= lineWidth && lineWidth != 0){
var barWidth = (nowWidth + 1)+"px";
$("#bar").css("width", barWidth);
}else{
content();
}
}, speed);
}
function content(){
if(lineNum >= arr.length){
$('#btn').val('重新开始');
status = 0;
lineNum = 0;
clearInterval(bar);
}else{
$("#bar").css("width","0px");
var content = arr[lineNum];
if(content.length <= contentMaxLength){
$("#text").html(content);
}else{
// 超出部分需要加入到数组中
var view = content.substring(0, contentMaxLength);
var newLine = content.substring(contentMaxLength);
arr.splice(lineNum + 1, 0, newLine);
$("#text").html(view);
console.log('?');
}
lineWidth = parseInt($("#text").css("width"));
lineNum++;
}
}
</script>
</head>
<body>
<input id="btn" type="button" value="开始" οnclick="progressBar()" />
<div class="progressBar">
<div id="bar" style="position:absolute; "></div>
<div id="text" style="position:absolute; "></div>
</div>
</body>
</html>
扫一扫
3097
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
