Javascript Math.random-浏览器似乎无法识别代码
[英]Javascript Math.random- Browser Doesn't Seem To Recognize Code
问题描述
As you run the snippet you see the circle it just stays to the left I'm thinking that I have the code where it should appear randomly But I'm not sure what I'm doing wrong. 
当您运行代码片段时，您会看到圆圈仅在左侧，我在想我有应该随机出现的代码，但我不确定自己在做什么错。 Any ideas 有任何想法吗
What I've Done to Remedy? 我要采取的补救措施？ I tried to review the code for spelling issues and errors, checked the console in browser inspect mode but it doesn't show that there is an issue. 我试图查看代码中的拼写问题和错误，在浏览器检查模式下检查了控制台，但没有显示出问题。
// 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
For the left and top style properties to have any effect, the element has to have a position other than static . 为了使left和top样式属性生效，元素必须具有除static其他position 。 The one you probably want is absolute . 您可能想要的是absolute 。 So add 所以加
position: absolute;
to your CSS rule for #redCircle . 到#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
You need position: absolute; 您需要position: absolute; in the CSS for #redCircle so that the top and left styles will be used. 在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代码 - Browser doesn't recognize javascript / jquery code
Ajax 返回的 html 似乎无法识别适用于它的 javascript 函数 - Ajax returned html doesn't seem to recognize javascript functions that apply to it
导入后JavaScript无法识别代码 - JavaScript doesn't recognize code after import
为什么Math.random在我的代码上不起作用？ - Why Math.random doesn't work at my code?
浏览器无法识别包含外部javascript / jquery文件 - Browser doesn't recognize inclusion of external javascript/jquery file
Javascript 推送功能在代码中似乎无法正常工作 - Javascript push function doesn't seem to work correctly in code
IE 中的“Permission Denied”错误似乎与 javascript 代码不匹配 - “Permission Denied” error in IE doesn't seem to match the javascript code
javascript无法识别ID - javascript doesn't recognize id
React似乎无法识别我的.js中的'='符号 - React doesn't seem to recognize the '=' symbol in my .js
Visual Studio 2013 Javascript无法识别“ <％=％>”吗？ - Visual Studio 2013 Javascript doesn't recognize '<%= %>'?
相关标签