js随机改变颜色

最新推荐文章于 2023-04-14 10:35:45 发布

majic_Jing

最新推荐文章于 2023-04-14 10:35:45 发布

阅读量2k

点赞数

分类专栏： HTML 5 文章标签： HTML js 随即改变颜色

本文链接：https://blog.csdn.net/majic_Jing/article/details/102325567

版权

HTML 5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

目的：用js将页面设置成随着鼠标点击界面而随机改变颜色。

代码如下：

<!DOCTYPE html>
<html>
<head>
	<title>随机改变页面颜色</title>
	<script type="text/javascript">
		function changeBg()
		{
			//将背景颜色的值定义为空字符串
			var bgColor="";
			//循环六次，生成一个随机的六位数
			for(var i=0;i<6;i++)
			{
				bgColor+=""+Math.round(Math.random()*9);
			}
			//将随机生成的数赋给页面的颜色值
			document.body.style.backgroundColor="#"+bgColor;
		}
		//为页面的单击事件绑定处理函数
		document.onclick=changeBg;
	</script>
	<style type="text/css">
		.solid{
			width: 160px;
			padding: 6px;
			text-align: center;
			border-right: #222 4px solid;
			border-top: #ddd 4px solid;
			border-left: #ddd 4px solid;
			border-bottom: #222 4px solid;
			background-color: #ccc;
		}
	</style>
</head>
<body>
</body>
</html>

js代码的主要意思就是随机生成6个数字组成一个颜色值，让界面随机改变颜色。

majic_Jing

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
js随机改变颜色

目的：用js将页面设置成随着鼠标点击界面而随机改变颜色。代码如下：<!DOCTYPE html><html><head> <title>随机改变页面颜色</title> <script type="text/javascript"> function changeBg() { //将背景颜...
复制链接

扫一扫