<!DOCTYPE html> <html> <title>文字两端对齐</title> <head> <style> .content{ 500px; height:600px; border:2px solid green; padding:0 20px; } .header{ 100%; margin-top:20px; } .time{ float:left; } .score{ float:right; } .section{ text-align:center; font-size:10rem; margin-top:80px; } .description{ text-indent:2rem; font-size:1.5rem; margin-top:50px; } .footer{ margin-top:50px; text-align:center; } .opt{ 80px; height:80px; display:inline-block; margin:10px; font-size:3rem; } </style> </head> <body> <div class="content"> <div class="header"> <div class="time">倒计时：<span id="times">20</span>s</div> <div class="score">得分：<span id="fen" class="score-val">0</span></div> </div> <div class="section" id="section">黄</div> <div class="description"> 根据上面字体的颜色从下面选择正确的字，选择正确游戏自动开始. </div> <div id='footer' class="footer"> <!-- <div class="opt">黄</div> --> </div> </div> <script> var section=document.getElementById('section'); var footer=document.getElementById('footer'); var timer=20; var score=0; var arr1=["红","橙","绿","粉","紫"]; var arr2=["red","orange","green","pink","purple"]; //随机数 function random(min,max){ return Math.floor(Math.random()*(max-min)+min); } //生成题目 function question(){ //随机文字下标 var textion=random(0,arr1.length); //随机颜色下标 var colorion=random(0,arr2.length); //问题设随机文字和下标 section.setAttribute('ddd', colorion); section.innerHTML=arr1[textion]; section.style.color=arr2[colorion]; } //生成多个选项 function downfooter(){ //字体颜色和副本 var arr1fu=arr1.concat(); var arr2fu=arr2.concat(); var optionsin=''; for(i=0;i<arr1.length;i++){ //随机颜色下标 var colorion=random(0,arr2fu.length); //随机文字下标 var textion=random(0,arr1fu.length); //获取文字 这块儿不太懂 var text=arr1fu[textion]; //存储在原始数组出现的位置，和问题的索引位置联系到一起 var textionOld = arr1.indexOf(text); optionsin+='<div ccc="'+textionOld+'" class="opt" style="color:'+arr2fu[colorion]+';">'+arr1fu[textion]+'</div>' footer.innerHTML=optionsin; //去掉生成选项 arr1fu.splice(textion,1); arr2fu.splice(colorion,1); } } var fen=document.getElementById('fen'); function getgame(){ //获取问题下标 var secnum=section.getAttribute('ddd'); var downopts=document.getElementsByClassName('opt'); //循环遍历答案文字的下标 for(i=0;i<downopts.length;i++){ //给答案添加点击事件 downopts[i].onclick=function(){ console.log(123); //点击的选项的下标 var downanser=this.getAttribute('ccc'); if(secnum==downanser){ score++ //1 问题 question(); //生成选项 downfooter(); //添加点击事件 getgame(); }else{ score--; } fen.innerHTML=score; } } } //定时 var times=document.getElementById('times'); setInterval(function(){ times.innerHTML=timer--; if(timer=0){ alert("游戏结束"); } },1000); //1 问题 question(); //生成选项 downfooter(); //添加点击事件 getgame(); </script> </body> </html>