首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

JavaScrpit简易进度条,进度条100%后可以实施回调方法

2012-11-23 
JavaScrpit简易进度条,进度条100%后可以执行回调方法。进度条js:ProgressBar.jsfunction ProgressBar(bar)

JavaScrpit简易进度条,进度条100%后可以执行回调方法。
进度条js:ProgressBar.js

function ProgressBar(bar) {this.bar = bar;this.speed = 50;}ProgressBar.prototype.move = function(moveing, callback) {this.bar.style.width = parseInt(this.bar.style.width) + 1 + "%"; if(this.bar.style.width == "100%"){ window.clearInterval(moveing);if (callback != null) {callback();}} }ProgressBar.prototype.start = function(callback) {var moveing = window.setInterval(function() {bar.move(moveing, callback);}, this.speed);}ProgressBar.prototype.clear = function() {this.bar.style.width = "1%"; }


调用范例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE>Progress Bar</TITLE><style type="text/css">#graph{ width:450px; border:1px solid #F8B3D0; height:25px; } #bar{ display:block; background:#FFE7F4; float:left; height:100%; text-align:center; } </style></HEAD><BODY><div id="graph"> <strong id="bar" style="width:1%;"></strong> </div> </BODY><SCRIPT type="text/JavaScript" src="ProgressBar.js"></SCRIPT><SCRIPT type="text/JavaScript"><!--function a() {alert('finish');}var bar = new ProgressBar(document.getElementById('bar')); // 构造方法,参数必须填bar.speed = 20; // 设定间隔时间,非必须bar.start(a); // a为回调方法,非必须//--></SCRIPT></HTML>

热点排行