Question

现在，我有一个包含三个选项的数组。我设置了一个函数，因此每次都选择一个选项，但有时会重复输出。我该如何编码，以便同一颜色不会连续重复两次？

<!DOCTYPEhtml>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Tester</title>
    <script type="text/javascript">

        var colors = ['#ce0e0e', '#079b0c', '#3e3fd6'];

        function changeColor(){
            var randomColor = colors[Math.floor(Math.random() * colors.length)];
            while (myDiv.style.backgroundColor == randomColor)
                randomColor = colors[Math.floor(Math.random() * colors.length)];

            myDiv.style.backgroundColor = randomColor;
        }
    </script>
    <style>
        .divClass {
            width:300px;
            height:300px;
            border: 1px solid black;
            border-radius:1000px;
            background-color:transparent;
        }
    </style>
</head>
<body>

    <div class=divClass id="myDiv" style="border:6px solid black;">
    </div>

    <input id=button type=button value="chagne color" onclick='changeColor()'>

</body>
</html>

我尝试使用unique = true，但这似乎不起作用。

Answer 1

<script type="text/javascript">

        var colors = ['#ce0e0e', '#079b0c', '#3e3fd6'];
        var old;

        function changeColor(){

            var randomColor = colors[Math.floor(Math.random() * colors.length)];
            if(old){

                if(old !== randomColor){


                    myDiv.style.backgroundColor = randomColor;
                    old = randomColor;
                } else {
                    setTimeout(changeColor,300);
                }
            } else {
                myDiv.style.backgroundColor = randomColor;
                old = randomColor;



            }
        }
    </script>

现在不再重复。 “旧”保留第一次/上一次点击的价值。如果获得相同的值，则重新启动功能，直到其更改为止。

50次以上的点击，并且不会两次出现相同的颜色

Answer 2

var color = colors[Math.floor(Math.random() * colors.length)];    
function changeColor(){ 
        var newColor = colors[Math.floor(Math.random() * colors.length)];
        if(newColor==color){
          changeColor();
        } else {
          color = newColor;
          myDiv.style.backgroundColor = color;
        }
    }

您应该使用递归函数

如何使阵列每次运行都能选择不同的选择？

2 个答案: