Javascript Math.random-浏览器似乎无法识别代码

时间：2016-06-28 16:18:45

标签： javascript

当您运行代码段时，您会看到它刚刚停留在左侧的圆圈 我认为我的代码应该随机出现 但我不确定我做错了什么。任何想法

我做过什么补救措施？ 我尝试检查拼写问题和错误的代码，在浏览器检查模式下检查控制台，但它没有显示存在问题。

＆＃13;
＆＃13; 
// Start of Red Circle Function

function getRandomColor() {
  var letters = '0123456789ABCDEF'.split('');
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

var clickedTime;
var createdTime;
var reactionTime;

function makeBox() {

  var time = Math.random();
  time = time * 5000;
  setTimeout(function() {
    if (Math.random() > 0.5) {
     document.getElementById("redCircle").style.borderRadius = "150px";
    } else {
      document.getElementById("redCircle").style.borderRadius = "10px";
    }

    var top = Math.random();
    top = top * 300;
    var left = Math.random();
    left = left * 500;
    document.getElementById("redCircle").style.top = top + "px";
    document.getElementById("redCircle").style.left = left + "px";
    document.getElementById("redCircle").style.backgroundColor = getRandomColor();
    document.getElementById("redCircle").style.display = "block";
    createdTime = Date.now();
  }, time);
}

document.getElementById("redCircle").onclick = function() {
  clickedTime = Date.now();
  reactionTime = (clickedTime - createdTime) / 1000;
  document.getElementById("time").innerHTML = reactionTime;
  this.style.display = "none";
  makeBox();
}

makeBox();

// End of Red Circle Function
＆＃13; 
body {
  margin: 0px;
}
.header {
  background-color: #E7F2F4;
  margin: auto;
  width: 98%;
  text-align: center;
  padding: 20px;
  padding-bottom: 40px;
}
.header p {
  font-size: 20px;
  color: white;
}
.header h1 {
  font-weight: 46px;
  color: #0099CC;
}
#myButton {
  background-color: #0099CC;
  color: white;
}
body {
  background-color: white;
}
/* Circle Button Start */

#redCircle {
  background-color: red;
  width: 150px;
  height: 150px;
  border-radius: 150px;
  -moz-border-radius: 75px;
  -webkit-border-radius: 75px;
  display: none;
}
/* Circle Button Start */
＆＃13; 
<!DOCTYPE html>
<html>

<head>
  <title>Javascript Reactor Game</title>
  <link rel="stylesheet" href="style.css">

</head>


<body>
  <div class="header">
    <h1>Javascript Reactor</h1>
    <p>How Fast Can You Click On The Shapes?</p>
    <button id="myButton">Click Here To Start The Reactor</button>

  </div>
  <center><b><p>Your Reaction Time:<span id="time"></p></b>
  </center>
  <br>


  <!-- Circle Start -->
  <button id="redCircle"></button>

  <!-- Circle End -->

</script>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：0)

要使left和top样式属性生效，该元素必须具有position而不是static。你可能想要的是absolute。所以添加

position: absolute;

指向#redCircle的CSS规则。

＆＃13;
＆＃13; 
// Start of Red Circle Function

function getRandomColor() {
  var letters = '0123456789ABCDEF'.split('');
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

var clickedTime;
var createdTime;
var reactionTime;

function makeBox() {

  var time = Math.random();
  time = time * 5000;
  setTimeout(function() {
    if (Math.random() > 0.5) {
     document.getElementById("redCircle").style.borderRadius = "150px";
    } else {
      document.getElementById("redCircle").style.borderRadius = "10px";
    }

    var top = Math.random();
    top = top * 300;
    var left = Math.random();
    left = left * 500;
    document.getElementById("redCircle").style.top = top + "px";
    document.getElementById("redCircle").style.left = left + "px";
    document.getElementById("redCircle").style.backgroundColor = getRandomColor();
    document.getElementById("redCircle").style.display = "block";
    createdTime = Date.now();
  }, time);
}

document.getElementById("redCircle").onclick = function() {
  clickedTime = Date.now();
  reactionTime = (clickedTime - createdTime) / 1000;
  document.getElementById("time").innerHTML = reactionTime;
  this.style.display = "none";
  makeBox();
}

makeBox();

// End of Red Circle Function
＆＃13; 
body {
  margin: 0px;
}
.header {
  background-color: #E7F2F4;
  margin: auto;
  width: 98%;
  text-align: center;
  padding: 20px;
  padding-bottom: 40px;
}
.header p {
  font-size: 20px;
  color: white;
}
.header h1 {
  font-weight: 46px;
  color: #0099CC;
}
#myButton {
  background-color: #0099CC;
  color: white;
}
body {
  background-color: white;
}
/* Circle Button Start */

