communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > js tutoriel > javascript生成随机颜色示例代码

javascript生成随机颜色示例代码

PHP中文网
Libérer： 2016-05-16 19:11:09
original
1104 Les gens l'ont consulté

这篇文章主要介绍了使用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>
Copier après la connexion


Étiquettes associées：
随机颜色
source：php.cn
Article précédent：发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载_javascript技巧 Article suivant：用js获取点击图片的值!_javascript技巧
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Styles CSS non appliqués au site Je crée un site Web en utilisant Bootstrap5 mais les propriétés index.css ne sont pas appl...
Depuis 2024-04-06 17:12:23
0
1
336
la boucle for passe aléatoirement de 1 à 0 Fondamentalement, chaque fois que la page est actualisée, la boucle for a le potentiel de ...
Depuis 2024-04-06 16:48:14
0
1
393
React Three Fiber : Pourquoi mes événements de défilement sont-ils en retard ? Dans ReactThreeFiber, j'ai un composant React qui génère un sprite que je souhaite conserv...
Depuis 2024-04-06 13:39:24
0
1
410
Les styles SASS ont priorité sur les requêtes multimédias J'essaie d'utiliser des requêtes multimédias pour remplacer les styles des appareils de bu...
Depuis 2024-04-05 15:03:00
0
1
3396
Passer de Show Hidden à Show Block lorsque le focus ne fonctionne pas J'essaie de faire apparaître mon "searchbardropdown" lorsque vous cliquez sur &q...
Depuis 2024-04-04 14:24:47
0
1
371
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal