樂
喜
安
平

HTML5-09

1.javascript

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <script type="text/javascript">
 7             //javascript代码
 8             //弹出警告对话框
 9             // alert('欢迎使用javascript')
10             // 函数
11             //x:输入参数;cal:函数名
12             function cal(x){
13                 //花括号中时函数的运行过程
14                 //定义一个变量y用于存储x+1的计算结果
15                 let y=x+1;
16                 //通过弹出式对话框将结果显示出来
17                 alert(y);
18             }
19             function show(){
20                 //先获取图片
21                 //document是JavaScript预先设置好的一个对象,代表整个HTML文档
22                 //getElementById()时上述document对象的函数 按照id查找标签
23                 //定义一个变量im1代表刚才找到的ID为img1的图片
24                 let im1=document.getElementById('im1');
25                 //再改变图片的样式display为none
26                 //style是图片对象的样式属性 属性用来描述对象的数据特征
27                 im1.style.display='none';
28             }
29             function show2(){
30                 let im1=document.getElementById('im1');
31                 im1.style.display='inline-block';
32             }
33         </script>
34     </head>
35     <body>
36         <input type="button" name="" id="" value="点击" onclick="cal(1)"/>
37         <img src="img/1.png" onclick="cal(2)">
38         <input type="button" name="" id="" value="变戏法" onclick="show()"/>
39         <input type="button" name="" id="" value="再变" onclick="show2()"/>
40         <img id="im1" src="img/2.png" >
41     </body>
42 </html>

2.万圣节抽灵符

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title>万圣节抽灵符</title>
 6         <link rel="stylesheet" type="text/css" href="css/wanshengjie.css"/>
 7     </head>
 8     <body>
 9         <!-- 用四个div把页面切割成四个部分 -->
10         <div id="page1">
11             <img id="title" src="img/title.png" >
12             <img id="box" src="img/box.png" >
13         </div>
14         <div id="page2">
15             <img id="pumpkin" src="img/pumpkin.png" >
16             <img id="startGame" src="img/startGame.jpg" >
17         </div>
18         <div id="page3">
19             <img id="img1" src="img/1.png" >
20             <img id="img2" src="img/2.png" >
21             <img id="img3" src="img/3.png" >
22             <img id="img4" src="img/4.png" >
23             <img id="img5" src="img/5.png" >
24             <img id="img6" src="img/6.png" >
25             <img id="img7" src="img/7.png" >
26         </div>
27         <div id="page4">
28             <img src="img/back.png" >
29         </div>
30     </body>
31 </html>

wanshengjie.css

  1 * {
  2     /* border: 1px solid red; */
  3 }
  4 
  5 body,html,#page1,#page2,#page3,#page4 {
  6     height: 100%;
  7 }
  8 
  9 #page1 {
 10     background-image: url(../img/halloween1.jpg);
 11     background-repeat: no-repeat;
 12     background-size: cover;
 13     overflow: hidden;
 14     position: relative;
 15     /* display: none; */
 16 }
 17 
 18 #page2 {
 19     background-image: url(../img/halloween2.jpg);
 20     background-repeat: no-repeat;
 21     background-size: cover;
 22     overflow: hidden;
 23     display: none;
 24     position: relative;
 25 }
 26 
 27 #page3 {
 28     background-image: url(../img/halloweenMain.jpg);
 29     background-repeat: no-repeat;
 30     background-size: cover;
 31     position: relative;
 32 }
 33 
 34 #page4 {
 35     background-color: gray;
 36     display: none;
 37 }
 38 #title{
 39     display: block;
 40     margin: 50px auto;
 41 }
 42 #box{
 43     position: absolute;
 44     bottom: 240px;
 45     left: 330px;
 46     animation: box 0.4s infinite;
 47 }
 48 #pumpkin{
 49     display: block;
 50     margin: 50px auto;
 51 }
 52 #startGame{
 53     display: block;
 54     margin: 950px auto;
 55 }
 56 #page3 img{
 57     position: absolute;
 58     
 59 }
 60 /* 第一个怪物图片的动画轨迹 */
 61 @keyframes y1{
 62     /* 共100帧 */
 63     /* 起点关键帧 */
 64     0%{
 65         left: 54px;
 66         top: 110px;
 67     }
 68     /* 第一个关键点 */
 69     30%{
 70         left: 54px;
 71         top: 250px;
 72     }
 73     /* 第二个关键点 */
 74     60%{
 75         left: 150px;
 76         top: 150px;
 77     }
 78     /* 回到起点 */
 79     100%{
 80         left: 54px;
 81         top: 110px;
 82     }
 83 }
 84 #img1{
 85     /* 给第一个怪物图片增加动画样式 */
 86     /* 第一个参数:动画轨迹 y1 */
 87     /* 第二个参数:动画完成一轮需要的时间,以秒为单位(4s) */
 88     /* 第三个参数:动画是否循环(infinite:无限循环;默认不循环) */
 89     animation: y1 4s infinite;
 90 }
 91 @keyframes y2{
 92     0%{
 93         left: 200px;
 94         top: 400px;
 95     }
 96     30%{
 97         left: 300px;
 98         top: 440px;
 99     }
100     60%{
101         left: 400px;
102         top: 420px;
103     }
104     100%{
105         left: 200px;
106         top: 400px;
107     }
108 }
109 #img2{
110     animation: y2 6s infinite;
111 }
112 @keyframes y3{
113     
114 }
115 #img3{
116     animation: y3 4s infinite;
117 }
118 @keyframes y4{
119     0%{
120         right: 180px;
121         top: 700px;
122     }
123     40%{
124         right: 180px;
125         top: 120px;
126     }
127     50%{
128         right: 300px;
129         top: 70px;
130     }
131     60%{
132         right: 180px;
133         top: 120px;
134     }
135     100%{
136         right: 180px;
137         top: 700px;
138     }
139 }
140 #img4{
141     animation: y4 10s infinite;
142 }
143 @keyframes y6{
144     0%{
145         left: 300px;
146         bottom: 450px;
147     }
148     50%{
149         left: 300px;
150         bottom: 900px;
151     }
152     100%{
153         left: 300px;
154         bottom: 450px;
155     }
156 }
157 #img6{
158     animation: y6 4s infinite;
159 }
160 @keyframes y7{
161     0%{
162         width: 145px;
163         height: 170px;
164     }
165     50%{
166         width: 10px;
167         height: 10px;
168     }
169     100%{
170         width: 145px;
171         height: 170px;
172     }
173 }
174 #img7{
175     right: 40px;
176     bottom: 350px;
177     animation: y7 4s infinite;
178 }
179 /* 透明度变化动画 */
180 @keyframes change{
181     /* from:动画开始时的样式 */
182     from{
183         opacity: 0;
184     }
185     /* to:动画结束时的样式 */
186     to{
187         opacity: 1;
188     }
189 }
190 #title{
191     animation: change 4s;
192 }
193 /* 箱子闹鬼晃动 */
194 @keyframes box{
195     0%{
196         left: 330px;
197     }
198     20%{
199         left: 340px;
200     }
201     40%{
202         left: 330px;
203     }
204     60%{
205         left: 320px;
206     }
207     80%{
208         left: 330px;
209     }
210 }

 3.JavaScript2

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style type="text/css">
 7             *{
 8                 /* border: 1px solid red; */
 9             }
