js中《键盘事件》《鼠标事件》

有一个红色的div块
1. 如果我按下ctrl+c变换颜色
2. 如果我按下ctrl + shift + L 重置颜色,恢复初始颜色
3. 如果我按下向上箭头,向上移动, 同理还可以向下,左,右移动

4. 如果我按下ctrl + 上下左右,走的步数变大

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0px;
			}
			#box{
				background: red;
				height: 100px;
				width: 100px;
				position: absolute;
			}
		</style>
		<script type="text/javascript">
			var step_top = 0;
			var step_left = 0;
			var step = 1;
			document.onkeydown = function(e){
				//第一个需求
				if (e.keyCode == 67 && e.ctrlKey){
					var red = Math.ceil(Math.random() * 255);
					var green = Math.floor(Math.random() * 256);
					var blue = Math.ceil(Math.random() * 255);
					//rgba(234,23,44,1)
					var rgba = "rgba(" + red + "," + green + "," + blue + ",1)";
					console.log(rgba);
					var my_box = document.getElementById("box");
					my_box.style.background = rgba;
				
				} else if (e.ctrlKey && e.shiftKey && e.keyCode ==76) {
					//第二个需求
					var box_tag = document.getElementById("box");
					box_tag.style.background = "red";
				} else {
					//第三四个需求
					var my_key_code = e.keyCode;
					var my_box = document.getElementById("box");
					if (e.ctrlKey){
						step = 10;
					} else {
						step = 1;
					}
//					console.log(my_key_code);
					switch (my_key_code){
						case 37:
							step_left -= step;
							my_box.style.left = step_left + "px";
						//向左走left 要减
							break;
						case 38:
							step_top -= step;
							my_box.style.top = step_top + "px";
//							向上 top减
							break;
						case 39:
						//向左走left 要加
							step_left += step;
							my_box.style.left = step_left + "px";
							break;
						case 40:
							step_top+= step;
							console.log();
							my_box.style.top = step_top + "px";
//							向上 top加
							break;
						default:
							break;
					}
				}
			}
		</script>
	</head>
	<body>
		<div id="box">
			
		</div>
	</body>
</html>

1. 鼠标点击某处, 让精灵移动到该处 (如下图)
2. 鼠标移动时, 让精灵跟随鼠标移动

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			onload  = function (){
				var container = document.getElementById("container");
				document.onmousedown = function(e) {
					
			     	var my_clientX = e.clientX;
					var my_clientY = e.clientY;
					var my_img = container.getElementsByTagName("img") [0];
					my_img.style.top = my_clientY -100 +"px";
					my_img.style.left = my_clientX -100 +"px";		
				}
			}
		</script>
		<style type="text/css">
			#container {
				width: 100%;
				height: 100%;
				background: black;
			}
			
			html,body{
			
				height: 100%;
			}
			
			* {
				margin: 0;
			}
			
			img {
				height: 200px;
				width: 200px;
				position: absolute;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<img src="img/girl.gif" />
		</div>
	</body>

</html>

js中《 键盘事件》 《鼠标事件》

猜你喜欢

js中《键盘事件》《鼠标事件》