Question

我刚刚开始在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非常困惑。任何帮助理解为什么这不会起作用将非常感激！

Answer 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值），但是要防止代码工作。

Answer 2

有很多问题。

1）永远不会调用color（）方法。

2）参考this.top和this.left在css构造内部也不会工作。

3）randomColour是一个变量，而不是字符串文字。

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

＆＃13;

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();
});

＆＃13;

<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>

＆＃13;

我的javascript对象出了什么问题？

2 个答案: