js+svg 倒计时

倒计时
	<time id="djs_time">30</time>
</div>
<script type="text/javascript">
	var djs = function(option) {
		this.overtime = 30;
		this.showtime = 30;
		this.timeObj;
		this.option = option;
	};
	djs.prototype = {
		start:function(overtime,showtime) {
			this.overtime = +overtime;
			this.showtime = +showtime;
			this.clear();
			this.option.div.style.visibility = 'visible';
			this.timefun();
		},
		stop:function() {
			if(this.timeObj != null){
				clearTimeout(this.timeObj);
				this.timeObj = null;
			}
		},
		clear:function() {
			if(this.timeObj != null){
				clearTimeout(this.timeObj);
				this.option.div.style.visibility = 'hidden';
				this.timeObj = null;
			}
			
		},
		cont:function() {
			if(this.timeObj == null){
				this.timefun();
			}
		},
		timefun:function() {
			this.overtime -- ;
			this.option.time.innerText = this.overtime;
			if (this.overtime == 0){
				console.log('time over!');
				this.clear();
			} else {	
				this.timeObj = setTimeout(arguments.callee.bind(this),1000);
			}
		},
		init:function(){

		}
	};
	var busiDjs;
	function start(){
		var time = document.getElementById('djs_time'),
		div = document.getElementById('djs_div');
		busiDjs = new djs({
			time:time,
			div:div
		});
		busiDjs.start(30,30);
	};
	function stop(){
		busiDjs.stop();
	};
	function cont(){
		busiDjs.cont();
	};
	function clear1(){
		busiDjs.clear();
	};

	
</script>
<button onclick="start()">start</button>
<button onclick="stop()">stop</button>
<button onclick="cont()">continue</button>
<button onclick="clear1()">clear</button>
posted @ 2017-07-14 18:52  Justubborn  阅读(233)  评论(0编辑  收藏  举报