JS如何输出随机背景颜色

最新推荐文章于 2024-06-06 14:51:09 发布

怪瘦就是我

最新推荐文章于 2024-06-06 14:51:09 发布

阅读量2k

点赞数

文章标签： JAVASCRIPT

本文链接：https://blog.csdn.net/pipixian2/article/details/102511682

版权

JS如何输出随即背景颜色

**原理：**通过random（）方法生成的随机数乘以255并取整，循环三次获得rgb（）三个值，然后进行封装，使其按照指定格式输出。
十六进制方法需调用 toString（16）方法，颜色属性值转换为十六进制，然后封装输出。

PS:将以下代码直接粘贴，即可运行。

<head>
	<meta charset="utf-8">
	<title>随机修改背景颜色</title>
</head>

<script type="text/javascript">
	window.onload=function(){
		var oDiv=document.getElementById('div');
		var oBtn=document.getElementById('btn');
		var oBtn2=document.getElementById('btn2');
		var timer;
		// rgb方法
		function changeColor(){
			var r=Math.round(255*Math.random()) ;
			var g=Math.round(255*Math.random());
			var b=Math.round(255*Math.random());
			var rgb="rgb("+r+","+g+","+b+")";
			return rgb;
		}
		// 十六进制方法
		function change16Color(){
			var r=Math.round(255*Math.random()).toString(16) ;
			var g=Math.round(255*Math.random()).toString(16);
			var b=Math.round(255*Math.random()).toString(16);
			var rgb2="#"+r+g+b;
			return rgb2;
		}
		// 单击事件
		oBtn.onclick=function(){
			col=oDiv.style.backgroundColor=changeColor();
		}
		// 双击事件
		oBtn.ondblclick=function(){
			timer=setInterval(function(){
				oDiv.style.backgroundColor=change16Color();
			},50)
		}
		// 清空颜色
		oBtn2.onclick=function(){
				oDiv.style.backgroundColor='';
			}
		// 停止颜色
		oDiv.onclick=function(){
				clearInterval(timer);
		}
	}
</script>
<body>
	<div id="div"></div>
	<input id="btn" type="button" value="变色">
	<input id="btn2" type="button" value="清空">
</body>

主要为两个changeColor()，change16Color()方法。
下方为演示
单击变色按钮，对div背景颜色进行修改。
单机清空按钮，重置div背景颜色。
双击变色按钮，触发定时器，不停变换div背景颜色。
单机div可以停止定时器，div颜色停止改变。

环境：Hbuilder X,Chrome浏览器
语言：CSS,HTML,JAVASCRIPT及部分DOM

怪瘦就是我

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
JS如何输出随机背景颜色

JS如何输出随即背景颜色**原理：**通过random（）方法生成的随机数乘以256并取整，循环三次获得rgb（）三个值，然后进行封装，使其按照指定格式输出。十六进制方法需调用 toString（16）方法，颜色属性值转换为十六进制，然后封装输出。PS:将以下代码直接粘贴，即可运行。<head> <meta charset="utf-8"> <title...
复制链接

扫一扫