单击使用 Javascript 后，如何使形状改变颜色？
[英]How do I make shapes change color after clicked on using Javascript?
问题描述
I'm working on a project and am trying to create a simple reaction game.
我正在做一个项目，正在尝试创建一个简单的反应游戏。
To make it more interesting I want the shapes to change color after being clicked on.为了让它更有趣，我希望形状在被点击后改变颜色。 I researched multiple solution to this problem, but all of them require the page to be refreshed.我研究了这个问题的多种解决方案，但所有这些都需要刷新页面。 I also don't understand how to attach it to a specific shape, and not to the background-color of the whole page.我也不明白如何将它附加到特定的形状，而不是整个页面的背景颜色。
Here is my code...这是我的代码...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf=8">
<style>
#shape {
width: 200px;
height: 200px;
background-color: red;
display: none;
position: relative;
}
body {
font-family: sans-serif;
}
h1 {
position: relative;
top: -20px;
}
p {
position: relative;
top: -30px;
}
#yourTime {
font-weight: bold;
}
</style>
</head>
<body>
<h1 id="h1">Test Your Reactions!</h1>
<p>Click on the squre or circle as soon as it appears!</p>
<p id="yourTime"> Your time: <span id="timeTaken"></span></p>
<div id="shape"></div>
<script type="text/javascript">
var start = new Date().getTime();
function makeShapeAppear()
{
var top = Math.random() * 400;
var left = Math.random() * 700;
var width = (Math.random() * 200) + 100;
if (Math.random() > 0.5) {
document.getElementById("shape").style.borderRadius = "50%";
} else {
document.getElementById("shape").style.borderRadius = "0"
}
document.getElementById("shape").style.backgroundColor = "red";
document.getElementById("shape").style.width = width + "px";
document.getElementById("shape").style.height = width + "px";
document.getElementById("shape").style.top = top + "px";
document.getElementById("shape").style.left = left + "px";
document.getElementById("shape").style.display = "block"
start = new Date().getTime();
}
function appearAfterDelay()
{
setTimeout(makeShapeAppear, Math.random() * 1000);
}
appearAfterDelay()
document.getElementById("shape").onclick = function()
{
document.getElementById("shape").style.display = "none";
var end = new Date().getTime();
var timeTaken = (end - start) / 1000;
document.getElementById("timeTaken").innerHTML = timeTaken + "s"
appearAfterDelay();
}
</script>
</body>
</html>
As you can see the shape is supposed to change its color to a different color each time it's clicked on.如您所见，每次单击该形状时，它的颜色都应该更改为不同的颜色。 Please help me figure out how to change the color to a random one each time.请帮我弄清楚如何每次将颜色更改为随机颜色。
Any help and suggestions are welcomed !欢迎任何帮助和建议！ (Please excuse me if I'm not phrasing or asking the question correctly, this is my first post on Stack Overflow, so I will get better with time!) （如果我的措辞或提问不正确，请原谅我，这是我在 Stack Overflow 上的第一篇文章，所以我会随着时间的推移变得更好！）
2 个解决方案
解决方案1
1 已采纳 2016-05-01 03:09:20
Random colors can be generated with the following 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;
}
You can paste it in after your script declaration and start variable…您可以在脚本声明和启动变量之后粘贴它...
<script type="text/javascript">
var start = new Date().getTime();
function getRandomColor()
{
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++ )
{
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
You will then have to exchange “red” with getRandomColor()然后你将不得不用getRandomColor()交换“red”
document.getElementById("shape").style.backgroundColor = getRandomColor();
If you have any other question please ask!如有其他问题请追问！
解决方案2
0 2016-05-01 03:24:07
The background-color may be the background of the shape, it is not necessarily the background of the page. background-color可能是形状的背景，不一定是页面的背景。 This is usually the style attribute you use to make a div change color.这通常是您用来使 div 更改颜色的样式属性。
var colors = ["blue", "yellow", "green", "purple", "rgb(250, 175, 72)"]; var shapes = document.querySelectorAll(".shape"); Array.prototype.forEach.call(shapes, function(shape){ shape.addEventListener("click", function(){ var colorNum = Math.floor(Math.random() * colors.length); shape.style['background-color'] = colors[colorNum]; }); });
.shape{ display: inline-block; width: 50px; height: 50px; margin: 10px; border-radius: 5px; background-color: gray; cursor: pointer; }
<h3>Click on the shapes to change their color</h3> <div class="shape"></div> <div class="shape"></div> <div class="shape"></div> <div class="shape"></div> <div class="shape"></div> <div class="shape"></div> <div class="shape"></div>
With your code.用你的代码。
// Just add all the possible colours in this array. var colors = ["blue", "yellow", "green", "purple", "rgb(250, 175, 72)"]; var start = new Date().getTime(); function makeShapeAppear() { var top = Math.random() * 400; var left = Math.random() * 700; var width = (Math.random() * 200) + 100; if (Math.random() > 0.5) { document.getElementById("shape").style.borderRadius = "50%"; } else { document.getElementById("shape").style.borderRadius = "0" } document.getElementById("shape").style.backgroundColor = "red"; document.getElementById("shape").style.width = width + "px"; document.getElementById("shape").style.height = width + "px"; document.getElementById("shape").style.top = top + "px"; document.getElementById("shape").style.left = left + "px"; document.getElementById("shape").style.display = "block" start = new Date().getTime(); } function appearAfterDelay() { setTimeout(makeShapeAppear, Math.random() * 1000); } appearAfterDelay() document.getElementById("shape").onclick = function() { var colorNum = Math.floor(Math.random() * colors.length); document.getElementById("shape").style.backgroundColor = colors[colorNum];; var end = new Date().getTime(); var timeTaken = (end - start) / 1000; document.getElementById("timeTaken").innerHTML = timeTaken + "s" appearAfterDelay(); }
#shape { width: 200px; height: 200px; background-color: red; display: none; position: relative; } body { font-family: sans-serif; } h1 { position: relative; top: -20px; } p { position: relative; top: -30px; } #yourTime { font-weight: bold; }
<h1 id="h1">Test Your Reactions!</h1> <p>Click on the square or circle as soon as it appears!</p> <p id="yourTime"> Your time: <span id="timeTaken"></span></p> <div id="shape"></div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.