利用JavaScript模拟给四个小球上色

发烧的小龙虾

于 2017-07-11 23:14:32 发布

阅读量361

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaWeb 文章标签： javascript java web

本文链接：https://blog.youkuaiyun.com/shijie97/article/details/75000184

JavaWeb 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现的随机颜色分配算法。通过该算法可以为四个不同的对象随机分配四种颜色，并确保每个对象的颜色各不相同。算法首先为每个对象生成一个随机数，再通过排序和映射将这些随机数转换成四种预设颜色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

其实还挺有难度的，我想了好久，显示想到用比大小的方法，然后慢慢做就试出来了....

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	分配情况如下
	<input type="button" value="click me!" onclick="aa()"><br/>
	<span id="attribute1"></span>
	<span id="attribute2"></span>
	<span id="attribute3"></span>
	<span id="attribute4"></span>
	<script>
	function aa(){
		var a=new Array(4);
		var b=new Array(4);
		var ch=new Array(4);
		var color=new Array(4);
		var i,j,t,k;
		ch[0]="attribute1";
		ch[1]="attribute2";
		ch[2]="attribute3";
		ch[3]="attribute4";
		color[0]="红";
		color[1]="黄";
		color[2]="蓝";
		color[3]="绿";
		for(i=0;i<4;i++)
			a[i]=b[i]=Math.random();
		for(i=0;i<3;i++)
			for(j=0;j<3-i;j++)
				if(a[j]<a[j+1]){
					t=a[j];
					a[j]=a[j+1];
					a[j+1]=t;
				}
		for(i=0;i<4;i++)
			for(j=0;j<4;j++)
				if(b[j]==a[i])
					b[j]=i+1;
		for(i=0;i<4;i++)
			for(j=1;j<=4;j++){
				if(b[i]==j){
					k=i+1;
					document.getElementById(ch[i]).innerHTML="第"+k+"个球的颜色是"+color[j-1]+"色"+"<br/>";
				}
			}
		}
	</script>
</body>
</html>