发表于： 2022-11-19 18:42:10
0 212
今天将js'任务一代码整理了部分出来
html+js代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,height=100%, initial-scale=1.0 ">
<link rel="stylesheet" href="hezi.css">
<link rel="stylesheet" href="hezi.js">
<title>任务一</title>
</head>
<script>
//js随机盒子颜色
function changeColor(elem){
var red = parseInt(Math.random()*256);
var blue = parseInt(Math.random()*256);
var green = parseInt(Math.random()*256);
elem.style.backgroundColor ="rgb("+red+","+blue+","+green+")";
}
</script>
<body>
<div class="hezi">
<div class="box" onclick="changeColor(this)"></div>
<div class="box" onclick="changeColor(this)"></div>
<div class="box" onclick="changeColor(this)"></div>
<div class="box" onclick="changeColor(this)"></div>
<div class="box" onclick="changeColor(this)"></div>
<div class="box" onclick="changeColor(this)"></div>
<div class="box" onclick="changeColor(this)"></div>
<div class="box" onclick="changeColor(this)"></div>
<div class="box" onclick="changeColor(this)"></div>
</div>
<button ><a>开始闪</a></button>
<button ><a>结束闪</a></button>
</body>
</html>
css代码：
* {
padding: 0;
margin: 0;
}
.hezi{
margin:0 auto;
width: 400px;
height: 400px;
border-style: none;
}
.box{
margin: 5px;
width: 100px;
height: 100px;
border: 1px solid #ccc;
float: left;
border-radius: 1rem;
}
button {
width: 100%;
margin-top: 50px;
background-color: #ffffff;
border-color: orange;
padding: 20px 0;
}
#btn {
font-size: 30px;
}
页面效果：鼠标点击盒子使盒子随机改变颜色
返回列表
评论