keyCode案例

来源：互联网发布：西装知乎编辑：程序博客网时间：2024/06/05 11:04

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

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

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>#red{width: 20px;height: 20px;background-color: red;position: absolute;}</style></head><body><!--<b>有一个红色的div块1, 如果我按下ctrl+c变换颜色2, 如果我按下ctrl + shift + r 重置颜色,恢复初始颜色3, 如果我按下向上箭头,向上移动, 同理还可以向下,左,右移动4, 如果我按下ctrl + 上下左右,走的步数变大</b>--><div id="red"></div><script>var distancex = 0;var distancey = 0;//防止旋转跳跃要用平面向量document.getElementById("red")document.onkeydown = function(e){e  =e||event;if(e.keyCode==67&&e.ctrlKey){//不能用e.keyCode==17,放心，这辈子你都不可能同时按document.getElementById("red").style.backgroundColor="orange";}if(e.keyCode==82&&e.ctrlKey&&e.shiftKey){//不能用e.keyCode==17,放心，这辈子你都不可能同时按document.getElementById("red").style.backgroundColor="red";}if(e.keyCode == 38) {distancey -= 3;//改这个距离document.getElementById("red").style.top = distancey + "px";//不改这个距离}if(e.keyCode == 37) {distancex -= 3;document.getElementById("red").style.left = distancex + "px";}if(e.keyCode == 39) {distancex += 3;document.getElementById("red").style.left = distancex + "px";}if(e.keyCode == 40) {distancey += 3;//document.getElementById("red").style.top = distancey + "px";}if(e.keyCode == 38&&e.ctrlKey) {distancey -= 10;//改这个距离document.getElementById("red").style.top = distancey + "px";//不改这个距离}if(e.keyCode == 37&&e.ctrlKey) {distancex -= 10;document.getElementById("red").style.left = distancex + "px";}if(e.keyCode == 39&&e.ctrlKey) {distancex += 10;document.getElementById("red").style.left = distancex + "px";}if(e.keyCode == 40&&e.ctrlKey) {distancey += 10;//&&e.ctrlKeydocument.getElementById("red").style.top = distancey + "px";}}</script></body></html>

阅读全文

0 0