有一个红色的div块
1. 如果我按下ctrl+c变换颜色
2. 如果我按下ctrl + shift + L 重置颜色,恢复初始颜色
3. 如果我按下向上箭头,向上移动, 同理还可以向下,左,右移动
1. 鼠标点击某处, 让精灵移动到该处 (如下图)
2. 鼠标移动时, 让精灵跟随鼠标移动
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>