Fatal编程技术网
  • javascript/
  • Javascript 尝试添加一个按钮，该按钮每次按下时都会更改我的导航栏的背景色

Javascript 尝试添加一个按钮，该按钮每次按下时都会更改我的导航栏的背景色

javascript css

Javascript 尝试添加一个按钮，该按钮每次按下时都会更改我的导航栏的背景色,javascript,css,Javascript,Css,你好，我从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

你好，我从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>
我正在尝试在我的页面上添加一个按钮，每当单击该按钮时，它都会更改导航栏的颜色。有没有办法获得随机生成的颜色？还是我必须在代码中列出颜色

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>
这是我当前的测试页面。 

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>

ul{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
背景色：蓝紫色；
}
李{
浮动：左；
}
李阿{
显示：内联块；
颜色：白色；/*更改导航栏的文本*/
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
}
李娜：停下来{
背景色：#111；
}

    

  • 

  • 

  • 

  • 


函数myFunction（）{
document.body.style.backgroundColor=“红色”；
}
谢谢。

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

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>

函数changecolor（）{
var x=数学地板（（数学随机（）*255）+0）；
变量y=Math.floor（（Math.random（）*255）+0）；
var z=数学地板（（数学随机（）*255）+0）；
document.getElementsByTagName（“ul”）[0].style.backgroundColor=“rgb”（“+x+”、“+y+”、“+z+”）；
}
ul{
背景：薰衣草；
}
    

  • 

  • 

  • 

  • 


单击
试试这个

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>

function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

$('#button_name').on('click', function(){

   var color = getRandomColor();
   document.body.style.backgroundColor = color;

});
函数getRandomColor（）{ 变量字母='0123456789ABCDEF'。拆分（''）； var color='#'； 对于（变量i=0；i<6；i++）{ 颜色+=字母[Math.floor（Math.random（）*16）]； } 返回颜色； } $（'#按钮名称'）。在（'单击'，函数（）上）{ var color=getRandomColor（）； document.body.style.backgroundColor=颜色； });
检查您是否可以执行以下操作：

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>
HTML:

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>
这是我用随机抽样法对它的看法。使用HSL可以拥有随机颜色，但仍然可以分别控制颜色的色调强度和亮度

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>

// 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%)'; 
});

用于生成随机颜色十六进制值的辅助函数谢谢！我不太确定如何将其整合到我的导航栏中。例如，document.body.style.backgroundColor=“red”；更改页面的背景。导航栏有一个吗？@Rorix如果你看一下我的解决方案，每次单击导航栏时它都会将颜色更改为随机值。如果你愿意，你可以为
ul
（例如
）设置
Id
），然后使用
document.getElementById（“navbar”）
而不是
document.getElementsByTagName（“ul”）[0]
这是一个很好的替代正常rgb和十六进制值的解决方案。 
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>