关于定时器的小应用

最新推荐文章于 2024-08-14 09:04:24 发布

你狗

最新推荐文章于 2024-08-14 09:04:24 发布

阅读量79

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zpfind/p/5504422.html

版权

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>定时器练习</title>

	<style type="text/css">
	#div1{
	width: 100px;
	height: 100px;
	background: #666;
	margin-top: 20px;
	position: absolute;
	left: 0;
	}


	</style>
	<script type="text/javascript">
	window.οnlοad=function(){
	var oBtn=document.getElementById('btn1');
	var oBtn1=document.getElementById('btn2');
	var oDiv=document.getElementById('div1');
	var timer=null;

	oBtn.οnclick=function(){
	move(oDiv,19,500);
	}

	oBtn1.οnclick=function(){
	move(oDiv,-10,0);
	}

	function move(obj,speed,iTarget){
	clearInterval(timer)
	timer=setInterval(function(){
	var long=oDiv.offsetLeft+speed;
	if(long>=iTarget&&speed>0){
	long=iTarget
	}
	if(long<=iTarget&&speed<0){
	long=iTarget
	}
	oDiv.style.left=long+'px';

	if(parseInt(oDiv.style.left)<=0){
	oDiv.style.left=0
	}
	},30)
	}
	}
	</script>
	</head>
	<body>
	<button id="btn2">向左</button>
	<button id="btn1">向右</button>

	<div id="div1">

	</div>
	</body>
	</html>