如何编写一个在 CSS 中单击时改变颜色的圆圈

Question

当有人点击圆圈时，我想将圆圈的颜色更改为红色和绿色。 colors 都应该随机切换。 例如，当有人点击红色圆圈时，它可以切换到绿色或保持红色，反之亦然。（R，R，G，G，G，G，R.....）

该演示目前看起来像这样。 https://jsfiddle.net/sidsingh29/591hfwLd/12/

HTML:
<div id="test"></div>

CSS:

#test {
    position:absolute;
    height: 55px;
  width: 55px;
  background-color: red;
  border-radius: 50%;
  display: inline-block;}


JavaScript + jQuery (edge):

$('#test').click(function() {
    var docHeight = $(document).height(),
        docWidth = $(document).width(),
        $div = $('#test'),
        divWidth = $div.width(),
        divHeight = $div.height(),
        heightMax = docHeight - divHeight,
        widthMax = docWidth - divWidth;
    
    $div.css({
        left: Math.floor( Math.random() * widthMax ),
        top: Math.floor( Math.random() * heightMax )
    });
});

Answer 1

只需根据Math.random() > 0.5使用left和top设置background属性：

 $('#test').click(function() { var docHeight = $(document).height(), docWidth = $(document).width(), $div = $('#test'), divWidth = $div.width(), divHeight = $div.height(), heightMax = docHeight - divHeight, widthMax = docWidth - divWidth; $div.css({ left: Math.floor( Math.random() * widthMax ), top: Math.floor( Math.random() * heightMax ), background: Math.random() > 0.5? 'red': 'green', // setting background here }); });

 #test { position:absolute; height: 55px; width: 55px; background-color: red; border-radius: 50%; display: inline-block;}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <div id="test"></div>

Answer 2

这个任务不能完全使用 CSS 来完成，所以我使用了 Javascript 和 jQuery 来完成它。 有时它可以一遍又一遍地保持相同的颜色，因为我使用随机生成的数字来改变颜色。 我还设置了一个计时器，计时你点击圆圈所花费的时间，以防你做一个反应测试器。

 var colour = 1 + Math.floor(Math.random() * 10); function oddOrEven(x) { return ( x & 1 )? "odd": "even"; } function checkNumber(argNumber) { var result = oddOrEven(argNumber); if (result == "even") { $("#circle").css("background-color", "red"); } else { $("#circle").css("background-color", "green"); }; start = new Date().getTime(); } $(document).ready(function() { checkNumber(colour) }); function makeShapeAppear() { var docHeight = $(document).height(), docWidth = $(document).width(), circle = $('#circle'), circleWidth = circle.width(), circleHeight = circle.height(), heightMax = docHeight - circleHeight, widthMax = docWidth - circleWidth; circle.css({ left: Math.floor( Math.random() * widthMax ), top: Math.floor( Math.random() * heightMax ), display: "block", }); colour = 1 + Math.floor(Math.random() * 10); checkNumber(colour) }; $('#circle').click(function() { makeShapeAppear(); }); document.getElementById("circle").onclick = function() { document.getElementById("circle").style.display = "none"; var end = new Date().getTime(); var timeTaken = (end - start) / 1000; document.getElementById("timeTaken").innerHTML = timeTaken + " seconds taken"; }

 #circle { height: 100px; width: 100px; border: 0x solid black; border-radius: 50%; position: absolute; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="circle" onclick="makeShapeAppear()"></div> <h3>Time Taken = </h3><div id="timeTaken"></div>