堆棧內存溢出
  簡體   English   中英

Javascript Math.random-瀏覽器似乎無法識別代碼

[英]Javascript Math.random- Browser Doesn't Seem To Recognize Code

 原文  2016-06-28 16:18:45  9   2    javascript

問題描述

當您運行代碼片段時，您會看到圓圈僅在左側，我在想我有應該隨機出現的代碼，但我不確定自己在做什么錯。 有任何想法嗎

我要采取的補救措施？ 我試圖查看代碼中的拼寫問題和錯誤，在瀏覽器檢查模式下檢查了控制台，但沒有顯示出問題。 

 // 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 { 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> </body> </html>

2 個解決方案

解決方案1
 0  2016-06-28 16:24:05

為了使left和top樣式屬性生效，元素必須具有除static其他position 。 您可能想要的是absolute 。 所以加 

position: absolute;

到#redCircle的CSS規則。 

 // 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 { 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 */ 
 <!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>

解決方案2
 0 已采納  2016-06-28 16:24:26

您需要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>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 瀏覽器無法識別javascript / jquery代碼 Ajax 返回的 html 似乎無法識別適用於它的 javascript 函數 導入后JavaScript無法識別代碼 為什么Math.random在我的代碼上不起作用？ 瀏覽器無法識別包含外部javascript / jquery文件 Javascript 推送功能在代碼中似乎無法正常工作 IE 中的“Permission Denied”錯誤似乎與 javascript 代碼不匹配 javascript無法識別ID React似乎無法識別我的.js中的&#39;=&#39;符號 Visual Studio 2013 Javascript無法識別“ &lt;％=％&gt;”嗎？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM