JS loading动画

jdkleo

于 2012-03-27 18:16:15 发布

阅读量136

点赞数

CC 4.0 BY-SA版权

文章标签： javascript js ViewUI

本文链接：https://blog.youkuaiyun.com/jdkleo/article/details/84176213


<html>
<body>
	<div id="a"></div>
	<div id="b"></div>
	<script>
		var point = function(id,msg,init){
			if (typeof(init)=='undefined'){
				init=3;
			}
			this.id=id;
			this.len= init;
			var show = function(p){
				document.getElementById(id).innerHTML = msg + p;
			};
			var initp = function(n){
				var p = [];
				for(var i=0;i<n;i++){
				   p.push(".");
				}
				return p.join("");
			}
			this.start=function(){
			  var len = this.len;	
			  this.timer = setInterval(function(){
				if (init!=len){
					show(initp(++init));
				}else{
					init=1;
					show(initp(init));

				}
			  },300);

			};
			this.stop = function(){
			  clearInterval(this.timer);
			}

		}
		var p = new point("a","loading");
		p.start();
		//setTimeout(function(){p.stop()},1000);

		var q = new point("b","加载中",6);
		q.start();
		//setTimeout(function(){q.stop()},1000);

	</script>
</body>
</html>