10         </style>
11         <script type="text/javascript">
12             // 官方提供的函数
13             // alert('今天你使用JavaScript了吗');
14             // JavaScript允许程序员自己定义函数
15             // 所有JavaScript函数定义时都需要加function关键字
16             // function后接空格再接函数名和小括号
17             function cal(x){
18                 // 定义一个变量y存储x+1的计算结果
19                 let y=x+1;
20                 // 把y中存储的数值通过警告对话框显示出来
21                 alert(y);
22             }
23             // 计算矩形面积函数
24             // 函数名:area
25             // 输入参数1:width代表矩形宽度
26             // 输入参数2:len代表矩形长度
27             function area(width,len){
28                 let s=width*len;
29                 alert(s);
30             }    
31             // 非计算类型的函数
32             function mes(){
33                 alert('登录时请输入用户名和密码')
34             }
35             // 隐藏图片函数
36             function hide(){
37                 // 先找到图片对象
38                 // document是JavaScript官方定义的对象,代表html文档
39                 // Element:元素,既页面标签
40                 // getElementById:按照标签的ID获取到相应的标签
41                 // 定义一个变量im1代表获得的图像标签
42                 let im1=document.getElementById('im1');
43                 // 把图片对象的display样式设置为none
44                 // style代表图像标签的样式
45                 // display代表图像样式中的显示样式
46                 // 字符串none代表把图片隐藏起来
47                 im1.style.display='none';
48                 // 属性:描述对象的数据特征
49                 // 学员:年龄(23) 姓名(李逵) 毕业学校(水浒大学) 专业(武术) 导师(宋江)
50                 // 年龄 姓名 毕业学校 专业 导师 - 这些都是学员的属性
51             }
52             function show(){
53                 let im1=document.getElementById('im1');
54                 // display可设置inline inline-block block三种显示,但显示的状态不一样
55                 im1.style.display='inline-block'
56             }
57         </script>
58     </head>
59     <body>
60         <!-- onclick点击事件 -->
61         <!-- 通过点击事件,让函数与按钮联系起来 -->
62         <!-- 点击事件,触发函数运行 -->
63         <input type="button" name="" id="" value="计算" onclick="cal(2)" />
64         <input type="button" name="" id="" value="矩形" onclick="area(2,4)"/>
65         <input type="button" name="" id="" value="提示信息" onclick="mes()" />
66         <br>
67         <!-- img里的wtyle是图像标签的内联样式属性 -->
68         <img id="im1" src="img/1.png" style="display: inline-block;" >
69         <br>
70         <input type="button" name="" id="" value="隐藏图片" onclick="hide()" />
71         <input type="button" name="" id="" value="显示图片" onclick="show()" />
72     </body>
73 </html>

 

posted @ 2021-07-07 20:40  喵酱爱吃鱼  阅读(66)  评论(0)    收藏  举报