js 控制移动

Myth丶恋晨 2022-06-13 22:12 158阅读 0赞

主要用到定时器setInterval(定时执行的函数, 时间)

clearInterval(定时器对象) 关闭一个定时器

对象.offsetLeft 当前距离父元素的左边距

<!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style>
    #div{
    	background:#0F0;
    	width:200px;
    	height:200px;
    	position:absolute;
    	top:50px;
    	left:0px;
    }
    </style>
    </head>
    <script>
    window.onload = function(){
    	var btn = document.getElementById('bnt');
    	var btn2 = document.getElementById('bnt2');
    	var btn3 = document.getElementById('bnt3');
    	var btn4 = document.getElementById('bnt4');
    	var div = document.getElementById('div');
    	var speed  = 3;
    	var time;
    	bnt.onclick = function(){ //鼠标点击响应定时器
    		clearInterval(time);  //每次进入，先关闭定时器，只允许一个定时器的存在
    		time = setInterval(function(){ //time为这个定时器对象
    			if (div.offsetLeft >= 900){ //停止
    				clearInterval(time);
    			}
    			else//移动
    			{
    				div.style.left = div.offsetLeft+speed+'px';
    			}
    		},30);
    	};
    	bnt2.onclick = function(){
    		clearInterval(time);
    	};
    	bnt3.onclick = function(){
    		speed++;
    	};
    	bnt4.onclick = function(){
    		speed--;
    	};
    	
    };
    </script>
    <body>
    <input type="button" id="bnt" value="运动"/>
    <input type="button" id="bnt2" value="停止"/>
    <input type="button" id="bnt3" value="加速"/>
    <input type="button" id="bnt4" value="减速"/>
    <div id="div">
    </div>
    </body>
    </html>