html 选字游戏

来源：互联网发布：兴业淘宝金卡额度多少编辑：程序博客网时间：2024/05/03 14:49

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
}
.fl{
float: left;
}
.fr{
float: right;
}
.clearfix:after{
content: '';
display: block;
clear:both;
}
.wrap{
position: relative;
width: 500px;height: 98%;
border: 5px solid #cef;
margin:0 auto;
}
.countdown,.score{
width: 50%;
padding: 10px 0 30px;
text-align: left;
text-indent: 1em;
font-size: 30px;
}
.txt{
font-size: 60px;
line-height: 180px;
text-align: center;
}
.tip{
text-align: center;
font-size: 32px;
margin-top: 60px;
}
.btns{
width: 510px;
height: 100px;
position: absolute;
left: 0;
bottom: 30px;
line-height: 100px;
margin-left: -10px;
}
ul.btns li{
float: left;
width:92px;
list-style: none;
text-align: center;
font-size: 42px;
background: #ccc;
border-radius: 5px;
margin-left: 10px;
cursor: pointer;

}
</style>
</head>
<body>
<div class="wrap">
<div class="header clearfix">
<div class="countdown fl">倒计时：10</div>
<div class="score fr">得分：0</div>
</div>
<div class="main">
<p class="txt">黄</p>
<p class="tip">根据字体的颜色选出与其颜色对应的中文描述</p>
</div>

<ul class="btns">
<li>红</li>
<li>黄</li>
<li>蓝</li>
<li>绿</li>
<li>黑</li>
</ul>
</div>
</body>
<script type="text/javascript">
//获取上面的文字
var txt = document.querySelector('.txt');
//存放分数的div
var scoreDiv = document.querySelector('.score');
var grade = 0; //分数
//根据字体的颜色选出与其颜色对应的中文描述
//新建两个数组，分别用来存放颜色和文字，并且一一对应
var colorArr = ['red','skyblue','lavender','pink','green'];
var txtArr = ['红','蓝','紫','粉','绿'];
//随机上面文字的内容和颜色
function randTop(){
txt.style.color = colorArr[randFn()];
txt.innerHTML = txtArr[randFn()];
}
randTop();
//随机函数，0-4
function randFn(){
return parseInt(Math.random() * 5);
}
//------------------------------------------------------------
//随即下面五个按钮的文字和颜色
var aBtns = document.querySelectorAll('.btns li');
//生成不重复随机数的函数
function randNoReapeat(){
var arr = [];
while(arr.length < 5){
var bol = true;
var a = randFn();
for(var i = 0; i < arr.length; i ++){
if(arr[i] == a){
bol = false;
}
}
if(bol == true){
arr.push(a);
}
}
return arr;
}
//随即下面的按钮的文字和颜色
function randBtns(){
var arr1 = randNoReapeat(); //颜色
var arr2 = randNoReapeat(); //文字
for(var i = 0; i < aBtns.length; i ++){
aBtns[i].style.color = colorArr[arr1[i]];
aBtns[i].innerHTML = txtArr[arr2[i]];
}
}
randBtns();
//--------------------------------------------------------------
//给下面的按钮添加点击事件
for(var i = 0; i < aBtns.length; i ++){
aBtns[i].onclick = function(){
//判断：根据字体的颜色选出与其颜色对应的中文描述
var _color = txt.style.color; //上面字体的颜色
var _txt = this.innerHTML; //下面文字内容
//判断下标
var index1 = colorArr.indexOf(_color);
var index2 = txtArr.indexOf(_txt);
if(index1 == index2){
randTop();
randBtns();
grade ++;
scoreDiv.innerHTML = '得分：' + grade;
}
}
}
</script>
</html>

0 0