之前学习循环的时候，做过一个游戏“猜数字”的练习。
这里主要利用js对css的控制，来重现这个游戏。
设计外观：
根据设计制作html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <script src="js/1.js"></script> 7 <link rel="stylesheet" href="css/1.css"> 8 </head> 9 <body onload="f1();"> 10 <div style="text-align: center; margin-top: 50px;"> 11 <div id="d0"> 12 <div id="d1">0</div><span class="fh"><</span> 13 <div id="d2"></div><span class="fh"><</span> 14 <div id="d3">100</div> 15 </div> 16 <div style="margin-top: 60px;"> 17 <span>你猜：</span><input type="text" id="t1"/> 18 <input type="button" id="b1" value="确定"/> 19 <input type="button" id="b2" value="重新开始"/> 20 </div> 21 </div> 22 23 </body> 24 </html>
对应css
1 #d0{ 2 display: flex; 3 justify-content: center; 4 } 5 #d1,#d2,#d3{ 6 display: flex; 7 border: 1px solid; 8 width: 100px; 9 height: 100px; 10 justify-content: center; 11 align-items: center; 12 font-size: 350%; 13 } 14 .fh{ 15 font-size: 400%; 16 } 17 #d2{ 18 background-size: 100%; 19 background-image: url("../img/1.png"); 20 }
其中，1.png和2.png是网上找的两张图片，表示游戏进行时的问号和谜底炸弹。
（教学用，如有侵权，请联系删除）
运行效果
js代码的设计，主要包括：
1、点击“确定”以后做的事qd。
2、点击“重新开始”以后做的事cx。
3、利用setTimeout延迟执行函数，制作一个边框闪烁效果。
1 //全局变量 2 var tt,da,xiao,zhong//文本框、大、小、中间，四个控件 3 var a,zd,zx;//谜底，最大，最小三个变量 4 var bk=1;//边框宽度指示 5 //初始化函数 6 function f1() 7 { 8 //初始化页面元素 9 tt=document.querySelector("#t1"); 10 da=document.querySelector("#d3"); 11 xiao=document.querySelector("#d1"); 12 zhong=document.querySelector("#d2"); 13 //指定命令按钮的处理函数 14 let b1=document.querySelector("#b1"); 15 b1.onclick=qd; 16 let b2=document.querySelector("#b2"); 17 b2.onclick=cx; 18 //初始化游戏 19 cx(); 20 } 21 function qd() 22 { 23 //测试内容 24 //游戏内容 25 x=parseInt(tt.value); 26 if(x<a) 27 { 28 zx=x; 29 shan('1'); 30 setTimeout(function (){xiao.textContent=zx;},3500); 31 } 32 else if(x>a) 33 { 34 zd=x; 35 shan('2'); 36 setTimeout(function (){da.textContent=zd;},3500); 37 } 38 else 39 { 40 zhong.style.backgroundImage='url("img/2.png")'; 41 } 42 //焦点回到文本框 43 tt.select(); 44 } 45 function cx() 46 { 47 //重新开始，需要重置谜底、最大、最小值 48 a=parseInt(Math.random()*99+1); 49 zd=100; 50 zx=0; 51 //设置界面 52 tt.value=""; 53 da.textContent=zd; 54 xiao.textContent=zx; 55 zhong.style.backgroundImage= 'url("img/1.png")'; 56 } 57 //外框闪烁三次（1表示前框，2表示后框） 58 function shan(x) 59 { 60 for(i=1;i<=6;i++) 61 { 62 setTimeout('shan1('+x+')',500*i);//setTimeout函数的参数只支持传值。 63 } 64 } 65 //闪烁1次 66 function shan1(t) 67 { 68 //确定哪个框闪烁 69 if(t==1) 70 { 71 x=xiao; 72 } 73 else 74 { 75 x=da; 76 } 77 //闪烁1次 78 if(bk==1) 79 { 80 x.style.borderWidth="5px"; 81 bk=5; 82 } 83 else 84 { 85 x.style.borderWidth="1px"; 86 bk=1; 87 } 88 }
代码不难，可以自行研究。运行效果正常。
