J*Z

博客园 首页 联系 订阅 管理
答题小游戏 
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title></title>
 6         <link rel="stylesheet" type="text/css" href="css/DATI.css"/>
 7         <meta name="viewport" content="width=375,user-scalable=no"/>
 8     </head>
 9     <body>
10         
11         <div class="page startGame">
12             <button>开始答题</button>
13         </div>
14         
15         <div class="page gaming">
16             <h3>题目</h3>
17             <h4>剩余时间:<span class="syTime">10</span>s</h4>
18             <ul class="option">
19             </ul>
20         </div>
21         
22         <div class="page endGame">
23             <h1>恭喜您获得:<span class="score"></span>分</h1>
24             <button class="again">再来一次</button>
25         </div>
26         <script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
27         <script src="js/dati.js" type="text/javascript" charset="utf-8"></script>
28     </body>
29 </html>

CSS:

 1 *{
 2     margin: 0;
 3     padding: 0;
 4     box-sizing: border-box;
 5 }
 6 
 7 body,html{
 8     width: 100%;
 9     height: 100%;
10 }
11 
12 .page{
13     width: 100%;
14     height: 100%;
15     position: absolute;
16     left: 0;
17     top: 0;
18 }
19 
20 .startGame{
21     background: black;
22     display: flex;
23     justify-content: center;
24     align-items: center;
25     z-index: 1;
26 }
27 
28 .startGame button{
29     width: 200px;
30     height: 50px;
31     background: deepskyblue;
32     font-size: 30px;
33     border-radius: 10px;
34     text-align: center;
35     line-height: 50px;
36     box-shadow: 0 0 10px darkgoldenrod;
37     border: none;
38 }
39 
40 .gaming{
41     background: #efefef;
42     z-index: 0;
43 }
44 
45 .gaming h3{
46     text-align: center;
47     font-size: 25px;
48     line-height: 50px;
49     padding: 0 10px;
50 }
51 
52 .gaming .option{
53     padding: 10px 20px;
54 }
55 
56 .endGame{
57     background: white;
58     color: red;
59     
60 }
61 
62 .endGame button{
63     width: 200px;
64     height: 50px;
65     background: #EFEFEF;
66     font-size: 30px;
67     border-radius: 10px;
68     text-align: center;
69     line-height: 50px;
70     box-shadow: 0 0 10px darkgoldenrod;
71     border: none;
72     margin: 50% auto;
73     display: flex;
74     align-items: center;
75     justify-content: center;
76 }

js:

 1 $(function(){
 2     var timuList = null;
 3     var timuNum = 10;
 4     var currentTimu = null;
 5     var isDati = false;
 6     var jsq = null;
 7     var score = 0;
 8     //点击开始按钮，切换到下一页
 9     $(".startGame button").click(function(e){
10         $(".page").css("z-index","0")
11         $('.gaming').css("z-index","1")
12         $.get('dati.json').then(function(res){
13             console.log(res)
14             timuList=res
15             renderTimu()
16         })
17     })
18     
19     function renderTimu(){
20         timuNum--;
21         //答十题后结束答题，切出结束页
22         if(timuNum<0){
23             $('.page').css("z-index","0")
24             $('endGame').css("z-index","1")
25             $('.score').html(score)
26             return null;
27         }
28         
29         //题目选项
30         var length = timuList.length;
31         var randomNum = parseInt(Math.random()*length);
32         currentTimu = timuList.splice(randomNum,1);
33         isDati=false;
34         console.log(currentTimu)
35         
36         $('.gaming h3').html(currentTimu[0].quiz)
37         $('.option').html("")
38             
39         currentTimu[0].options.forEach(function(item,index){
40             $('.option').append(`
41             <li data-index="${index}">${index+1}、${item}</li>    
42             `)
43         })
44         //计时器
45         var sec = 10;
46         jsq = setInterval(function(){
47             if(sec==0){
48                 clearTimeout(jsq)
49                 $('.option li:eq('+(currentTimu[0].answer-1)+')').css('background',"skyblue")
50                 setTimeout(function(){
51                     renderTimu()
52                 },2000)
53                 isDati = true;
54                 
55             }else{
56                 sec--;
57                 $('.syTime').html(sec)
58             }
59         },1000)
60     }
61     
62     
63     //监听题目列表选项点击事件
64     $('.option').click(function(e){
65         if(e.target.tagName=="LI"&&!isDati){
66             isDati = true;
67             var index = e.target.dataset.index;
68             var answer = parseInt(index)+1;
69             if(answer==currentTimu[0].answer){
70                 score+=10;
71                 $(e.target).css('background',"skyblue");
72             }else{
73                 console.log('答错了');
74                 $(e.target).css('background',"red")
75                 $('.option li:eq('+(currentTimu[0].answer-1)+')').css('background',"skyblue");
76             }
77             clearTimeout(jsq);
78             setTimeout(function(){
79                 renderTimu();
80             },2000)
81         }
82     })
83     
84     //再来一次
85     $('.again').click(function(){
86         location.reload();
87     })
88 })

由于相应的json文件不方便在此处写出，请自行导入。

效果图：

 

-------------------------------------自娱自乐，不喜勿喷！

posted on 2019-06-12 16:50  J*Z  阅读(300)  评论(1)    收藏  举报