案例移动div和发射小子弹

最新推荐文章于 2021-06-09 20:58:02 发布

qq_38068491

最新推荐文章于 2021-06-09 20:58:02 发布

阅读量158

点赞数

本文链接：https://blog.csdn.net/qq_38068491/article/details/83057686

版权

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			#div1 {
				width: 40px;
				height: 40px;
				position: absolute;
				background: orange;
				transform: rotate(0deg);
			}
			
			.pd {
				width: 5px;
				height: 15px;
				border-radius: 50%;
				position: absolute;
				background: #f06;
			}
		</style>
	</head>

	<body>
		<div id="div1" style="top:350px;left:100px"></div>
	</body>

</html>
<script src="public.js"></script>
<script type="text/javascript">
document.onkeydown=function(e){
	var e=e||event;
	var code=e.keyCode||e.which||e.charCode;
	switch(code){
		case 37:
		$id("div1").style.left=$id("div1").offsetLeft-10+"px";
		break;
		case 39:
	   $id("div1").style.left = $id("div1").offsetLeft + 10 + "px";
		break;
		case 32:
		var div=document.createElement("div");
		div.className="pd";
		document.body.appendChild(div);
		div.style.left=$id("div1").offsetLeft+$id("div1").offsetWidth/2-div.offsetWidth/2+"px";
		div.style.top=$id("div1").offsetTop-div.offsetHeight+"px";
		var timer=setInterval(function(){
			div.style.top=div.offsetTop-10+"px";
			if(div.offsetTop<-div.offsetHeight){
				clearInterval(timer);
				div.remove();
			}
		},10);
		break;
		
	}
}
</script>