Question

因此，当我向下滚动时，我会放置一个最小化的标题，并在向上滚动时重新生长。当标题折叠时，它会变为浅灰色，打开时会改变它的颜色。这是我找到的代码：

$(window).scroll(function () {
 if ($(document).scrollTop() == 0) {
 $('#header_nav').removeClass('tiny');
 } else {
 $('#header_nav').addClass('tiny');
 }
});

我希望标题在刷新页面时随机更改颜色，但我想使用精确的颜色。我发现如何更改背景颜色，我可以，对于'微小'标题，但我对jQuery还是太愚蠢了，所以我无法编写颜色随机函数然后将其插入上面的代码。

你能帮助我吗？感谢您的帮助：）

Answer 1

您好，您可以在Jquery上使用这样的函数：

$(document).ready(function () {
  var back = ["#ff0000","blue","gray"];
  var rand = back[Math.floor(Math.random() * back.length)];
  $('div').css('background',rand);
})

在var back上，您可以编写所需的所有颜色。然后，您可以为标题设置选择器而不是$('div')。

查看此演示 http://jsfiddle.net/sJTHc/5/

Answer 2

var randomColor = Math.floor(Math.random()*16777215).toString(16);

Answer 3

＆＃13;

$(function() {
  $("#random_color").click(function() {
    $(".bola").each(function(index) {
      var colorR = Math.floor((Math.random() * 256));
      var colorG = Math.floor((Math.random() * 256));
      var colorB = Math.floor((Math.random() * 256));
      $(this).css("background-color", "rgb(" + colorR + "," + colorG + "," + colorB + ")");
    });
  });
});

＆＃13;

html {
  height: 100%
}
body {
  background-color: #fff;
  height: 100%;
  margin: 0px auto;
  width: 800px;
}
#b0 {
  float: left;
  background-color: #DCDCDC;
  width: 100%;
  height: 100%
}
.linha {
  float: left;
  width: 100%;
  margin-bottom: 10px
}
.bola {
  float: left;
  background-color: #fff;
  width: 30px;
  height: 30px;
  margin-right: 10px;
  border: 2px solid #000;
  border-radius: 10px;
  cursor: pointer
}
.bolaSel {
  border: 2px solid #0000FF;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='b0'>
  <div id='b1'>
    <button id="random_color">Sortear cores</button>
    <div class='linha'>
      <div class='bola'></div>
      <div class='bola'></div>
      <div class='bola'></div>
      <div class='bola'></div>
    </div>
    <div class='linha'>
      <div class='bola'></div>
      <div class='bola'></div>
      <div class='bola'></div>
      <div class='bola'></div>
    </div>
    <div class='linha'>
      <div class='bola'></div>
      <div class='bola'></div>
      <div class='bola'></div>
      <div class='bola'></div>
    </div>
    <div class='linha'>
      <div class='bola'></div>
      <div class='bola'></div>
      <div class='bola'></div>
      <div class='bola'></div>
    </div>
  </div>
</div>

＆＃13;

您可以添加第四个变量来设置透明度，但是您需要使用＆＃34; rgba（varR，varG，varR，transparency）;＆＃34;而不是常见的rgb

Answer 4

var rand = [ '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f' ];
var color = '#' + rand[Math.ceil(Math.random() * 15)] + rand[Math.ceil(Math.random() * 15)] + rand[Math.ceil(Math.random() * 15)] + rand[Math.ceil(Math.random() * 15)] + rand[Math.ceil(Math.random() * 15)] + rand[Math.ceil(Math.random() * 15)];

使用该Jquery代码并调用color随机颜色。
示例：var RandColor = color;
希望它有所帮助。

Answer 5

我制作了剧本，但也包含了一些变化。在您的代码中，您会添加多个类“小”。因为事件被每个卷轴移动触发。我刚刚添加了一个类，我首先检查是否已经设置了这个类。如果尚未设置，那么我将更改滚动上的颜色。如果你删除了检查＆＃39;，颜色会改变每个卷轴运动，如果你没有癫痫症，这可能会非常酷：）

    // array with the colors, you can add the colors here.      
var colors = ["red", "blue", "yellow", "black", "green"];

$(window).scroll(function () {
     if ($(document).scrollTop() == 0) 
     {
        //if scrollbar is at the top (doing nothing atm)
     } 
     else if($( "#header_nav" ).hasClass( "colorSet" ))
     {
        //if the colorSet class has been apended (remove this, if you want some fun :))
     }
     else
     {
        //first, add the class, so we know we do not have to walk tru this anymore.
        $('#header_nav').addClass('colorSet');

        // Apend a CSS background-color based on a rand function on our color array
        $('#header_nav').css( "background-color", colors[Math.floor(Math.random() * colors.length)] );
     }
});

现在，如果需要，可以更改第一个if语句（scrollTop（））。如果你在这里删除colorSet类，如果有人向下滚动，你会得到一个新的随机颜色 - ＆gt;顶部 - ＆gt;再次下来。

对于具有随机颜色的多个类;

    // array with the colors, you can add the colors here.      
var colors = ["red", "blue", "yellow", "black", "green"];

$(window).scroll(function () {
     if ($(document).scrollTop() == 0) 
     {
        //if scrollbar is at the top (doing nothing atm)
     } 
     else if($( "#header_nav" ).hasClass( "colorSet" ))
     {
        //if the colorSet class has been apended (remove this, if you want some fun :))
     }
     else
     {
        //first, add the class, so we know we do not have to walk tru this anymore.
        $('#header_nav').addClass('colorSet');

        // Apend a CSS background-color based on a rand function on our color array
        $('#header_nav').css( "background-color", colors[Math.floor(Math.random() * colors.length)] );
        $('.header').css( "background-color", colors[Math.floor(Math.random() * colors.length)] );
        $('.header.tiny').css( "background-color", colors[Math.floor(Math.random() * colors.length)] );
     }
});

对于拥有相同颜色的多个班级;

// array with the colors, you can add the colors here.      
var colors = ["red", "blue", "yellow", "black", "green"];

$(window).scroll(function () {
     if ($(document).scrollTop() == 0) 
     {
        //if scrollbar is at the top (doing nothing atm)
     } 
     else if($( "#header_nav" ).hasClass( "colorSet" ))
     {
        //if the colorSet class has been apended (remove this, if you want some fun :))
     }
     else
     {
        //first, add the class, so we know we do not have to walk tru this anymore.
        $('#header_nav').addClass('colorSet');

        var color = colors[Math.floor(Math.random() * colors.length)];
        // Apend a CSS background-color based on a rand function on our color array
        $('#header_nav').css( "background-color", color  );
        $('.header').css( "background-color", color );
        $('.header.tiny').css( "background-color", color );
     }
});

Answer 6

它可能会帮助您：

 window.setInterval(function(){

    var randomColor = '#'+ ('000000' + Math.floor(Math.random()*16777215).toString(16)).slice(-6);
    
    $('body').css({
      'background-color' : randomColor,
    });

  }, 2000);

body {
  background-color: #000001;
  transition: 2s;
}

#container {
  text-align: center;
  color: #ffffff;
  font-family: arial, helvetica, sans-serif;
  font-weight: bolder;
  font-size: 120px;
  text-transform: uppercase;
  transition: 1s;
}

<html>
  
  <body>
    
    <div id="container">
      <p>Random Colour<br/> Background</p>
    </div>
    
  </body>
  
</html>

查看此演示：https://codepen.io/Halfhappy/pen/DmxuB

jQuery中的随机颜色

6 个答案: