博客列表 >js实现生成随机色

js实现生成随机色

左手Leon的博客
左手Leon的博客原创
2019年04月03日 19:24:08625浏览

实例

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>随机颜色</title>
	<style type="text/css">
		*{margin:0;padding: 0}
		div{
			width:1000px;
			height:800px;
			margin:50px auto;
		}
	</style>
	<script type="text/javascript" src="static/js/jquery.js"></script>
</head>
<body>
	<div class="box">
		<button onclick="bg_color()">生成随机背景颜色</button>
	</div>
	<script>
		function bg_color(){
			var bg='#';
			r=Math.floor(Math.random()*16).toString(16)+Math.floor(Math.random()*16).toString(16);
			g=Math.floor(Math.random()*16).toString(16)+Math.floor(Math.random()*16).toString(16);
			b=Math.floor(Math.random()*16).toString(16)+Math.floor(Math.random()*16).toString(16);
			bg+=r+g+b;
			console.log(bg);
			document.getElementsByClassName('box')[0].style.background=bg;
			
		}
	</script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

心得:

toString()要生成十六进制时,要在里面加参数16

另有通过做好一个包含十六进制数的数组,生成随机的数组下标,循环组合出颜色值

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议