《Web应用基础》结业报告

一.实验目的

熟练掌握使用HTML+CSS+JavaScript等方面技术来建设一个中等复杂程度的静态网页，并为今后的web开发打下坚实的基础。

二.实验过程

1.开发思路

本次实验项目是以《英雄联盟》游戏为主题设计的静态网页，其中分为5个页面：首页，角色，视频CG，下载，游戏模式。

2.模块分析

导航条：

其中可以由英雄联盟的图标进入LOL官网，通行证是一个登录界面，鼠标触碰会显示一个下拉提示栏，有登陆，注册，账户三个按钮（此处并没有实现账号密码登录，只有输入功能 ）

通行证主要代码：

<div id="d4">
							<a href="###">通行证</a>
							<div class="c1">
								<div id="c11">
									<button id="login" type="button" onclick="divshow()">登录</button>
								</div>
								<div id="c12">
									&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">注册</a>
								</div>
								<div id="c13">
									&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">账户</a>
								</div>
							</div>								
						</div>`
<div id="d5">
							<img class="img2" src="img1/logo-public.png"/>
							<a onclick="divclose()"><img class="i" src="img1/QQ图片20181123135526.png"/></a>
							<div id="biaodan">
							<form name="form">
								<div class="form">
									<div id="form-item1" class="form-item">
										<input type="text" name="text" placeholder="电子邮箱" autocomplete="off">
									</div>
									<div id="form-item2" class="form-item">
										<input type="password" name="password" placeholder="密码" autocomplete="off">
									</div>
									<div id="denglu">
										<button class="button1" type="button">登录</button>
									</div>
								</div>
							</form>
						</div>
					</div>

其中的CSS样式：

```css
#d4{
	
	width: 100px;
	height: 47px;
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	padding-top: 15px;
	position: relative;
 	display: inline-block;
 	margin-left: 150px
}
#d5 {
	position: absolute;
	width: 600px;
	height: 800px;
	margin-top: 80px;
	margin-left: 400px;
	background: rgb(3, 12, 21);
	display: none;
	z-index: 10;
}

轮播：

利用JS写了一个可以自动轮播图片的功能
重要JS代码如下：

window.onload = function(){
				//获取按钮
				var prev = document.getElementById("prev");
				var next = document.getElementById("next");
				
				//切换图片，就是要修改img.src的属性
				
				//获取img标签
				var img = document.getElementsByTagName("img")[0];
				
				//创建数组保存图片路径
				var imgArr = ["img1/1.jpg","img1/2.jpg","img1/3.jpg","img1/4.jpg","img1/5.jpg","img1/6.jpg","img1/7.jpg","img1/8.jpg","img1/9.jpg","img1/10.jpg"]
				
				//创建一个变量，来保存当前显示图片的索引
				var index = 0;
				
				/*
				 *开启一个定时器，来自动切换图片
				 */
				setInterval(function(){
					
					//使索引自增
					index++;
					//方法一：
//					if(index>=imgArr.length){
//						index=0;
//					}
					//方法二：
					index = index % imgArr.length;

					img.src = imgArr[index];
				},2000)
				
				prev.onclick = function(){
					
					index--;
					if(index<0){
						index=imgArr.length-1;
					}
					
					img.src = imgArr[index];
					
				}
				
				next.onclick = function(){
					
					index++;
					if(index>imgArr.length-1){
						index=0;
					}
					
					img.src = imgArr[index];
				};
			}

弹框代码：

