进度条的实现-CSDN博客

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>进度条demo</title>
<script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.js"></script>
<style>
progress { width: 160px;height:14px;border: 1px solid #ffd022; background-color:#e6e6e6; color: #ffd022; /*IE10*/}
progress::-moz-progress-bar { background: #ffd022; }
progress::-webkit-progress-bar { background: #ffd022; }
progress::-webkit-progress-value { background: #ffd022; }
progress::-webkit-progress-bar { background: #e6e6e6; }
</style>
</head>
<body>
<input id="btn" type="button" οnclick="update()" value="update">
<br>
<span>bar.totalCount:<span id="bar-count"></span></span>
<br>
<span>progress.value:<span id="bar-value"></span></span>
<br>
<progress value="" max="" id="myBar"></progress>
<script type="text/javascript">

//进度条类
function ProgressHandler() {
this.currentIndex = 0;
this.totalCount=0;
this.progress = {};
}

//初始化进度条方法，需传入总长度
ProgressHandler.prototype.init = function (totalCount) {
this.totalCount=totalCount;
this.progress.max=this.totalCount;

$('#myBar').attr('max',totalCount);
}

//更新进度条
ProgressHandler.prototype.update = function () {
this.currentIndex++;
this.currentIndex = this.currentIndex>this.totalCount?this.totalCount:this.currentIndex;
this.progress.value=this.currentIndex;

//调用方法更新页面
rendor();
}

//进度条reset方法
ProgressHandler.prototype.reset = function () {
this.totalCount=0;
this.currentIndex=0;
}

//判断是否完成的方法
ProgressHandler.prototype.isFinished = function(){
if(this.progress.value==this.totalCount){
return true;
}else{
return false;
}
}

//更新dom
function rendor(){
$('#bar-value').html(bar.progress.value);
$('#bar-count').html(bar.totalCount);
$('#myBar').val(bar.progress.value);
if(bar.isFinished()){
$('#myBar').hide();
}
}

//创建对象
var bar = new ProgressHandler();
bar.init(10);

//更新方法
function update(){
bar.update();
console.log(bar);
}
</script>
</body>
</html>

转载于:https://www.cnblogs.com/wangjiaojiao/p/4600267.html