进度条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>
分享到:
相关推荐
简单的使用javaScrpit实现进度条功能
javaScrpit 自学教程代码javaScrpit 自学教程代码javaScrpit 自学教程代码javaScrpit 自学教程代码
自己用javascript好玩做的html,随便看看吧,似懂非懂上
扑克牌游戏(JavaScript),有firefox浏览效果更佳
之前上传了一个树形菜单,是一个有问题的。我的菜单式没问题的,只是我上传的时候漏了一些东西,不好意思啊。现在给大家上传另外一个树形菜单。这个是没问题的啦,我自己试过了才上传的。大家放心~\(≧▽≦)/~啦啦啦
javascrpit算法
特全的JS javascrpit特全的JS javascrpit特全的JS javascrpit
javaScrpit笔记1
例子
JavaScrpit基础 让初学者自学的
一个不错的tree,大家可以试试,ajax的
javaScrpit整理资料: javascript核心 javascript语句 javascript正则表达式
100. 打包jquery拖动条拖动图片缩略图及放大图片效果插件(翻版thickbox插件) 101. 打包基于jQuery对图片边框修饰插件示例下载(支持图片阴影效果、顶部banner效果、邮票边框、毛边相框、云朵包围效果) 102. 推荐...
javascript、js、Extjs、Web脚本、Mvc
主要介绍了原生JavaScrpit中异步请求Ajax实现方法,非常不错,具有参考借鉴价值,需要的朋友可以参考下
运用javascript写轮播图简易版的运用javascript写轮播图简易版的