jQuery獲取隨機顏色的實例代碼
更新時間：2018年05月21日 10:59:47 作者：The_road_of_ordinary
這篇文章主要介紹了jQuery獲取隨機顏色的實例代碼,非常不錯，具有一定的參考借鑒價值，感興趣的朋友跟隨腳本之家小編來學(xué)習(xí)吧
1.js
//獲取十六進制顏色
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幾種生成隨機顏色方法
<!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獲取隨機顏色的實例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
接觸和學(xué)習(xí)javascript也有3~4年了，真正牽扯到前后臺數(shù)據(jù)的交互，數(shù)據(jù)算法等高級編程知之甚少，甚至很少用，如果你問我你知道js什么知識呢？我可能只能說知道點jQuery的技巧，說編程都談不上，所以需要把某一些技巧作為編程習(xí)慣固定下來，免于以后有人問我你知道什么？2015-04-04
javascript 讀取內(nèi)聯(lián)之外的樣式(style、currentStyle、getComputedStyle區(qū)別介紹
最常用的是style屬性，在JavaScript中，通過document.getElementById(id).style.XXX就可以獲取到XXX的值，但意外的是，這樣做只能取到通過內(nèi)嵌方式設(shè)置的樣式值，即style屬性里面設(shè)置的值。2010-05-05
微信小程序scroll-view實現(xiàn)左右聯(lián)動
這篇文章主要為大家詳細介紹了微信小程序scroll-view實現(xiàn)左右聯(lián)動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
JavaScript將相對地址轉(zhuǎn)換為絕對地址示例代碼
本文為大家詳細介紹下JavaScript怎么將相對地址轉(zhuǎn)換為絕對地址，具體的示例如下，感興趣的朋友可以參考下哈，希望對大家有所幫助2013-07-07
這篇文章主要介紹了前端使用Blob下載文件的幾種方式,分別是直接返回文件的網(wǎng)絡(luò)地址和返回文件流,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2025-01-01
JavaScript封閉函數(shù)及常用內(nèi)置對象示例
這篇文章主要介紹了JavaScript封閉函數(shù)及常用內(nèi)置對象,結(jié)合實例形式分析了JavaScript封閉函數(shù)及常用內(nèi)置對象的定義與簡單使用相關(guān)操作技巧,需要的朋友可以參考下2019-05-05
如何使用bootstrap框架 bootstrap入門必看!
如何使用bootstrap？這篇文章就是告訴大家如何使用bootstrap框架，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
你知道世界上有多少種瀏覽器嗎？除了我們熟知的IE, Firefox, Opera, Safari四大瀏覽器之外，世界上還有近百種瀏覽器。2009-02-02
本文主要介紹了js實現(xiàn)下一頁頁碼效果的實例，具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
這篇文章主要介紹了詳解webpack進階之插件篇，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07