如何使用Javascript使形状在单击后更改颜色？_Javascript_Html_Css_Colors

如何使用Javascript使形状在单击后更改颜色？

javascript html css colors

如何使用Javascript使形状在单击后更改颜色？,javascript,html,css,colors,Javascript,Html,Css,Colors,我正在做一个项目，试图创建一个简单的反应游戏为了让它更有趣，我希望形状在被点击后改变颜色。我研究了这个问题的多种解决方案，但都需要刷新页面。我也不知道如何将它附加到特定的形状，而不是整个页面的背景色这是我的密码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf=8"> <style> #shape { wid

我正在做一个项目，试图创建一个简单的反应游戏

为了让它更有趣，我希望形状在被点击后改变颜色。我研究了这个问题的多种解决方案，但都需要刷新页面。我也不知道如何将它附加到特定的形状，而不是整个页面的背景色

这是我的密码

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


#形状{
宽度：200px；
高度：200px；
背景色：红色；
显示：无；
位置：相对位置；
}
身体{
字体系列：无衬线；
}
h1{
位置：相对位置；
顶部：-20px；
}
p{
位置：相对位置；
顶部：-30px；
}
#你的时间{
字体大小：粗体；
}
测试你的反应！
一出现方形或圆形，立即单击它
您的时间：
var start=new Date（）.getTime（）；
函数makeShapeAppear（）
{
var top=Math.random（）*400；
var left=Math.random（）*700；
变量宽度=（Math.random（）*200）+100；
if（Math.random（）>0.5）{
document.getElementById（“shape”）.style.borderRadius=“50%”；
}否则{
document.getElementById（“形状”）.style.borderRadius=“0”
}
document.getElementById（“形状”）.style.backgroundColor=“红色”；
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（“形状”）.style.display=“块”
开始=新日期（）.getTime（）；
}
函数appearAfterDelay（）
{
setTimeout（makeShapeAppear，Math.random（）*1000）；
}
延迟后出现（）
document.getElementById（“形状”）.onclick=function（）
{
document.getElementById（“shape”）.style.display=“无”；
var end=new Date（）.getTime（）；
var时间=（结束-开始）/1000；
document.getElementById（“timetake”）.innerHTML=timetake+“s”
appearAfterDelay（）；
}

正如您所看到的，该形状应该在每次单击时将其颜色更改为不同的颜色。请帮我弄清楚每次如何将颜色更改为随机颜色

欢迎任何帮助和建议！（请原谅，如果我没有正确地表达或提问，这是我关于堆栈溢出的第一篇文章，因此我会随着时间的推移变得更好！）

使用以下函数可以生成随机颜色

function getRandomColor()
{
  var letters = '0123456789ABCDEF'.split('');

  var color = '#';

  for (var i = 0; i < 6; i++ )
  {
      color += letters[Math.floor(Math.random() * 16)];
  }

  return color;
}

如果您有任何其他问题，请询问

背景颜色可能是形状的背景，但不一定是页面的背景。这通常是用于使div更改颜色的样式属性

var colors=[“蓝色”、“黄色”、“绿色”、“紫色”、“rgb（250、175、72）”；
var shapes=document.queryselectoral（“.shape”）；
Array.prototype.forEach.call（形状，函数（形状）{
shape.addEventListener（“单击”，函数（）{
var colorNum=Math.floor（Math.random（）*colors.length）；
shape.style['background-color']=colors[colorNum]；
});
});
.shape{
显示：内联块；
宽度：50px；
高度：50px；
利润率：10px；
边界半径：5px；
背景颜色：灰色；
光标：指针；
}
单击形状以更改其颜色
看起来您可能有Javascript错误。函数makeShapeAppear（）
中start=new Date…前面的行缺少“；”
<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;
}

document.getElementById("shape").style.backgroundColor = getRandomColor();