这是我参与「掘金日新计划 · 4 月更文挑战」的第22天，点击查看活动详情。
上班的周日，果然不是那么的快乐。甚至有点困┭┮﹏┭┮。
但是今天的文章依旧
效果展示
效果说明
当你的鼠标点击图片的时候，背景也会跟着改变。比如这幅图，当你点击button这个圆的时候，后面的背景也会变成浅绿色。
用到的知识点
html:一个普通的button标签
css:将小按钮变成一个圆（用到了margin，padding，border-radius），background-color: #0000FF;画出一个喜闻乐见的圆形；设置按钮宽度，设置按钮高度，消去按钮的边框
js:onclick点上去之后会改变整个背景的颜色
代码展示
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#button1{
background-color: #0000FF;
/* 画出一个喜闻乐见的圆形 */
width: 200px;
/*设置按钮宽度，设置按钮高度*/
height: 200px;
border-radius: 50%;
color: black;
/*字体颜色*/
background-color: #92b3a5;
/*按钮背景颜色*/
border-width: 0;
/*消去按钮的边框*/
margin: 0;
outline: none;
font-size: 15px;
text-align: center;
}
</style>
<script type="text/javascript">
window.onload = function() {
button1.onclick = function() {
var test = body1.style.backgroundColor = "#83cbac";
button1.innerHTML = test
}
}
</script>
</head>
<body id="body1">
<input type="button" id="button1" value="button1" />
</body>
</html>
总结：首先画出了一个圆出来，之后要对这个圆进行一些列的操作，比如今天的内容就是点击这个圆，背景更改颜色。
所以在画完html部分，就要画出一个圆，设置border-radius为50%并且将宽和高设置同样的值。最后做到点击圆的时候，去更改整个颜色就可以了，注意的点是，后面的整个颜色，在body上设置id,然后取此id,对背景颜色进行更改就可以了。
最后的引申是点击一个按钮，可以随意随机的更改颜色。这个将rgb三个分别设置，然后取值就可以啦~
