【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>
时间: 2024-10-29 19:07:17

【JavaScript】产生随机颜色的相关文章

[ javascript 创建随机颜色 ] 多种方式来创建随机颜色

8 在制作饼图或标签云时,我们通常需要很多颜色,方法有二.一是准备一组漂亮的候选颜色,二是随机生成颜色.在数量很多或不明确时,我想后者就是唯一的出路了.谷歌了一下,整理如下,按由浅入深的顺序排列. 10 实现1 11 12 var getRandomColor = function(){ 13 return '#' + 14 (function(color){ 15 return (color += '0123456789abcdef'[Math.floor(Math.random()*16)]

javascript获取随机颜色

方案一: function getRandomColor(){ var str = "0123456789abcdef"; var t = "#"; for(j=0;j<6;j++) {t = t+ str.charAt(Math.random()*str.length);} return t; } 方案二: function getRandomColor(){ return "#"+("00000"+((Math.ra

echarts之词云随机颜色的配置

echarts中的词云字体产生随机颜色,最主演的是要引入worldcloud.js,另外还要有jquery.js文件与echarts.js文件的引入,通过配置即可实现词云随机颜色的产生.下面为大家介绍两种随机颜色的方法. world.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</tit

鼠标点击出现爱心+社会主义价值观+随机颜色的文字+鼠标cursor自定义图片

js动画--鼠标点击出现爱心 只需将如下JS代码放到</body>之前就好了 <script type='text/javascript' src='//api.dujin.org/js/aixintexiao.js'></script> 完整代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

随机颜色的多种写法

今天给大家讲讲随机颜色怎么来实现.以下是我的两种方法: 方法一: 十六进制随机颜色:字符串的拼接; js: function ranColor(){ var colors="#"; for(var i=0; i<6;i++){ colors=colors+Math.floor(Math.random()*16).toString(16); } return colors; } var oDiv=document.getElementById('div'); oDiv.style.

C#取得随机颜色

C#取得随机颜色的方法.分享给大家供大家参考.具体实现方法如下: 复制代码代码如下: public string GetRandomColor(){        Random RandomNum_First = new Random((int)DateTime.Now.Ticks);        //  对于C#的随机数,没什么好说的        System.Threading.Thread.Sleep(RandomNum_First.Next(50));        Random R

JS中取整以及随机颜色问题

前言:感觉自己已经好久好久没有写博客了,最近都是在写在线笔记比较多.现在来到新公司了,昨天刚刚完成一个项目所以今天有空研究研究一下前端方面的技术.下午在看一个游戏代码的时候,发现了几个别人留下的不错的代码小技巧.譬如说取整问题,随机颜色问题.其实这些问题都不大,但是仔细研究一下还是别有洞天,对于提高前端开发方面的理解还是很有帮助的. 取整问题: 1.常规方法: Math.floor(x),返回小于等于x,且最接近x的整数:   Math.floor(1.2);//1 Math.floor(-2.

随机颜色,使程序崩溃提醒

// 随机颜色 - (UIColor*)randomColor { CGFloat r = arc4random() % 256 / 255.0; CGFloat g = arc4random() % 256 / 255.0; CGFloat b = arc4random() % 256 / 255.0; return [UIColor colorWithRed:r green:g blue:b alpha:1]; } 调用:[[self randomColor] set]; 使程序崩溃提醒 i

随机颜色的产生

1.产生随机颜色: -(UIColor *)randomColor{  //产生随机颜色 static BOOL seed = NO; if (!seed) { seed = YES; srandom(time(NULL)); } CGFloat red = (CGFloat)random()/(CGFloat)RAND_MAX; CGFloat green = (CGFloat)random()/(CGFloat)RAND_MAX; CGFloat blue = (CGFloat)random