这是我参与「掘金日新计划 · 4 月更文挑战」的第23天，点击查看活动详情。
我正在参加 码上掘金体验活动，详情：show出你的创意代码块 一起养成写作习惯！
今天的内容是点击小圆，就可以进行随机的背景颜色的更改。
代码块
技术说明
html：button标签
css:flex布局，justify-content|align-items居中效果，border-radius调整标签的弧度
js:querySelector()方法返回匹配指定 CSS 选择器元素的第一个子元素,math和random函数，background赋予背景颜色
代码展示
html
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<!-- <script src="js/index.js" type="text/javascript" charset="utf-8"></script> -->
</head>
<body>
<button type="button">点我！</button>
<script type="text/javascript">
document.querySelector('button').onclick = function(){
var r = Math.round(Math.random()*255);
var g = Math.round(Math.random()*255);
var b = Math.round(Math.random()*255);
var rgb = document.body.style.backgroundColor = 'rgb('+r+','+g+','+b+')';
}
</script>
</body>
</html>
css
padding: 0;
margin: 0;
}
body{
/* flex布局 */
display: flex;
/* 使写出的元素进行居中处理 */
justify-content: center;
align-items: center;
/* 使圆出现在合适的位置，比如这里展示的是居中 */
height: 100vh;
}
button{
/* 画出一个标准的圆 */
width: 200px;
height: 200px;
border-radius: 50%;
border-width: 0;
}
整体思路
首先，画出一个按钮，对按钮的样式进行了一定的更改。之后加上了js，完成的动作为点到这个按钮的时候，整个网页的背景颜色就会进行一个改变。这里讲颜色的rgb进行了一个整合，因为颜色的取值为rgb,所以选择将r,g,b三者分开，每一个分别的进行随机数的选取，之后放在一起进行整合就成了我们想要的样子啦
也可以将中间的圆换成其他的内容，然后进行点击，也会出现类似的效果~
