jQuery獲取隨機(jī)顏色的實例代碼
更新時間:2018年05月21日 10:59:47 作者:The_road_of_ordinary
這篇文章主要介紹了jQuery獲取隨機(jī)顏色的實例代碼,非常不錯,具有一定的參考借鑒價值,感興趣的朋友跟隨腳本之家小編來學(xué)習(xí)吧
1.js
//獲取十六進(jìn)制顏色
function randomColor1(){
var r = Math.floor(Math.random()*256);
var g = Math.floor(Math.random()*256);
var b = Math.floor(Math.random()*256);
if(r < 16){
r = "0"+r.toString(16);
}else{
r = r.toString(16);
}
if(g < 16){
g = "0"+g.toString(16);
}else{
g = g.toString(16);
}
if(b < 16){
b = "0"+b.toString(16);
}else{
b = b.toString(16);
}
return "#"+r+g+b;
}
$("h3").css("color",randomColor1());
2.html
.<h3>獲取任意顏色</h3>
效果:

下面在看一段代碼關(guān)于js幾種生成隨機(jī)顏色方法
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="btn1">調(diào)用第一種</button>
<button id="bnt2">調(diào)用第二種</button>
<button id="btn3">調(diào)用第三種</button>
<script>
var btn1=document.getElementById('btn1');
btn1.onclick=function(){
document.body.style.background=bg1()
};
var btn2=document.getElementById('bnt2');
btn2.onclick=function(){
document.body.style.background=bg2();
};
var btn3=document.getElementById('btn3');
btn3.onclick=function(){
document.body.style.background=bg3();
};
function bg1(){
return '#'+Math.floor(Math.random()*256).toString(10);
}
function bg2(){
return '#'+Math.floor(Math.random()*0xffffff).toString(16);
}
function bg3(){
var r=Math.floor(Math.random()*256);
var g=Math.floor(Math.random()*256);
var b=Math.floor(Math.random()*256);
return "rgb("+r+','+g+','+b+")";//所有方法的拼接都可以用ES6新特性`其他字符串{$變量名}`替換
}
</script>
</body>
</html>
總結(jié)
以上所述是小編給大家介紹的jQuery獲取隨機(jī)顏色的實例代碼,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
詳解微信小程序「渲染層網(wǎng)絡(luò)層錯誤」的解決方法
這篇文章主要介紹了詳解微信小程序「渲染層網(wǎng)絡(luò)層錯誤」的解決方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
ASP中進(jìn)行HTML數(shù)據(jù)及JS數(shù)據(jù)編碼函數(shù)
在有些時候我們無法控制亂碼的出現(xiàn), 比如發(fā)送郵件的時候有些郵件顯示亂碼, 比如Ajax返回數(shù)據(jù)總是亂碼. 怎么辦?2009-11-11
uniapp與webview直接進(jìn)行傳值的代碼示例
在使用UniApp開發(fā)應(yīng)用時,經(jīng)常需要實現(xiàn)WebView與UniApp之間的數(shù)據(jù)交互,文中通過代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2024-09-09
js學(xué)使用setTimeout實現(xiàn)輪循動畫
這篇文章主要為大家詳細(xì)介紹了js使用setTimeout實現(xiàn)輪循動畫,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-07-07
javascript 使用sleep函數(shù)的常見方法詳解
這篇文章主要介紹了javascript 使用sleep函數(shù)的常見方法,結(jié)合實例形式分析總結(jié)了javascript sleep函數(shù)的功能、常見使用方法與操作注意事項,需要的朋友可以參考下2020-04-04

