之前学习循环的时候，做过一个游戏“猜数字”的练习。
这里主要利用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 onl oad="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 }
代码不难，可以自行研究。运行效果正常。
标签：function,数字,zd,tt,js,querySelector,document,应用,png From： https://www.cnblogs.com/wanjinliu/p/17438051.html