HTML代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=375,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div class="page startGame active">
<button class="startBtn">开始答题</button>
</div>
<div class="page gaming">
<h1 class="timu"></h1>
<div class="options">
</div>
</div>
<div class="page endGame">
<h1>恭喜您获取:<span class="score">100</span>分</h1>
<button class="reStart">重新答题</button>
</div>
<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
CSS代碼
var tikuList = [];
var currentTimu = {};
var score = 0;
var isChoose = false;
var num = 10
//ajax获取题目内容
$.get("dati.json",function(res){
console.log(res)
tikuList = res
})
//点击开始答题按钮切换页面
$('.startBtn').click(function(e){
$('.gaming').addClass("active")
$('.startGame').removeClass('active')
randomRender()
})
function randomRender(){
var randomIndex = parseInt(Math.random()*tikuList.length);
currentTimu = tikuList.splice(randomIndex,1)[0];
console.log(currentTimu);
$('.timu').html(currentTimu.quiz)
$(".options").html("");
currentTimu.options.forEach(function(item,index){
$(".options").append(`<div data-index="${index}">${index+1}. ${item}</div>`)
})
}
$('.options').click(function(e){
if(!isChoose){
console.log(e)
//获取索引值
var index = parseInt(e.target.dataset.index) ;
console.log(index+1)
if(currentTimu.answer==(index+1)){
score += 10;
$('[data-index='+index+']').addClass("correct")
}else{
var correctIndex = currentTimu.answer -1;
$('[data-index='+correctIndex+']').addClass("correct")
$('[data-index='+index+']').addClass("error")
}
isChoose = true;
num -- ;
setTimeout(function(){
if(num==0){
$(".endGame").addClass("active")
$('.score').html(score)
}else{
isChoose = false;
randomRender()
}
},2000)
}
})
//重新刷新页面即可重新答题
$('.reStart').click(function(){
location.reload()
})
JavaScript代碼
*{
margin: 0;
padding: 0;
/*设置不会因为内边距和 边框撑开宽度和高度*/
box-sizing: border-box;
}
html,body{
overflow: hidden;
width: 100%;
height: 100%;
background: deepskyblue;
}
.page{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: deepskyblue;
transform: translateX(375px);
transition: all 1s;
}
.active{
transform: translateX(0px) !important;
}
.startGame{
display: flex;
justify-content: center;
align-items: center;
}
.startBtn{
width: 200px;
height: 60px;
line-height: 60px;
font-size: 30px;
border: none;
background: purple;
color: #fff;
/*阴影不进行偏移*/
box-shadow:0 0 30px purple;
border-radius: 10px;
}
.gaming{
background: deeppink;
}
.gaming{
padding:40px 20px;
}
.gaming h1{
margin: 20px 0;
font-size: 24px;
color: #fff;
}
.gaming .options>div{
margin: 10px 0;
padding: 5px 10px;
color: #fff;
border-radius: 5px;
}
.correct{
background-color: darksalmon;
}
.error{
background: red;
}
.endGame{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.endGame h1{
margin: 40px;
}
.reStart{
width: 200px;
height: 60px;
line-height: 60px;
font-size: 30px;
border: none;
background: purple;
color: #fff;
/*阴影不进行偏移*/
box-shadow:0 0 30px purple;
border-radius: 10px;
}
json數據簡要
[{
"__v" : 0,
"_id" : "ObjectId(5a5ecf926fa5c97ef40d9d1b)",
"answer" : 4,
"contributor" : "似鲸向海",
"curTime" : "1516162961",
"endTime" : "1516162976",
"meta" : {
"updatedAt" : "2018-01-17T12:22:42.014+08:00)",
"createdAt" : "2018-01-17T12:22:42.014+08:00)"
},
"options" : [
"貂蝉",
"杨玉环",
"王昭君",
"赵飞燕"
],
"quiz" : "下列选项中哪个不属于古代四大美女?",
"school" : "文科",
"type" : "语文"
},
{
"__v" : 0,
"_id" : "ObjectId(5a5ecf926fa5c97ef40d9d1c)",
"answer" : 4,
"contributor" : "Mr^左",
"curTime" : "1516162962",
"endTime" : "1516162977",
"meta" : {
"updatedAt" : "2018-01-17T12:22:42.701+08:00)",
"createdAt" : "2018-01-17T12:22:42.701+08:00)"
},
"options" : [
"钠",
"铝",
"铜",
"铁"
],
"quiz" : "Fe是什么元素的化学式?",
"school" : "理科",
"type" : "理化"
},
{
"__v" : 0,
"_id" : "ObjectId(5a5ecf936fa5c97ef40d9d1d)",
"answer" : 2,
"contributor" : "?swaggy?",
"curTime" : "1516162963",
"endTime" : "1516162978",
"meta" : {
"updatedAt" : "2018-01-17T12:22:43.484+08:00)",
"createdAt" : "2018-01-17T12:22:43.484+08:00)"
},
"options" : [
"成都",
"重庆",
"武汉",
"南京"
],
"quiz" : "日军侵华期间国民政府曾经定以下哪个城市为陪都?",
"school" : "文科",
"type" : "历史"
}]