代码：
html文件：
<html>
<head>
<title>进度条</title>
<link rel="stylesheet" type="text/css" href="./myScript.css">
<script type="text/javascript" src="./jquery.js"></script>
<body>
<p>设置进度值: <input type="text" id="tes1" value=""></p>
<script type="text/javascript" src="./myScript.js"></script>
</body>
</html>
js文件：
function ProcessBar() {
var num;
// 创建整体的div
this.boardDiv = $("<div>");
this.boardDiv.addClass("boardDiv");
this.foreDiv = $("<div>");
this.foreDiv.addClass("foreDiv");
this.fontDiv = $("<div>");
this.fontDiv.addClass("fontDiv");
this.fontDiv.text(num + "%");
this.boardDiv.append(this.foreDiv);
this.foreDiv.append(this.fontDiv);
//preNode = this;
}
/*-------------------------------------------------------------*/
ProcessBar.prototype.setProgress = function(num) {
if (num <= 100 && num >= 0) {
this.foreDiv.width(num * 4);
this.fontDiv.css("margin-left", num * 4);
this.fontDiv.text(num + "%");
}
}
var processBar = new ProcessBar();
$(document.body).append(processBar.boardDiv);
/*-------------------------------------------------------------*/
window.setInterval(function() {
var num = $("#tes1").val();
processBar.setProgress(num);
}, 20);
// window.setInterval(processBar.fresh, 20);// 进度值刷新
css文件：
.boardDiv{
background-color: #808080;
width:400px;
height:30px;
}
.foreDiv {
background-color: #95CA0D;
height:100%;
}
.fontDiv {
height:100%;
font-size:25px;
}
305
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
