Question

我试图创建一个按钮，每次单击该按钮时都会在网页背景上生成新的颜色。除了javascript部分，其他一切似乎都很好。我已经尝试过多次更改javascript函数，但仍然没有解决方案。 :-(请在下面查看我的完整代码。

<body>
 <section class="stencil-class" id="my">
   <span class="A">A</span>
   <span class="S">S</span>
   <span class="I">I</span>
   <span class="Aa">A</span>
 </section>

   <button class="js-change" id="js-button" onclick="getRandomColor()">Change</button>

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
   function getRandomColor() {
     var letters = "0123456789ABCDEF";
     var randomColor = "#";
     for(var i = 0; i < 6; i++){
         randomColor += letters[Math.floor(Math.random() * 16777215)]; 
            }
         document.body.style.background-color = randomColor;
         }
   </script>
   </body>

   /*CSS BELOW*/

   :root{
--background-color: #00d9ff;
--font-color: white;
--font-size: 300px;
--text: center;
--font-sizeb: 25px; 
  }
   body{
background-color: #00d9ff;
   }
  .stencil-class{
    text-align: var(--text);
   margin-top: 100px;
   margin-bottom:70px;
   margin-right: 70px;
   margin-left: 70px;
   }
  .A{
   font-size: var(--font-size);
   color: var(--font-color);
   font-family: Sans-serif;
   }
  .S{
    font-size: var(--font-size);
    color: var(--font-color);
    font-family: Sans-serif;
   }
  .I{
    font-size: var(--font-size);
    color: var(--font-color);
    font-family: Sans-serif;
   }
  .Aa{
    font-size: var(--font-size);
    color: var(--font-color);
    font-family: Sans-serif;
   }
   .js-change{
    border: 3px solid #000000;
    background-color: #00d9ff;
    color: var(--font-color);
    text-align: var(--text);
     margin-left: 570px;
     padding: 25px;
    font-size: var(--font-sizeb);
 }

Answer 1

您必须使用document.body.style.backgroundColor而不是document.body.style.background-color，

并将16777215替换为letters.length，

function getRandomColor() {
  var letters = "0123456789ABCDEF";
  var randomColor = "#";
  for (var i = 0; i < 6; i++) {
    randomColor += letters[Math.floor(Math.random() * letters.length)];
  }

  document.body.style.backgroundColor = randomColor;
}

<section class="stencil-class" id="my">
  <span class="A">A</span>
  <span class="S">S</span>
  <span class="I">I</span>
  <span class="Aa">A</span>
</section>

<button class="js-change" id="js-button" onclick="getRandomColor()">Change</button>

Answer 2

正如我之前指出的，您的背景色有误。无论如何，请尝试以下简短版本：

<button class="js-change" id="js-button" onclick="getRandomColor()">Change</button>
<script>
function getRandomColor() {document.body.style.backgroundColor = '#'+(Math.random()*0xFFFFFF<<0).toString(16);}
</script>

单击按钮时如何为背景生成随机颜色？

2 个答案: