web实验报告计科11Word下载.docx
- 文档编号:17270678
- 上传时间:2022-11-30
- 格式:DOCX
- 页数:39
- 大小:2.39MB
web实验报告计科11Word下载.docx
《web实验报告计科11Word下载.docx》由会员分享,可在线阅读,更多相关《web实验报告计科11Word下载.docx(39页珍藏版)》请在冰豆网上搜索。
${pageContext.request.contextPath}/registerServlet.do"
method="
post"
>
<
tableborder="
1"
<
tr>
<
td>
编号<
/td>
inputtype="
text"
name="
id"
/>
fontcolor="
red"
${userFormBean.errorMsg.idKey}<
/font>
/tr>
用户名<
username"
${userFormBean.errorMsg.usernameKey}<
密码<
password"
${userFormBean.errorMsg.passwordKey}<
确认密码<
repassword"
${userFormBean.errorMsg.repasswordKey}<
年龄<
age"
${userFormBean.errorMsg.ageKey}<
性别<
<
radio"
gender"
checked="
checked"
value="
男"
男
女"
女
邮箱<
email"
${userFormBean.errorMsg.emailKey}<
生日<
birthday"
介绍<
textarearows="
5"
cols="
20"
description"
/textarea>
验证码<
imgid="
verifyCodeImageId"
onclick="
change()"
src="
${pageContext.request.contextPath}/VerifyCodeServlet"
verify"
size="
6px"
tdcolspan="
2"
align="
center"
submit"
注册"
/table>
<
/form>
2.用javaScript实现在页面动态显示当前时间
functionstartTime()
{
vartoday=newDate();
varh=today.getHours();
varm=today.getMinutes();
vars=today.getSeconds();
//addazeroinfrontofnumbers<
10
m=checkTime(m);
s=checkTime(s);
document.getElementById('
time'
).innerHTML=h+"
:
"
+m+"
+s;
t=setTimeout('
startTime()'
500);
}
functioncheckTime(i)
if(i<
10)
{i="
0"
+i;
returni;
/script>
3.用javaScript实现图片轮播功能
varbabyzone=function(){
functionid(name){returndocument.getElementById(name);
//遍历函数
functioneach(arr,callback,thisp){
if(arr.forEach){arr.forEach(callback,thisp);
}
else{for(vari=0,len=arr.length;
i<
len;
i++)callback.call(thisp,arr[i],i,arr);
}
functionfadeIn(elem){
setOpacity(elem,0)
for(vari=0;
20;
i++){
(function(){
varpos=i*5;
setTimeout(function(){
setOpacity(elem,pos)
},i*25);
})(i);
}
functionfadeOut(elem){
=20;
varpos=100-i*5;
//设置透明度
functionsetOpacity(elem,level){
if(elem.filters){
elem.style.filter="
alpha(opacity="
+level+"
)"
;
}else{
elem.style.opacity=level/100;
return{
//count:
图片数量,wrapId:
包裹图片的DIV,ulId:
按钮DIV,infoId:
信息栏
scroll:
function(count,wrapId,ulId,infoId){
varself=this;
vartargetIdx=0;
//目标图片序号
varcurIndex=0;
//现在图片序号
//添加Li按钮
varfrag=document.createDocumentFragment();
this.num=[];
//存储各个li的应用,为下面的添加事件做准备
this.info=id(infoId);
for(vari=0;
i<
count;
i++){
(this.num[i]=frag.appendChild(document.createElement("
li"
))).innerHTML=i+1;
}
id(ulId).appendChild(frag);
//初始化信息
this.img=id(wrapId).getElementsByTagName("
a"
);
this.info.innerHTML=self.img[0].firstChild.title;
this.num[0].className="
on"
//将除了第一张外的所有图片设置为透明
each(this.img,function(elem,idx,arr){
if(idx!
=0)setOpacity(elem,0);
});
//为所有的li添加点击事件
each(this.num,function(elem,idx,arr){
elem.onclick=function(){
self.fade(idx,curIndex);
curIndex=idx;
targetIdx=idx;
}
//自动轮播效果
varitv=setInterval(function(){
if(targetIdx<
self.num.length-1){
targetIdx++;
}else{
targetIdx=0;
}
self.fade(targetIdx,curIndex);
curIndex=targetIdx;
},2000);
id(ulId).onmouseover=function(){clearInterval(itv)};
id(ulId).onmouseout=function(){
itv=setInterval(function(){
if(targetIdx<
targetIdx++;
}else{
targetIdx=0;
}
self.fade(targetIdx,curIndex);
curIndex=targetIdx;
},
fade:
function(idx,lastIdx){
if(idx==lastIdx)return;
fadeOut(self.img[lastIdx]);
fadeIn(self.img[idx]);
each(self.num,function(elem,elemidx,arr){
if(elemidx!
=idx){
self.num[elemidx].className='
'
id("
list"
).style.background="
on'
this.info.innerHTML=self.img[idx].firstChild.title;
}();
1.4设计心得
本次实现是要求设计一个静态的网页,刚开始不太熟悉,浪费了好多时间,后来慢慢的熟悉了,也变得得心应手了。
二、实验二
2.1实验要求
1.实验之前认真查阅相关资料,准备好实验方案。
2.认真实验,对实验过程、结果进行分析,注意验证实验效果。
2.2实验内容
1、配置Web服务器(TOMCA),使之能够运行基于tomcat服务器端的的动态Web页面。
2、使用JSP技术设计网页,至少5个页面,能够体现JSP内置对象不同的作用域。
。
3、设置session对象,实现登录、注销功能。
2.3详细设计与编码
在实验一的基础上加以改进优化。
2.3.1登录界面的设计
2.3.2图片轮播功能
2.3.3校验码的设计
2.4相关功能的代码设计
使用javaScript实现点击刷新功能。
1、校验码图片的生成设计
publicBufferedImagegetData(HttpServletRequestrequest){
//0
intwidth=60;
intheight=30;
Stringdata="
ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyz"
Randomrandom=newRandom();
//1创建图片
BufferedImageimage=newBufferedImage(width,height,BufferedImage.TYPE_INT_RGB);
//2获得画板
Graphicsg=image.getGraphics();
//3黑色矩形
g.setColor(Color.BLACK);
g.fillRect(0,0,width,height);
//4白色矩形
g.setColor(Color.WHITE);
g.fillRect(1,1,width-2,height-2);
/**#1缓存随机4个字符*/
StringBuilderbuilder=newStringBuilder();
//5文字--随机
//*字体
g.setFont(newFont("
宋体"
Font.BOLD|Font.ITALIC,20));
for(inti=0;
4;
i++){
//随机颜色
g.setColor(newColor(random.nextInt(255),random.nextInt(255),random.nextInt(255)));
//#ff
intindex=random.nextInt(data.length());
Stringstr=data.substring(index,index+1);
//[2,3)
/**#2添加*/
builder.append(str);
//画字符
g.drawString(str,(width/6)*(i+1),20);
/**#3session缓存,服务器端缓存*/
request.getSession().setAttribute("
sessionCacheData"
builder.toString());
//5干扰线(点)
5;
i++){
//线
g.drawLine(random.nextInt(width),random.nextInt(height),random.nextInt(width),random.nextInt(height));
//点
//g.drawOval(x,y,width,height)
returnimage;
//获得随机干扰图片
publicBufferedImagegetOther(){
2、javaScript验证码刷新功能代码:
scripttype="
text/javascript"
functionchange(){
document.getElementById("
).src="
${pageContext.request.contextPath}/VerifyCodeServlet?
d="
+newDate();
3.用session保存用户信息
if(loginUser!
=null)
{
request.getSession().setAttribute("
loginUser"
loginUser);
response.sendRedirect(request.getContextPath()+"
/index.jsp"
else{
request.setAttribute("
msg"
"
没有扎到指定用户"
request.getRequestDispatcher("
/pages/login.jsp"
).forward(request,response);
4.数据校验
publicbooleanvalidate()
{
booleantemp=true;
//1判断id
if(this.id==null||"
.equals(this.id))
errorMsg.put("
idKey"
id不能为空"
temp=false;
//2判断用户名
if(this.username==null||"
.equals(this.username))
usernameKey"
用户名不能为空"
}elseif(this.username.length()<
2||this.username.length()>
10)
用户名长度必须在2和10之间"
//3判断密码
if(this.password==null||"
.equals(this.password))
passwordKey"
密码不能为空"
}elseif(this.password.length()<
8)
密码长度不能小于8"
//4确认密码
if(!
this.password.equals(repassword))
repasswordKey"
两次密码不一样"
//5整形
if(this.age==null||"
.equals(this.age)){
ageKey"
年龄不能为空"
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- web 实验 报告 11
![提示](https://static.bdocx.com/images/bang_tan.gif)