使用jQuery要求用户按下键盘上的每个字母和数字

Using jQuery to require user to press every letter and number on keyboard

本文关键字：数字 键盘 jQuery 用户 使用      更新时间：2023-11-11

我需要使用jQuery创建一个游戏，要求用户按下键盘上的每个字母和数字。

我首先创建了一个包含26个字母和10个数字的数组，并将它们显示在屏幕上。这应该使用jQuery向DOM追加一次，而不是为每个字母单独追加。当用户按下某个键时，我需要检查它是否被按下。如果已按下，请将字母或数字变灰。如果之前按下过该键，请告知用户。一旦按下了所有的字符，我需要让用户知道他们赢了游戏，应该使用jQuery显示消息。

到目前为止，这是我在DOM上显示字母的所有代码，我真的不知道该从哪里开始：

var array = [];
var func = function(num1,num2){
    for(var i = num1; i <= num2; i++){
        array.push(String.fromCharCode(i));
    }
  for(var i = 0; i < array.length; i++){
  array[i].className= array[i];
  }
    return(array);
}
func(65,90)
func(48,57)
String.fromCharCode(65,66,67,68)
var para = document.createElement("p");
para.innerHTML=array
document.body.appendChild(para);

这里有一种实现您想要的东西的方法：

假设一个html文件带有：

<div id="board"></div>
<div id="log"></div>

对应的javascript代码：

var array = [];
var func = function(num1,num2){
    for(var i = num1; i <= num2; i++){
        array.push(i);
    }
}
func(65,90)
func(48,57)
array = [].concat(array, [65,66,67,68])
console.clear()
console.log(array)
var buttons = []
array.forEach(function(item) {
  // create a button with the charcode, and an id
  var btn = $('<button>').html(String.fromCharCode(item)).prop('id', item)
  buttons.push(btn)
})
// appending all elements at once to the board as per your specification
$('#board').append(buttons)
var pressed = []
// listenning on window 'keypress' event
$(document).on('keypress', function(ev) {
  console.log(ev)
  if(ev.hasOwnProperty('charCode') || ev.hasOwnProperty('keyCode')) {
    // get the charcode pressed
    var code = ev.charCode || ev.keyCode;
    // quit  if code has already been pressed
    if(pressed.indexOf(code) > -1) return;
    pressed.push(code); // adding the code to the pressed array
    // changing button color
    $('#' + code).css({'color': 'red', 'background-color': 'grey'});
    $('#' + code).prop('disabled', 'disabled');
    $("#log").html(array.length - pressed.length + ' remaining')
  }
})

用一把漂亮的小提琴！

编辑：较短版本

参见更新的小提琴

Css文件：

.disabled {
  color: red;
  background-color: gray
}

Html文件：

<div id="board"></div>

Js文件：

var array = []
var func = function(num1,num2){
    for(var i = num1; i <= num2; i++){
        // create a button with the charcode, and an id
        var btn = $('<button>').html(String.fromCharCode(i)).prop('id', i)
  array.push(btn)
    }
}
func(65,90)
func(48,57)
// appending button to the board
$('#board').append(array)
var pressed = []
// listenning on window 'keypress' event
$(document).on('keypress', function(ev) {
    // get the charcode pressed
    var code = ev.charCode || ev.keyCode || 0;
    if(pressed.indexOf(code) > -1) return
    // quit  if code has already been pressed
    pressed.push(code); // adding the code to the pressed array
    // changing button color via css class
    $('#' + code).addClass('disabled')
})

另一个答案，更接近原始代码，也满足了一次添加所有字母的原始要求。

需要一个css标签：

.gray {color:gray;}

这是javascript：

var array = [];
var func = function(num1,num2){
    for(var i = num1; i <= num2; i++){
         var ch = String.fromCharCode(i);
        array.push('<span id="char-'+ch.toLowerCase()+'">'+ch+'</span>');
    }
  for(var i = 0; i < array.length; i++){
  array[i].className= array[i];
  }
    return(array);
}
func(65,90)
func(48,57)
String.fromCharCode(65,66,67,68)
var para = document.createElement("p");
para.innerHTML=array
document.body.appendChild(para);
$(document).keypress(function(e){
    if(/[a-z0-9]/i.test(e.key)) {
        $('#char-'+e.key.toLowerCase()).addClass('gray');
    }
});

和小提琴

只需简单记下几件事：你需要在每个字母周围贴上标签，否则你就不能把它涂灰。除此之外，这只是一个附加按键侦听器的问题，然后查找并灰显字符。

相关文章：