function tankuang(id) {
			return document.getElementById(id);
		}

		function divshow() {
			var d5 = tankuang("d5");
			d5.style.display = "block";
		}

		function divclose() {
			d5.style.display = "none";
		}

		function divshow1() {
			var d77 = tankuang("d77");
			var videofile = tankuang("videofile")
			d77.style.display = "block";
			videofile.play();

		}

		function divclose2() {
			d77.style.display = "none";
			videofile.pause();
		}
		
		function ashow1() {
			var spbf1 = tankuang("spbf1");
			var videofile1 = tankuang("videofile1")
			spbf1.style.display = "block";
			videofile1.play();//播放

		}

		function aclose1() {
			spbf1.style.display="none";
			videofile1.pause();
			videofile1.load();//重新加载
		}
		
		function ashow2() {
			var spbf2 = tankuang("spbf2");
			var videofile2 = tankuang("videofile2")
			spbf2.style.display = "block";
			videofile2.play();//播放

		}

		function aclose2() {
			spbf2.style.display="none";
			videofile2.pause();
			videofile2.load();//重新加载
		}
		
		function ashow3() {
			var spbf3 = tankuang("spbf3");
			var videofile3 = tankuang("videofile3")
			spbf3.style.display = "block";
			videofile3.play();//播放

		}

		function aclose3() {
			spbf3.style.display="none";
			videofile3.pause();
			videofile3.load();//重新加载
		}
		
		function ashow4() {
			var spbf4 = tankuang("spbf4");
			var videofile4 = tankuang("videofile4")
			spbf4.style.display = "block";
			videofile4.play();//播放

		}

		function aclose4() {
			spbf4.style.display="none";
			videofile4.pause();
			videofile4.load();//重新加载
		}
		
		
		function ashow5() {
			var spbf5 = tankuang("spbf5");
			var videofile5 = tankuang("videofile5")
			spbf5.style.display = "block";
			videofile5.play();//播放

		}

		function aclose5() {
			spbf5.style.display="none";
			videofile5.pause();
			videofile5.load();//重新加载
		}
		
		function ashow6() {
			var spbf6 = tankuang("spbf6");
			var videofile6 = tankuang("videofile6")
			spbf6.style.display = "block";
			videofile6.play();//播放

		}

		function aclose6() {
			spbf6.style.display="none";
			videofile6.pause();
			videofile6.load();//重新加载
		}
		
		function ashow7() {
			var spbf7 = tankuang("spbf7");
			var videofile7 = tankuang("videofile7")
			spbf7.style.display = "block";
			videofile7.play();//播放

		}

		function aclose7() {
			spbf7.style.display="none";
			videofile7.pause();
			videofile7.load();//重新加载
		}
		
		function ashow8() {
			var spbf8 = tankuang("spbf8");
			var videofile8 = tankuang("videofile8")
			spbf8.style.display = "block";
			videofile8.play();//播放

		}

		function aclose8() {
			spbf8.style.display="none";
			videofile8.pause();
			videofile8.load();//重新加载
		}
		
		function ashow9() {
			var spbf9 = tankuang("spbf9");
			var videofile9 = tankuang("videofile9")
			spbf9.style.display = "block";
			videofile9.play();//播放

		}

		function aclose9() {
			spbf9.style.display="none";
			videofile9.pause();
			videofile9.load();//重新加载
		}
		
		function ashow10() {
			var spbf10 = tankuang("spbf10");
			var videofile10 = tankuang("videofile10")
			spbf10.style.display = "block";
			videofile10.play();//播放

		}

		function aclose10() {
			spbf10.style.display="none";
			videofile10.pause();
			videofile10.load();//重新加载
		}
		
		function ashow11() {
			var spbf11 = tankuang("spbf11");
			var videofile11 = tankuang("videofile11")
			spbf11.style.display = "block";
			videofile11.play();//播放

		}

		function aclose11() {
			spbf11.style.display="none";
			videofile11.pause();
			videofile11.load();//重新加载
		}
		

		function ashow12() {
			var spbf12 = tankuang("spbf12");
			var videofile12 = tankuang("videofile12")
			spbf12.style.display = "block";
			videofile12.play();//播放

		}

		function aclose12() {
			spbf12.style.display="none";
			videofile12.pause();
			videofile12.load();//重新加载
		}
		
		function ashow13() {
		var spbf13 = tankuang("spbf13");
		var videofile13 = tankuang("videofile13")
		spbf13.style.display = "block";
		videofile13.play();//播放

		}

		function aclose13() {
			spbf13.style.display="none";
			videofile13.pause();
			videofile13.load();//重新加载
		}
		

		function ashow14() {
			var spbf14 = tankuang("spbf14");
			var videofile14 = tankuang("videofile14")
			spbf14.style.display = "block";
			videofile14.play();//播放

		}

		function aclose14() {
			spbf14.style.display="none";
			videofile14.pause();
			videofile14.load();//重新加载
		}
		

		function ashow15() {
			var spbf15 = tankuang("spbf15");
			var videofile15 = tankuang("videofile15")
			spbf15.style.display = "block";
			videofile15.play();//播放

		}

		function aclose15() {
			spbf15.style.display="none";
			videofile15.pause();
			videofile15.load();//重新加载
		}
		
		function ashow16() {
			var spbf16 = tankuang("spbf16");
			var videofile16 = tankuang("videofile16")
			spbf16.style.display = "block";
			videofile16.play();//播放

		}

		function aclose16() {
			spbf16.style.display="none";
			videofile16.pause();
			videofile16.load();//重新加载
		}
		
		function ashow17() {
			var spbf17 = tankuang("spbf17");
			var videofile17 = tankuang("videofile17")
			spbf17.style.display = "block";
			videofile17.play();//播放

		}

		function aclose17() {
			spbf17.style.display="none";
			videofile17.pause();
			videofile17.load();//重新加载
		}
		

		function ashow18() {
			var spbf18 = tankuang("spbf18");
			var videofile18 = tankuang("videofile18")
			spbf18.style.display = "block";
			videofile18.play();//播放

		}

		function aclose18() {
			spbf18.style.display="none";
			videofile18.pause();
			videofile18.load();//重新加载
		}
		
		function ashow19() {
			var spbf19 = tankuang("spbf19");
			var videofile19 = tankuang("videofile19")
			spbf19.style.display = "block";
			videofile19.play();//播放

		}

		function aclose19() {
			spbf19.style.display="none";
			videofile19.pause();
			videofile19.load();//重新加载
		} 


		function ashow20() {
			var spbf20 = tankuang("spbf20");
			var videofile20 = tankuang("videofile20")
			spbf20.style.display = "block";
			videofile20.play();//播放

		}

		function aclose20() {
			spbf20.style.display="none";
			videofile20.pause();
			videofile20.load();//重新加载
		}
		

		function ashow21() {
			var spbf21 = tankuang("spbf21");
			var videofile21 = tankuang("videofile21")
			spbf21.style.display = "block";
			videofile21.play();//播放

		}

		function aclose21() {
			spbf21.style.display="none";
			videofile21.pause();
			videofile21.load();//重新加载
		}
		

		function ashow22() {
			var spbf22 = tankuang("spbf22");
			var videofile22 = tankuang("videofile22")
			spbf22.style.display = "block";
			videofile22.play();//播放

		}

		function aclose22() {
			spbf22.style.display="none";
			videofile22.pause();
			videofile22.load();//重新加载
		}

游戏模式页面：

在页面底部加入本实验报告的链接

实验心得

通过本次实验项目，我在网上查阅了大量的资料教程，在开发过程中，有许多想法难以实现，比如在角色页面实现鼠标触碰图片显示图片人物介绍的功能，这些都是本次实验的不足之处。但是经过这段时间的独立学习完成项目，在web开发中积累了很多经验，这将为我在今后的学习中提供帮助。最后，学无止境，祝所有正在努力的人坚定不移，学有所成！