【JavaScript】產生隨機顏色,javascript

來源:互聯網
上載者:User

【JavaScript】產生隨機顏色,javascript

如果要做出如下效果,每次重新整理網頁則產生一種顏色,

其實非常簡單,產生隨機顏色的根本核心就是隨機構造出一個六位元,JavaScript的隨機數的問題

而且這個六位元的每一個數位0~f之內,因此就有了如下的方法:

1、首先是一個HTML布局,p標籤是是用來放使用中色彩的,div的背景顏色就是這個顏色

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>randomColor</title></head><body><p id="colorStr"></p><div id="div1" style="width:100px;height:100px"></div></body></html>
2、之後是核心的指令碼:

<script>//顏色字串var colorStr="";//字串的每一字元的範圍var randomArr=['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f'];//產生一個六位的字串for(var i=0;i<6;i++){//15是範圍上限,0是範圍下限,兩個函數保證產生出來的隨機數是整數colorStr+=randomArr[Math.ceil(Math.random()*(15-0)+0)];}document.getElementById("colorStr").innerHTML="顏色為:#"+colorStr;document.getElementById("div1").style.backgroundColor="#"+colorStr;</script>



聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.