#redCircle {
  background-color: red;
  width: 150px;
  height: 150px;
  border-radius: 150px;
  -moz-border-radius: 75px;
  -webkit-border-radius: 75px;
  display: none;
  position: absolute;
}
/* Circle Button Start */
＆＃13; 
<!DOCTYPE html>
<html>

<head>
  <title>Javascript Reactor Game</title>
  <link rel="stylesheet" href="style.css">

</head>


<body>
  <div class="header">
    <h1>Javascript Reactor</h1>
    <p>How Fast Can You Click On The Shapes?</p>
    <button id="myButton">Click Here To Start The Reactor</button>

  </div>
  <center><b><p>Your Reaction Time:<span id="time"></p></b>
  </center>
  <br>


  <!-- Circle Start -->
  <button id="redCircle"></button>

  <!-- Circle End -->

</script>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

position: absolute;的CSS中需要#redCircle，以便使用top和left样式。

// Start of Red Circle Function

function getRandomColor() {
  var letters = '0123456789ABCDEF'.split('');
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

var clickedTime;
var createdTime;
var reactionTime;

function makeBox() {

  var time = Math.random();
  time = time * 5000;
  setTimeout(function() {
    if (Math.random() > 0.5) {
     document.getElementById("redCircle").style.borderRadius = "150px";
    } else {
      document.getElementById("redCircle").style.borderRadius = "10px";
    }

    var top = Math.random();
    top = top * 300;
    var left = Math.random();
    left = left * 500;
    document.getElementById("redCircle").style.top = top + "px";
    document.getElementById("redCircle").style.left = left + "px";
    document.getElementById("redCircle").style.backgroundColor = getRandomColor();
    document.getElementById("redCircle").style.display = "block";
    createdTime = Date.now();
  }, time);
}

document.getElementById("redCircle").onclick = function() {
  clickedTime = Date.now();
  reactionTime = (clickedTime - createdTime) / 1000;
  document.getElementById("time").innerHTML = reactionTime;
  this.style.display = "none";
  makeBox();
}

makeBox();

// End of Red Circle Function
body {
  margin: 0px;
}
.header {
  background-color: #E7F2F4;
  margin: auto;
  width: 98%;
  text-align: center;
  padding: 20px;
  padding-bottom: 40px;
}
.header p {
  font-size: 20px;
  color: white;
}
.header h1 {
  font-weight: 46px;
  color: #0099CC;
}
#myButton {
  background-color: #0099CC;
  color: white;
}
body {
  background-color: white;
}
/* Circle Button Start */

#redCircle {
  position: absolute;
  background-color: red;
  width: 150px;
  height: 150px;
  border-radius: 150px;
  -moz-border-radius: 75px;
  -webkit-border-radius: 75px;
  display: none;
}
/* Circle Button Start */
<!DOCTYPE html>
<html>

<head>
  <title>Javascript Reactor Game</title>
  <link rel="stylesheet" href="style.css">

</head>


<body>
  <div class="header">
    <h1>Javascript Reactor</h1>
    <p>How Fast Can You Click On The Shapes?</p>
    <button id="myButton">Click Here To Start The Reactor</button>

  </div>
  <center><b><p>Your Reaction Time:<span id="time"></p></b>
  </center>
  <br>


  <!-- Circle Start -->
  <button id="redCircle"></button>

  <!-- Circle End -->

  <script type="text/javascript" src="scripts.js"></script>
</body>

</html>

相关问题
最新问题