js時間計數引擎

<!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">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head><title>javascript編程思想_可配置化</title>
<script language="javascript" src="jquery-1.6.2.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){

});
</script>
<style>
body{background:#fefefe; margin:0px; padding:0px;}
.activebar{margin:200px 0 0 200px; width:300px; height:30px; background:#f2f2f2;bordert:1px solid #adb7c3; position:relative;}
.activebar .bar_1{left:0px; top:0px; width:300px; height:30px; background:#f2f2f2;  position:absolute; z-index:0;}
.activebar .bar_2{left:0px; top:0px; width:300px; height:30px; background:url(icon_bg_01.jpg) repeat-x; border-left:1px solid #adb7c3; border-right:1px solid #adb7c3; position:absolute; z-index:1;}
</style></head>
<body>
<div class="activebar" id="activebar">
<div class="bar_1"></div>
<div class="bar_2"></div>
</div><!--end xunelibar-->
<script language="javascript">
window.m = 0.01;
window.n = 0;
function timer() {
	function setWidth(n){//定義一個方法設置寬度的方法
	   $("#activebar .bar_2").css({width:parseInt(n * 100) + '%'});
	}
	this.setValue = function() {
		setWidth(n);//調用方法
	}
	this.setValue();
	n += m;
	if (n <= 1) {
		setTimeout('timer()', 100);
	}
	else {
		n = 1;
		this.setValue();
	}
}
timer();
</script>
</body>
</html>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章