Question

您好我是从Javascript / CSS开始的。我现在正在练习。

我正在尝试在我的页面上添加一个按钮，只要单击该按钮就会更改导航栏的颜色。有没有办法获得随机生成的颜色？或者我是否必须列出代码中的颜色？

这是我目前的测试页面。

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: blueviolet;
}

li {
    float: left;
}

li a {
    display: inline-block;
    color: white; /*changes text of the nav bar */
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111;
}

</style>
</head>
<body>



<ul>
  <li><a href="index.html">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>

</ul>



<script>
function myFunction() {
    document.body.style.backgroundColor = "red";
}
</script>

</body>
</html>

谢谢。

Answer 1

以下是我使用随机HSL color value对它的看法。使用HSL可以让您拥有随机颜色，但仍然可以分别控制颜色的色调强度和亮度。

// make button do something on click 
var btn = document.getElementById( 'navcol-btn' ); 
btn.addEventListener( 'click', function()
{
    // target navbar ul by ID 
    var nav  = document.getElementById( 'navbar' ), 
        rand = Math.random() * 360; 

    // change bg-color 
    nav.style['background-color'] = 'hsl('+rand+', 50%, 50%)'; 
});

Here's an example on JSFiddle

Answer 2

在我的版本中，它获得3个随机数（从0到255）来设置RGB值。

function changecolor() {
var x = Math.floor((Math.random() * 255) + 0);
var y = Math.floor((Math.random() * 255) + 0);
var z = Math.floor((Math.random() * 255) + 0);
  
document.getElementsByTagName("ul")[0].style.backgroundColor = "rgb("+x+","+y+","+z+")"; 
}

ul {
background: lavender;  
}

<ul>
  <li><a href="index.html">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

<button onclick="changecolor()">click</button>

Answer 3

$('#button_id').on('click', function(){
    document.body.style.backgroundColor = '#'+
        Math.floor(Math.random()*16777215).toString(16);
});

Answer 4

试试这个

resources :cliqs do
    resources :cliq_memberships
end

检查Random color generator in JavaScript

Answer 5

您可以执行以下Live Demo，

之类的操作

HTML：

<ul id="nav-bar">
  <li><a href="index.html">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

JavaScript的：

  //on click handler for the nav-bar
  document.getElementById("nav-bar").addEventListener("click",function(){


  //Call the changeColor function passing
  //the object clicked on as a parameter.
  changeColor(this);

});


function changeColor(element) {


  var red,green,blue;

  red = randomColor();
  green = randomColor();
  blue = randomColor();



    element.style.backgroundColor = "rgb(" + red +
"," + green + "," + blue + ")";
}

function randomColor(){

  //store a random number between 0 and 255
  var randomColor = Math.floor(Math.random()*256);

  return randomColor;


}

每次按下按钮时，尝试添加一个更改背景颜色的按钮

5 个答案: