《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">
<a href="#">注册</a>
</div>
<div id="c13">
<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开发中积累了很多经验，这将为我在今后的学习中提供帮助。最后，学无止境，祝所有正在努力的人坚定不移，学有所成！
标签：function,Web,style,结业,tankuang,应用,var,display,block 来源： https://blog.csdn.net/wanerXR/article/details/118069671