樂
喜
安
平

HTML5-10

1.猜数字赢大奖案例

(这个案例是手机网页,用google浏览器开发者模式的手机版测试)

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title>猜数字赢大奖</title>
 6         <link rel="stylesheet" type="text/css" href="css/zixuereset.css"/>
 7         <link rel="stylesheet" type="text/css" href="css/guessnum.css"/>
 8     </head>
 9     <body>
10         <!-- 最外层容器标签 -->
11         <div id="con">
12             <!-- 猜数字功能区 -->
13             <div id="main">
14                 <!-- 猜数字的图片 -->
15                 <div id="guess">
16                     <img src="img/main.png" >
17                 </div>
18                 <div id="txt">
19                     <input type="text" name="" id="txtnum" value="" />
20                 </div>
21                 <!-- 按钮图片所在区域 -->
22                 <div id="btn">
23                     <img src="img/button.png" onclick="com()" >
24                 </div>
25             </div>
26             <!-- 猜数字结论区 -->
27             <div id="result">
28                 <!-- 样式调整完毕后替换成nopic图片 -->
29                 <img id="jieguo" src="img/noPic.png" >
30             </div>
31         </div>
32         <script type="text/javascript">
33             // 1.生成随机数:大于等于0 永远小于1
34             let rnd=Math.random();
35             // alert(rnd);
36             // 2.根据随机数 取得随机整数
37             // 2.1生成101以内的随机数
38             let num=101*rnd;
39             // 2.2生成100及以内的随机整数:不四舍五入舍弃小数位
40             let result=parseInt(num);
41             alert(result);
42             // 3.将用户在文本框输入的数字与随机数进行比较
43             function com(){
44                 // 获取文本框对象
45                 let txtnum=document.getElementById('txtnum');
46                 // 利用文本框的value属性获得用户输入的数据
47                 let number=txtnum.value;
48                 // 定义一个变量用于表示图片的名字
49                 let picname;
50                 // 对比
51                 if(number>result){
52                     picname='big';
53                 }
54                 else if(number<result){
55                     picname='small';
56                 }
57                 else{
58                     picname='win';
59                 }
60                 // 获取图片标签
61                 document.getElementById('jieguo');
62                 // 修改图片标签的src属性
63                 jieguo.src='img/'+picname+'.png';
64             }
65         </script>
66     </body>
67 </html>

guessnum.css

 1 *{
 2     /* border: 1px solid black; */
 3 }
 4 /* 猜数字功能区图像样式 */
 5 #guess img{
 6     width: 630px;
 7 }
 8 /* 按钮区图像样式 */
 9 #btn img{
10     width: 109px;
11     height: 109px;
12 }
13 /* 猜数字结论区图像样式 */
14 #result img{
15     width: 156px;
16 }
17 /* 猜数字总主体区域定位样式 */
18 #main{
19     position: relative;
20     left: 430px;
21     top: 100px;
22 }
23 /* 猜数字功能区,按钮区,文本框区定位样式 */
24 #guess,#btn,#txt{
25     position: absolute;
26 }
27 /* 文本框区定位样式 */
28 #txt{
29     top: 258px;
30     left: 125px;
31 }
32 /* 文本框区样式 */
33 #txtnum{
34     width: 370px;
35     height: 40px;
36     font-size: 20px;
37     text-align: center;
38     /* 去掉文本框边框 */
39     border: none;
40     /* 去掉文本框轮廓线 */
41     outline: none;
42 }
43 /* 按钮区定位样式 */
44 #btn{
45     top: 324px;
46     left: 262px;
47 }
48 /* 整个容器区定位样式 */
49 #con{
50     position: relative;
51     background-image: url(../img/bg.jpg);
52     background-repeat: no-repeat;
53     background-size: cover;
54     
55     width: 100%;
56     height: 100%;
57 }
58 /* 设置满屏宽高,撑起背景 */
59 html,body{
60     width: 100%;
61     height: 100%;
62 }
63 /* 去掉多余的空白区域 */
64 body{
65     overflow: hidden;
66 }
67 /* 猜数字结论区定位样式 */
68 #result{
69     position: absolute;
70     top: 300px;
71     left: 1050px;
72 }

已经学习前端一周多了,最近开始学js部分的代码.

posted @ 2021-07-07 20:47  喵酱爱吃鱼  阅读(31)  评论(0)  编辑  收藏  举报