image.png
点我预览效果
- css
*{
padding:0;
margin:0;
}
#app{
position: relative;
width: 600px;
height: 400px;
border:2px dashed black;
margin:20px auto;
}
#timed{
position: absolute;
top:20px;
left:20px;
font-size:20px;
}
#score{
position: absolute;
top:20px;
right:20px;
font-size:20px;
}
#main{
font-size: 100px;
text-align: center;
line-height: 300px;
}
p{
font-size: 12px;
position: absolute;
bottom:120px ;
width: 100%;
text-align: center;
}
ul{
width: 100%;
text-align: center;
line-height: 50px;
font-size: 40px;
list-style: none;
}
li{
display: inline-block;
margin:0 20px;
cursor: pointer;
}
.mask{
position: absolute;
background: rgba(1,1,1,0.8);
width: 100%;
height: 100%;
top:0;
left:0;
display: flex;
align-items: center;
justify-content: center;
}
.mask button{
width: 100px;
height: 100px;
font-size: 20px;
color:wheat;
background: gray;
border:none;
}
.mask button:hover{
background: red;
cursor: pointer;
}
- js
// 规范1：所有获取dom元素并赋值的语句写到最上面
// 规范2：在函数与函数之间不允许出现其它语句
// 获得开始按钮元素
var startBtn = document.querySelector("#start");
// 获得遮罩层元素
var mask = document.querySelector(".mask");
// 获得显示汉字的main元素
var main = document.querySelector("#main");
// 获得li
var lis = document.querySelectorAll("ul li");
// 获得存放分数的score
var scoreDiv = document.querySelector("#score");
// 获得存放倒计时的元素
var timedDiv = document.querySelector("#timed span");
// 定义数组，用于存储显示的汉字
var fonts = ["红","蓝","绿","黄","黑"];
// 定义数组，用于存储颜色
var colors = ["red","blue","green","yellow","black"];
// 分数统计
var scoreNum = 0;
// 倒计时的时间
var timeNum = 10;
// 点击按钮事件,隐藏遮罩层
startBtn.onclick = function(){
// 隐藏遮罩层
mask.style.display = "none";
// 分数初始化
scoreDiv.innerHTML = scoreNum;
// 倒计时初始化
timedDiv.innerHTML = timeNum;
//初始化main元素内容
initMain();
// 初始化LI
initLi();
// 开始倒计时
countDown();
}
function countDown(){
var timer = setInterval(function (){
// 倒计时减1
timedDiv.innerHTML = --timeNum;
// 判断时间已结束
if(timeNum === 0){
// 移除定时器
clearInterval(timer);
// 倒计时的时间重置
timeNum = 10;
if(scoreNum>=3) alert("你的眼睛非常棒");
else if(scoreNum>=1) alert("您 有点色弱")
else alert("你的眼睛瞎了")
// 分数重置
scoreNum = 0;
scoreDiv.innerHTML = scoreNum;
mask.style.display = "flex"
}
},1000)
}
// 初始化LI
function initLi(){
// 将ul->li 内的汉字以及汉字颜色随机。
// 1->先复制一份数组出来
var copyFonts = fonts.slice();
var copyColors = colors.slice();
// 2->将数组copyFonts,copyColors内的元素随机排序
copyFonts.sort(function (){
return Math.random()-0.5
})
copyColors.sort(function (){
return Math.random()-0.5
})
// 3->将数组的内容放置到li内。
lis.forEach(function (item,index){
item.innerHTML = copyFonts[index];
item.style.color = copyColors[index];
// 为li增加点击事件
item.onclick = function(){
// 判断当前的文字是否与main当中的文字 颜色一致
var mainIndex = main.dataset.index/1;
// 如何得到li文字的下标
var liIndex = fonts.indexOf(this.innerHTML);
if(mainIndex === liIndex){
scoreDiv.innerHTML = ++scoreNum;
console.log("成功")
}else{
scoreDiv.innerHTML = --scoreNum;
console.log("失败")
}
//初始化main元素内容
initMain();
// 初始化LI
initLi();
}
})
}
// 初始化main元素内容
function initMain(){
// 将id为main元素的内容设置为随机的红蓝绿黄黑
main.innerHTML = fonts[getRandom()];
// 自定义属性用于保存颜色下标
main.dataset.index =getRandom();
// 将id为main元素的文字颜色设置为随机的red,blue,green,yellow,black
main.style.color = colors[main.dataset.index ];
}
// 写一个方法用获得随机数组下标
function getRandom(){
return Math.floor(Math.random()*fonts.length);
}
- html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div id="app">
<div id="timed">倒计时：<span>60</span></div>
<div id="score">0</div>
<div id="main">黑</div>
<p>请根据上面的文字的颜色在下方选择正确的文字</p>
<ul>
<li>红</li>
<li>蓝</li>
<li>绿</li>
<li>黄</li>
<li>黑</li>
</ul>
<div class="mask">
<button id="start">开始</button>
</div>
</div>
</body>
<script src="index.js"></script>
</html>
