Question

基本上我想要做的是根据按键改变单个div的颜色。恩。如果按“w”，背景颜色将变为绿色，“s”将变为红色等。

我没有发布任何链接到我的代码，因为基本上我只有50px乘50px div而且我真的不知道去哪里。也许这很简单，但我所知道的编码都来自于Codeacademy的HTML / CSS课程。提前感谢您可以向我展示或指出的任何事情。

Answer 1

我建议采用一种稍微可扩展的方法：

// creating a map of the relation between the keyboard character pressed
// and the colour it should generate; 'color.b' and 'color["b"]' both give
// 'blue' for example:
var colorMap = {
    'b' : 'blue',
    'r' : 'red',
    'w' : 'white',
    'f' : 'fuchsia'
};

// binding the keypress event on the document:    
$(document).on('keyup', function(e){
    // creating a string from the character-code of the pressed key,
    // e.which returns the jQuery-normalised character code,
    // converting that string to lower case:
    var letter = String.fromCharCode(e.which).toLowerCase();

    // using the css() method to set the background-color to the
    // color returned from the colorMap[letter] call:
    $('#swatch').css('background-color', colorMap[letter]);
});

JS Fiddle demo

编辑添加一个后备（以防止任何不卫生的错误转移到控制台，或其他）：

var colorMap = {
    'b' : 'blue',
    'r' : 'red',
    'w' : 'white',
    'f' : 'fuchsia'
};

$(document).on('keyup', function(e){
    var letter = String.fromCharCode(e.which).toLowerCase();
    // broadly the same as above, but using the anonymous function,
    // i is the index of the current element among the collection returned
    // by the selector;
    // currentColour is the current value of the property we're updating:
    $('#swatch').css('background-color', function(i,currentColour){
        // returns the colorMap[letter] colour or, if one doesn't exist,
        // returns the existing colour instead:
        return colorMap[letter] || currentColour;
    });
});

JS Fiddle demo

使用Plain JavaScript而不是jQuery库：

// arguments are required,
// target is the element whose property we're changing,
// event is the event-object,
// propertyName is the name of the property we're changing:
function changeProperty (target, event, propertyName) {
    // if any of those are not supplied, we quit right here:
    if (!target || !event || !propertyName) {
        return false;
    }
    else {
        // if target is a node (and has a nodeType) *and* is an HTMLElement (
        // with a nodeType === 1) we use that, otherwise we assume it's a string
        // and use getElementById() to retrieve that element:
        target = target.nodeType && target.nodeType === 1 ? target : document.getElementById(target);

        // as above, but there's no normalisation of the event.which,
        // so we're relying on browsers to comply with standards:
        var letter = String.fromCharCode(event.which).toLowerCase(),

            // getting the old property-value, using window.getComputedStyle:
            oldPropertyValue = window.getComputedStyle(target,null)[propertyName];

        // setting the style property to the value returned by the colorMap, or
        // to the current value if no value is returned by the colorMap:
        target.style[propertyName] = colorMap[letter] || oldPropertyValue;
    }
}

document.body.addEventListener('keyup', function(e){
    changeProperty(document.getElementById('swatch'), e, 'backgroundColor');
});

JS Fiddle demo

以上为以下HTML编写的内容：

<div id="swatch"></div>

参考文献：

jQuery的：
- css()。
- event.which。
- on()。
JavaScript的：
- document.getElementById()。
- event.which。
- Node.nodeType。
- String.fromCharCode()。
- String.toLowerCase()。
- Window.getComputedStyle()。

Answer 2

这并不太难。

基本上，你必须听按键事件。此事件将为您提供与按下的键对应的代码。

From Jquery's doc :

$(document).keypress(function(e) {
  if (e.which == 13) {
    // enter pressed
  }
});

如果您需要收听多个密钥，请使用更多if：

$(document).keypress(function(e) {
  if (e.which == 13) {
    // key 13 is pressed
  }
  else if (e.which == 14) {
    // key 14 is pressed
  }
});

如果你想知道什么是密钥代码，这将在控制台中显示数字：

$(document).keypress(function(e) {
  console.log(e.which);
});

最后，要更改颜色，请使用.css（），例如，如果您的div有#mydiv id：

$(document).keypress(function(e) {
  if (e.which == 13) {
    $("#mydiv").css("color", "red");
  }
  else if (e.which == 14) {
    $("#mydiv").css("color", "blue");
  }
});

可能有更多的方法可以做到这一点（将颜色分配给var，将css放在最后），但这可能有点过头了。

Answer 3

结合一些逻辑来获取this answer的密钥代码我模拟了一些东西。基本上你会监听KeyUp事件，检查它是哪个键，并执行适当的逻辑。

document.onkeyup = function() {
    var keyCode = window.event ? window.event.keyCode : event.which;
    changeColor(keyCode);
}

function changeColor(keyCode) {
    if (keyCode == 87 ) { // w
        document.getElementById.style.background = "red";
    } else if (keyCode == 83 ) { // s
        document.getElementById.style.background = "green";
    } else if (keyCode == someOtherKeyCode) {
        // Other color change
    }
}

您可以引用密钥代码here

65 - a
66 - b
... etc ...

但更可靠的检查方法可能只是检查它：

document.onkeyup = function (event) {
    var keyCode = window.event ? window.event.keyCode : event.which;
    alert(keyCode);
}

您可以将其放入控制台并测试密钥。

jsFiddle

Answer 4

您好请检查以下小提琴http://jsfiddle.net/r8SC6/

我只写了2个字母（W，K）你可以在识别更多的keyCodes后重复这个过程

取消注释警报行，以便了解更多的keyCodes，一旦取消注释，每次按键都会先警告键码

$(document).ready(function(){

$(document).keydown(function(e) {
   //alert(e.keyCode);

    if(e.keyCode==75)
    {
     //alphabet K 
           $("#square").css("background","green");
    }

   if(e.keyCode==87)
   {
   //alphabet W 
        $("#square").css("background","red");
    }    

});


})

在HTML / JS / JQ中通过按键更改div颜色

4 个答案: