masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > tutorial js > javascript生成随机颜色示例代码

javascript生成随机颜色示例代码

PHP中文网
Lepaskan： 2016-05-16 19:11:09
asal
1093 orang telah melayarinya

这篇文章主要介绍了使用javascript如何生成随机颜色,需要的朋友可以参考下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<style type="text/css"> 
body{ 
font-size:12px; 
font-family:"Courier New", Courier, monospace; 
letter-spacing:5px; 
} 
ul{ 
list-style:none; 
} 
li{ 
width:130px; 
height:130px; 
line-height:130px; 
vertical-align:middle; 
text-align:center; 
float:left; 
margin-left:20px; 
} 
</style> 
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
<title>javascript生成随机颜色</title> 
<script type="text/javascript"> 
$(function(){ 
$("ul li").each(function(){ 
$(this).css("background-color",getRandomColor()); 
}); 
}) 
function getRandomColor() 
{ 
var c = &#39;#&#39;; 
var cArray = [&#39;0&#39;,&#39;1&#39;,&#39;2&#39;,&#39;3&#39;,&#39;4&#39;,&#39;5&#39;,&#39;6&#39;,&#39;7&#39;,&#39;8&#39;,&#39;9&#39;,&#39;A&#39;,&#39;B&#39;,&#39;C&#39;,&#39;D&#39;,&#39;E&#39;,&#39;F&#39;]; 
for(var i = 0; i < 6;i++) 
{ 
var cIndex = Math.round(Math.random()*15); 
c += cArray[cIndex]; 
} 
return c; 
} 
</script> 
</head> 
<body> 
<p> 
<ul> 
<li>第一个色块</li> 
<li>第二个色块</li> 
<li>第三个色块</li> 
<li>第四个色块</li> 
</ul> 
</p> 
</body> 
</html>
Salin selepas log masuk


Label berkaitan：
随机颜色
sumber：php.cn
Artikel sebelumnya：发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载_javascript技巧 Artikel seterusnya：用js获取点击图片的值!_javascript技巧
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Gaya CSS tidak digunakan pada tapak Saya sedang membuat tapak web menggunakan Bootstrap5 tetapi sifat index.css tidak digunaka...
daripada 2024-04-06 17:12:23
0
1
336
untuk gelung secara rawak pergi dari 1 hingga 0 Pada asasnya, setiap kali halaman dimuat semula, gelung for berpotensi berubah daripada 1 ...
daripada 2024-04-06 16:48:14
0
1
393
React Three Fiber: Mengapa acara skrol saya ketinggalan? Dalam ReactThreeFiber, saya mempunyai komponen React yang menghasilkan sprite yang saya ma...
daripada 2024-04-06 13:39:24
0
1
410
Gaya SASS diutamakan daripada pertanyaan media Saya cuba menggunakan pertanyaan media untuk mengatasi gaya untuk peranti desktop tetapi i...
daripada 2024-04-05 15:03:00
0
1
3396
Menukar daripada show hidden kepada show block apabila fokus tidak berfungsi Saya cuba untuk mendapatkan "searchbardropdown" saya untuk dipaparkan apabila &q...
daripada 2024-04-04 14:24:47
0
1
371
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan