发表于： 2019-10-09 23:47:02
0 919
JS任务1完成40%左右
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>js task01</title>
<link rel="stylesheet" href="task01.css">
</head>
<body>
<div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
</div>
<input type="button" value="开始闪" onclick="start()">
<input type="button" value="结束闪" onclick="">
<script src="task01.js"></script>
</body>
</html>
接着添加CSS样式，变成大概模样
刚开始开始JS样式，就跟开始做CSS任务一的时候一脸懵逼，知道一些想法步骤，但就是无从下手。。
首先获取需要JS改变样式的数组
// 获取标签 DOM元素
var box = document.getElementsByTagName('div');
接着随机选出三个盒子，并且设置不重复
for(i=0;i<9;i++){
// 随机选择1-9中的三个盒子
var a = Math.ceil(Math.random()*9);
var b = Math.ceil(Math.random()*9);
var c = Math.ceil(Math.random()*9);
if (a !== b && b !== c && c !== a) {
break;
}
接着添加随机颜色
// 添加随机颜色
function randomcolor() {
var r = Math.floor(Math.random()*256);
var g = Math.floor(Math.random()*256);
var b = Math.floor(Math.random()*256);
return "rgb(" + r + ',' + g + ',' + b + ")";
// 每行随机选择一个数字，然后组合在一起就成了随机颜色
}
再给选出来的盒子赋值随机颜色
// 为随机出来的三个盒子赋值上面选出来的随机颜色
box[a].style.backgroundColor = randomcolor();
box[b].style.backgroundColor = randomcolor();
box[c].style.backgroundColor = randomcolor();
把上面的内容放进函数里面
function randombox() {
创建一个单击事件
// 单击按钮，开始显示颜色
function start() {
randombox();
}
把单击函数名写进按钮
<input type="button" value="开始闪" onclick="start()">
每次点击都会出现三个随机颜色，但是旧的盒子没还原
明天的计划：
1：解决颜色会出现重复的问题，并且颜色不能为原本的橙色
2：添加每1000毫秒循环一次，并且其他盒子还原颜色。
3：添加结束按钮功能。
返回列表
评论