master

分支 (1)

管理

管理

master

javascript_daily_practise
/
practise13.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>方向键控制div</title>
	</head>
	<body>
		<div id="box1"></div>
	</body>
</html>
<script type="text/javascript">
	// 使div更具不同方向键向不同方向移动
	var box1 = document.getElementById("box1")
	document.onkeydown = function(e){
		var speed = 20;
		//  按下shift后速度加快
		if(e.shiftKey)
			speed = 50;
		if(e.keyCode == 38){
			box1.style.top = (box1.offsetTop - speed) + "px"
		}
		else if(e.keyCode == 40){
			box1.style.top = (box1.offsetTop + speed) + "px"
		}
		else if(e.keyCode == 37){
			box1.style.left = (box1.offsetLeft - speed) + "px"
		}
		else if(e.keyCode == 39){
			box1.style.left = (box1.offsetLeft + speed) + "px"
		}
	}

</script>
<style type="text/css">
	#box1{
		width: 6.25rem;
		height: 6.25rem;
		background-color: red;
		position: absolute;
	}
</style>