我的 javascript 对象有什么问题？答案

【问题标题】：What is wrong with my javascript object?我的 javascript 对象有什么问题？
【发布时间】：2018-11-01 20:00:37
【问题描述】：

我刚刚开始学习 javascript 中的 OOP，我正在尝试使用 OOP 重新编写一个简单的程序，该程序之前编写为过程程序。该程序是一个反应测试器，其中屏幕上出现一个随机形状，用户必须尽快单击它。单击形状后，将显示用户响应所需的时间（以秒为单位）。

我还没有走多远，我只是想让一个随机大小和随机颜色的正方形出现在屏幕上，但我什至无法做到。请参阅下面的代码：

<script type="text/javascript">

function Shape () {
  this.x = Math.floor(Math.random()*850);
  this.y = Math.floor(Math.random()*850);
  this.draw();
}

Shape.prototype.draw = function() {
  var shapeHtml = '<div></div>';
  var widthAndHeight = Math.floor(Math.random()*400);
  var left = Math.floor(Math.random()*850);
  var top = Math.floor(Math.random()*850);
  this.shapeElement = $(shapeHtml);
  this.shapeElement.css({
    position: "relative",
    left: this.left,
    top: this.top,
    width: widthAndHeight,
    height: widthAndHeight,
  });
  $("body").append(this.shapeElement);
}

Shape.prototype.colour = function() {
  var colours = '0123456789ABCDEF'.split('');
  var randomColour = "#";
  for (i = 0; i < 6; i++) {
    randomColour+=colours[Math.floor(Math.random()*16)];
  };
  this.shapeElement.css({backgroundColor: 'randomColour'});
}

var square = new Shape();


</script

到目前为止，屏幕上不会出现任何方块。所发生的只是附加了一个随机大小的 div，但它始终位于左上角并且没有背景颜色。控制台没有帮助我，因为它没有显示我的代码中有任何错误。我非常困惑，发现向 OOP 的过渡非常令人困惑。非常感谢任何有助于理解为什么这不起作用的帮助！

【问题讨论】：

如果你想“绘图”，canvas 元素非常简洁：developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial
position: 'absolute' 和 backgroundColor: randomColor 是您想要的。你也应该在某个地方打电话给colour()。投票以 typo 结束
对不起，应该是backgroundColor: randomColour，重点是你应该使用变量randomColour而不是字符串文字'randomColour'
我更改了代码以反映 Phil 的最后评论，但它完全没有任何区别。

标签： javascript jquery oop

【解决方案1】：

几个小错误：

警告： function Shape 设置了未使用的 x 和 y 属性。

错误： Shape.prototype.draw 定义了变量 left 和 top，但在 CSS 对象初始化程序中将它们称为 this.left 和 this.top。作为属性，它们是未定义的 - 去掉两个 this. 限定符。

错误： Shape.prototype.colour 未被调用，因此 DIV 元素是透明的。在设置 CSS 之后插入调用 this.colour()。

错误：背景颜色的 css 初始化对象值应该是变量名 randomColour 而不是字符串文字 'randomColour'。删除标识符周围的引号。

严重警告：colour 函数中的 for 循环未声明 i 并将其创建为隐式全局变量。在脚本文件或函数体的开头插入"use strict";，为未声明的变量生成错误。

总的来说，这些错误都不会在控制台上产生错误（未定义的 CSS 值会被忽略），但会阻止代码正常工作。

【讨论】：

position: relative 可能也不是 OP 想要的
@Phil 对于将单个 DIV 附加到其他空白页面的情况，它几乎没有变化。我同意在随机位置呈现多个 DIV 元素时，绝对定位可能会更好。

【解决方案2】：

有很多问题。

1) colour() 方法永远不会被调用。

2) 在 css 结构中引用 this.top 和 this.left 也不起作用。

3) randomColour 是一个变量，而不是字符串字面量。

修复了问题并在此处嵌入了代码。看看吧。

function Shape () {
  this.x = Math.floor(Math.random()*850);
  this.y = Math.floor(Math.random()*850);
}

Shape.prototype.draw = function() {
  var shapeHtml = '<div></div>';
  var widthAndHeight = Math.floor(Math.random()*400);
  var left = Math.floor(Math.random()*850);
  var top = Math.floor(Math.random()*850);
  this.shapeElement = $(shapeHtml);
  this.shapeElement.css({
    'margin-left': left,
    'margin-top': top,
    'width': widthAndHeight,
    'height': widthAndHeight,
  });
  $("body").append(this.shapeElement);
}

Shape.prototype.colour = function() {
  var colours = '0123456789ABCDEF'.split('');
  var randomColour = "#";
  for (i = 0; i < 6; i++) {
    randomColour+=colours[Math.floor(Math.random()*16)];
  };
  this.shapeElement.css({backgroundColor: randomColour});
}


$(document).ready(function() {
var square = new Shape();
square.draw();
square.colour();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Shape</title>
</head>
<body>
<div></div>
</body>
</html>

【讨论】：

谢谢，这确实帮助我更好地理解。但是，随机方块仍然保持左对齐，我似乎无法让它出现在页面中的随机坐标处，我尝试了几种不同的方法。你知道这是为什么吗？
css 属性应该改为 margin-left 和 margin-top。相应地更改了脚本。