实现点击不同的颜色出现不同效果
效果图：
运行代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.common1{
width: 50px;
height: 50px;
background-color: aqua;
position: absolute;
}
.common2{
width: 100px;
height: 100px;
background-color: blueviolet;
position: absolute;
}
.common3{
width: 150px;
height: 150px;
background-color: wheat;
position: absolute;
}
</style>
</head>
<body>
<div class="common3"></div>
<div class="common2"></div>
<div class="common1"></div>
<script>
var div1=document.querySelector('.common1')
div1.onclick=function(e){
console.log('点击了青色')
}
var div2=document.querySelector('.common2')
div2.onclick=function(e){
console.log('点击了紫色')
}
var div3=document.querySelector('.common3')
div3.onclick=function(e){
console.log('点击了肉色')
}
</script>
</body>
</html>
大家也可以试试点击颜色时可以移动那个颜色，不止是出现在console中
