jQuery中的随机颜色

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

香港专业教育学院取得了剧本，但也包含了一些变化。在你的代码中，你可以追加多个类的'小'，因为事件被每一个scrollmovement触发。我刚刚添加了一个类，我首先检查是否已经设置了这个类。如果它没有设置，那么我会改变滚动的颜色。 如果删除了“检查”，颜色会改变每scrollmovement，它可以是，如果你是不是非常酷的癫痫:)

// 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类，如果某人再次向下滚动 - >上 - >下，您将获得一个新的随机颜色。

对于随机颜色的多个类;

// 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 3

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

Answer 4

$(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 + ")"); 
 
    }); 
 
    }); 
 
});

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; 
 
}

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

您可以添加第四个变量来设置透明度，但你需要使用 “RGBA（varR，VARG，varR，透明度）;”代替普通的rgb

Answer 5

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;
希望它有帮助。