实 验 报 告
（计算机类）
实验报告参考要目
①实验目的与要求 ⑤实验流程图示
②实验软、硬件环境 ⑥实验内容及主要代码
③实验主要技术基础 ⑦测试与运行效果目 录
科普网站——古风网
在当今社会网站的种类各色各样，有电商的，有查资料的，有交友的……而在丰富的网站中找寻需要的信息有些困难，需要仔细的辨认自己需要的信息。本次建立的网站只正对一个内容，就是对古风的科普。
古风网站主要是为了实现对于古风的一个科普，方便需要的人们了解该古风的相关知识，也可以在本网站的交流版块发帖交流回复。
本次网站的选题，可以大大的方便对于喜欢古风想要了解古风的人一个具体的网站来查看资料，和兴趣相同的人交流。
每个人都有自己的兴趣爱好，但大多数的兴趣爱好都比较杂乱，需要进行相关的筛选才能选出自己想要的信息，本网站是直接之针对一种兴趣爱好进行设计和实现的，也就是本网站用户只能浏览相关的信息，和有该兴趣的人进行交流，不需要担心信息的驳杂，也不需要担心在网站上找不到志趣相投的朋友。
本网站主要为爱好古风的人群服务，在本网站可以查看关于古风的科普，也可以在交流区进行交流。
本网站的页面主要采用了中国红作为主要色彩，在页面中插入了大量的古风图片。页面的科普中为防止太过于文字话，对于相关的文字进行了特定的配图，让用户更直观的了解古风的相关内容。
网站界面的操作主要才用的是一目了然的方式，让用户可以很简单的就能对本网站进行使用。
2.3 网页的规划
（1）网页风格
简洁大方，使用方法简单明了，模块结构清晰明了。
（2）网页的框架与布局
主要使用了两种框架方式，一种是上中下，一种是上左右下。
第一种布局的主要布局是第一部分头部，第二部分主体内容，第三部分尾部。
第二中布局主要是第一部分为头部，左侧部分为导航栏，右侧部分为内容，底部内容为尾部。
其中头部包括：网页标题和网页总导航栏。
主体部分分为：轮播图，内容，和图片悬停显示该图片的全部。
尾部为：网页的版权
（3）网页特色及创新点
实现了广告轮播图，点击登录后显示登录的相关系信息
2.4 网页软硬件开发环境
软件：网站使用Hbuilder软件实现，利用HTML、CSS、JavaScript、Photoshop等技术进行实现。
硬件：使用Windows操作系统的计算机。
3.1 网页建设目标及功能定位
建设目标，通过互联网技术，让更多的人能够了解古风，且为喜爱古风的人建立一个交流区。通过网站的科普，让更多的人发现并喜爱上古风，让古风获得更多的用户的认可。促进中国风文化的一个传承，让越来越多的人了解古风知道古风。
3.2 网页内容规划
页面中不变的是头部和尾部，其中头部还分为页面标题和导航栏。页面导航栏主要的分类是：首页、古风介绍、汉服介绍和江湖风雨。尾部就是页面版权信息。
其中首页的主体部分分为：图片轮播区播放一些古风的图片、文字内容，图片排列区显示古风的图片，鼠标悬停时显示大图。
古风介绍的主体部分分为：左侧为索引导航栏，右侧为主要介绍内容。
汉服介绍的主体部分分为：左侧为内容导航栏，右侧为显示的页面内容。
江湖风雨的主体部分为：左上角为登录框，右上角为图片轮播图，中间为评论内容展示，下方为评论编辑发表区。
3.3功能模块分析
页面中不变的是头部和尾部，其中头部还分为页面标题和导航栏。页面导航栏主要的分类是：首页、古风介绍、汉服介绍和江湖风雨。尾部就是页面版权信息。
其中首页的主体部分分为：图片轮播区、文字内容，图片排列区。
古风介绍的主体部分分为：左侧为索引导航栏，右侧为主要介绍内容，下方为科普框做相关知识的科普。
汉服介绍的主体部分分为：左侧为内容导航栏，右侧为显示的页面内容，下方为科普框做相关知识的科普。
江湖风雨的主体部分为：左上角为登录框，输入用户名密码点击登录，将登陆成功信息替换登陆框，右上角为图片轮播图，轮播的图片是一些举办的活动图片，中间为评论内容展示可以查看已发送的评论，下方为评论编辑发表区，点击发表后将会在评论内容展示区中看见所发评论。
4 主要代码
主要代码如下：
（1）网页头部：
<div id="top">
古风网
<span> —— 唯美古韵，遗风犹存</span>
</div>
（3）首页导航栏：
<div id="Catalog">
<a href="首页.html" target="targame">古风首页</a>
<a href="古风诗词.html" target="targame">古风介绍</a>
<a href="汉服.html" target="targame">汉服介绍</a>
<a href="留言.html" target="targame">江湖风雨</a>
</div>
（4）首页中部轮播图：
Html代码
<div >
<img id="imgs"/>
</div>
js代码：
var imgs_array;
var index=0;
var imgs;
_window.onload = picture;
function picture() {
imgs_array = new Array("img/p1.jpg","img/p2.png","img/p3.jpg","img/p4.jpeg");
imgs = document.getElementById("imgs");
setroll();
}
function setroll() {
if(index == imgs_array.length) {
index = 0;
}
imgs.src = imgs_array[index];
index++;
setTimeout(setroll, 3000);
}
（5）首页图片及放大
Html代码
<div id="tu">
<img src="img/x1.jpg"/>
<img src="img/x2.jpg"/>
<img src="img/x3.jpeg"/>
<img src="img/x4.jpeg"/>
</div>
<div id="fd">
<img src="img/x1.jpg"/>
<img src="img/x2.jpg"/>
<img src="img/x3.jpeg"/>
<img src="img/x4.jpeg"/>
</div>
Js代码
var dd=document.getElementsByClassName(dd);
var pp=document.getElementsByClassName(pp);
for(i=0;i<dd.length;i++){
dd[i].index=i;
dd[i].onmouseover=function(){
for(i=0;i<pp.length;i++){
pp[i].style.display=none;
}
pp[this.index].style.display=block;
}
dd[i].onmouseout=function(){
pp[this.index].style.display=none;
}
}
（6）首页底部
<div id="bottom">
版权声明 | 关于本站 | 联系电话：12345678<br />
版权： 黄河长江一片心
</div>
（7）登录框
Html代码
<div id="denglu">
<span id="touxiang">
<img src="img/tuo.jpg" />
<br />
<br />
</span>
<span id="name">
<table>
<tr>
<td width="80px"><b>用户名：</b></td>
<td><input onblur=username_blur()" placeholder="用户名" type="text" id="username"/></td>
<td><span id="username_msg"></span></td>
</tr>
</table>
</span>
<br />
<span id="zhuangtai">
<table>
<tr>
<td width="80px"><b>密码：</b></td>
<td><input onblur=pwd_blur()" placeholder="密码" id="pwd" type="password"/></td>
<td><span id="pwd_msg"></td>
</tr>
</table>
</span>
<br />
<span id="deng">
<table>
<tr>
<td width="300px"><input id="register" type="button" value="登录" onclick=login()" ></td>
</tr>
<tr>
<td ><span id="deng_msg"></td>
</tr>
</table>
</span>
</div>
JS代码
var t1;
var t2;
var t;
var t3;
function username_blur() {
if(document.getElementById("username").value == "") {
document.getElementById("username_msg")[xss_clean] = "错误"
document.getElementById("username_msg").style.color = "red";
} else {
t1 = "ok";
t = document.getElementById("username").value;
document.getElementById("username_msg")[xss_clean] = "正确";
document.getElementById("username_msg").style.color = "green";
}
}
function pwd_blur() {
if(document.getElementById("pwd").value == "") {
document.getElementById("pwd_msg")[xss_clean] = "错误"
document.getElementById("pwd_msg").style.color = "red";
} else if(document.getElementById("pwd").value.length < 6) {
document.getElementById("pwd_msg")[xss_clean] = "错误"
document.getElementById("pwd_msg").style.color = "red";
} else {
t2 = "ok"
document.getElementById("pwd_msg")[xss_clean] = "正确";
document.getElementById("pwd_msg").style.color = "green";
}
}
function login() {
if(t1 == "ok" && t2 == "ok"){
t3="ok"
document.getElementById("name")[xss_clean] = "用户名 ： " + t;
document.getElementById("zhuangtai")[xss_clean] = "状态： 已登录"
document.getElementById("deng")[xss_clean] = str;
}
else{
document.getElementById("deng_msg")[xss_clean] = "用户名或密码不正确";
document.getElementById("deng_msg").style.color = "red";
}
}
var str;
function displayDate() {
var theDate = new Date();
var hour = theDate.getHours();
var minute = theDate.getMinutes();
var second = theDate.getSeconds();
if(minute < 10) {
minute = "0" + minute;
}
if(second < 10) {
second = "0" + second;
}
str = "登录时间是：" + hour + ":" + minute + ":" + second;
}
setInterval(displayDate, 1000);
（8）编辑内容上传
Html代码
<div id="liu">
<p>编辑内容：</p>
<div id="bianji">
主题：<input type="text" id="zhuti2"placeholder="输入主题"/>
<br />
<br />
<textarea rows="10" cols="150" placeholder="输入要发表的内容" id="neirong2" onblur=nei()"></textarea>
<br />
<br />
<input id="fabiao" type="button" value="发表" onclick=fabiaol()" >
<span id="tishi"></span>
</div>
</div>
Js代码
var zhu;
var nei;
function fabiaol(){
zhu=document.getElementById("zhuti2").value;
nei=document.getElementById("neirong2").value;
if(document.getElementById("zhuti2").value==""){
document.getElementById("tishi")[xss_clean]="主题不能为空"
document.getElementById("tishi").style.color = "red";
}
else if(document.getElementById("neirong2").value==""){
document.getElementById("tishi")[xss_clean]="内容不能为空"
document.getElementById("tishi").style.color = "red";
}
else if(t3!="ok"){
document.getElementById("tishi")[xss_clean]="登录之后才能发表内容"
document.getElementById("tishi").style.color = "red";
}
else{
document.getElementById("tishi")[xss_clean]="";
document.getElementById("mzi")[xss_clean]="用户名: " + t;
document.getElementById("zhuti")[xss_clean]="主题： " + zhu;
document.getElementById("neirong")[xss_clean]=nei;
document.getElementById("zhuti2").value=" ";
document.getElementById("neirong2")[xss_clean]=" ";
}
}
网站首页：
鼠标悬停在底侧图片上
古风介绍页面
汉服介绍页面
江湖风雨就是交流版块，需要登录才能发表内容
登录成功的界面
编辑内容的界面
编写图片轮播js时，页面所有的图片都开始了轮播，原因是直接使用的img标签进行的轮播，给图片轮播img标签设定一个id值，使用id值获取该标签实现对于图片的轮播。
在登录时，使用js判断密码的长度，首先判断密码是否为空，不为空判断密码的长度，全部符合时才登录成功。因为输入框中有输入框默认值，没有设置为鼠标点击一次后消失，所以出了错误。
在本门课中，学会了编写前端页面的一些基本框架使用，以及该框架的一些属性使用。主要学习了div+css的框架布局，学会使用了iframe标签，达到一个减少页面代码的目的。
除了学习html语言和前端样式之外，还学习了js脚本语言，js可以实现页面的一些复杂动画，比如实现轮播图之类无法使用css完成的操作。js中还学习了正则表达式来实现对输入数据的判断，比如说检测输入的手机号是否正确，身份证号是否正确之类的。
在学习完本节课之后，基本可以实现一些简单页面及其动画效果的独立完成
举报/反馈
