快捷導(dǎo)航

jQuery獲取隨機(jī)顏色的實(shí)例代碼

更新時(shí)間：2018年05月21日 10:59:47 作者：The_road_of_ordinary

這篇文章主要介紹了jQuery獲取隨機(jī)顏色的實(shí)例代碼,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，感興趣的朋友跟隨腳本之家小編來(lái)學(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ī)顏色的實(shí)例代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

二級(jí)域名或跨域共享Cookies的實(shí)現(xiàn)方法
適用于Asp。在主域名設(shè)置的Cookie，在各子域名共用；適用于博客等提供二級(jí)域名。這個(gè)問(wèn)題，以網(wǎng)上有眾多帖子，可惜都沒(méi)有完整解決。
2008-08-08
詳解微信小程序「渲染層網(wǎng)絡(luò)層錯(cuò)誤」的解決方法
這篇文章主要介紹了詳解微信小程序「渲染層網(wǎng)絡(luò)層錯(cuò)誤」的解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2021-01-01
ASP中進(jìn)行HTML數(shù)據(jù)及JS數(shù)據(jù)編碼函數(shù)
在有些時(shí)候我們無(wú)法控制亂碼的出現(xiàn), 比如發(fā)送郵件的時(shí)候有些郵件顯示亂碼, 比如Ajax返回?cái)?shù)據(jù)總是亂碼. 怎么辦?
2009-11-11
限制textbox或textarea輸入字符長(zhǎng)度的JS代碼
textbox或textarea的輸入字符限制有很多方法，在本將為大家詳細(xì)介紹下js中時(shí)如何實(shí)現(xiàn)的，感興趣的朋友不要錯(cuò)過(guò)
2013-10-10
前端數(shù)據(jù)加密方式的常用6種使用最詳解
在前端開(kāi)發(fā)中加密技術(shù)是保護(hù)數(shù)據(jù)安全的重要手段,本文介紹了六種常用的加密方法,其中包括Base64、MD5、SHA256、SHA1、AES和字符串的escape編碼,每種加密方法都有其特定用途和使用場(chǎng)景,選擇合適的加密方法可以有效提升應(yīng)用的安全性,需要的朋友可以參考下
2024-10-10
JavaScript的事件機(jī)制詳解
事件是將JavaScript腳本與網(wǎng)頁(yè)聯(lián)系在一起的主要方式，是JavaScript中最重要的主題之一。本文將詳細(xì)探討JavaScript的事件機(jī)制，并對(duì)比分析了瀏覽器之間的不同，具體內(nèi)容包括事件流、事件處理程序綁定方式、事件對(duì)象等。
2017-01-01
uniapp與webview直接進(jìn)行傳值的代碼示例
在使用UniApp開(kāi)發(fā)應(yīng)用時(shí),經(jīng)常需要實(shí)現(xiàn)WebView與UniApp之間的數(shù)據(jù)交互,文中通過(guò)代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2024-09-09
js學(xué)使用setTimeout實(shí)現(xiàn)輪循動(dòng)畫(huà)
這篇文章主要為大家詳細(xì)介紹了js使用setTimeout實(shí)現(xiàn)輪循動(dòng)畫(huà)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-07-07
javascript 使用sleep函數(shù)的常見(jiàn)方法詳解
這篇文章主要介紹了javascript 使用sleep函數(shù)的常見(jiàn)方法,結(jié)合實(shí)例形式分析總結(jié)了javascript sleep函數(shù)的功能、常見(jiàn)使用方法與操作注意事項(xiàng),需要的朋友可以參考下
2020-04-04
JS簡(jiǎn)單實(shí)現(xiàn)數(shù)組去重的方法分析
這篇文章主要介紹了JS簡(jiǎn)單實(shí)現(xiàn)數(shù)組去重的方法,結(jié)合具體實(shí)例形式分析了javascript數(shù)組遍歷、判斷實(shí)現(xiàn)去重復(fù)的相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下
2017-10-10