Question

我对编码很陌生，有人能告诉我我的代码有什么问题吗？这可能是我在代码中犯的一些错误，但我现在已经尝试了几个小时，任何帮助都会受到赞赏！感谢。

  myList=["book","book","title","author","title","book","title","book", "author"]

Answer 1

看起来你必须以不同方式附加事件监听器：

document.onkeydown = drawSevenSegDisplay(Event.key);

应该是： document.onkeydown = function(Event) { drawSevenSegDisplay(Event.key) };

此外，看起来drawSevenSegDisplay确实绘制了初始显示，但之后不会更新它。您将要为每个数字创建一个新的Segments数组 - 例如，0将是：

[
    new Segment(LEFT_X, TOP_Y, false), //top segment A
    new Segment(RIGHT_X, TOP_Y, true),  //right top vert segment B
    new Segment(LEFT_X, MIDBOT_Y, true),  //left bot vert segment C
    new Segment(LEFT_X, BOTTOM_Y, false),//bottom segment D
    new Segment(RIGHT_X, MIDBOT_Y, true), //right bot vert segment E
    new Segment(LEFT_X, TOP_Y, true),//left top vert segment F
];

1将是：

[
    new Segment(RIGHT_X, TOP_Y, true),  //right top vert segment B
    new Segment(RIGHT_X, MIDBOT_Y, true), //right bot vert segment E
];

其他细分市场也是如此。然后，在for循环中，您可以迭代对应于每个段的相应数字的数组，而不是遍历SevenSegDisplay数组。如果你有点好奇，这里有一个七段显示的简单例子。

＆＃13;

// segments from  top->bottom left->right
//    
//    _0_
//   |   |
//   1   2
//   |_3_| 
//   |   |
//   4   5
//   |_6_|

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d'); 
var segmentDefinitions = [
  // this was simply easier to type
  [0, 1, 2, 4, 5, 6],          // 0
  [2, 5],                      // 1
  [0, 2, 3, 4, 6],             // 2
  [0, 2, 3, 5, 6],             // 3
  [1, 2, 3, 5],                // 4
  [0, 1, 3, 5, 6],             // 5
  [0, 1, 3, 4, 5, 6],          // 6
  [0, 2, 5],                   // 7
  [0, 1, 2, 3, 4, 5, 6],       // 8
  [0, 1, 2, 3, 5, 6],          // 9
];

// onkeydown expects a callback function
window.onkeydown = function(event) {
  var key = +event.key; // parse the key as a number
  if (key >=0 && key <= 9)
    drawNumber(key);
}

// fills the canvas with a white rectangle
function clearCanvas() {
  context.fillStyle = 'white';
  context.fillRect(0, 0, canvas.width, canvas.height);
}

// draws a number onto the canvas
function drawNumber(number) {
  clearCanvas();
  segmentDefinitions[number].forEach(drawSegment)
}

// draws a specific segment onto the canvas
function drawSegment(id) {
  var width = canvas.width;
  var height = canvas.height;
  var borderWidth = 20;
  context.fillStyle = 'red';

  switch(id) {
    case 0:
      context.fillRect(
        0, 0, 
        width, borderWidth);
      break;
    case 1:
      context.fillRect(
        0, 0, 
        borderWidth, height / 2);
      break;
    case 2:
      context.fillRect(
        width - borderWidth, 0, 
        borderWidth, height/2);
      break;
    case 3:
      context.fillRect(
        0, height / 2, 
        width, borderWidth);
      break;
    case 4:
      context.fillRect(
        0, height / 2, 
        borderWidth, height/2);
      break;
    case 5:
      context.fillRect(
        width - borderWidth, height / 2, 
        borderWidth, height/2);
      break;
    case 6:
      context.fillRect(
        0, height - borderWidth, 
        width, borderWidth);
      break;
  }
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Seven Segment Display</title>
  <canvas id="canvas" width="80" height="160"></canvas>
  <h4>Click within this area to begin interacting with the canvas</h4>
</head>
<body>

</body>
</html>

＆＃13;

Javascript七段显示未点亮或响应事件点击

1 个答案: