jsp第二天练习

轻鸟545 06-16 120

前言：

如今兄弟们对“table td width”大概比较着重，小伙伴们都想要学习一些“table td width”的相关内容。那么小编在网上网罗了一些关于“table td width””的相关内容，希望朋友们能喜欢，同学们一起来了解一下吧！

index.jsp

<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8" language="java" errorPage="" %><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title>Ajax实现无刷新的彩色验证码</title>    <link rel="stylesheet" href="css/style.css" />    <script src="js/check.js"></script>    <script language="javascript" src="js/ajaxRequest.js"></script>    <script language="javascript">        function onerror(){            alert("您的操作有误！");        }        //生成并显示验证码        function getCheckCodeFun(showCheckCode,checkCode){            showCheckCode.style.display='';            if(document.getElementById("resultMessage").innerHTML=="温馨提示：单击验证码输入框，获取验证码！验证码区分大小写"){                getCheckCode1(showCheckCode,checkCode);	//生成验证码            }            checkCode.focus();        }        //生成验证码        function getCheckCode1(showCheckCode,checkCode){            let loader1=new net.AjaxRequest("getPictureCheckCode.jsp?nocache="+new Date().getTime(),deal_getCheckCode,onerror,"GET");            showCheckCode.style.display='';            checkCode.focus();        }        function deal_getCheckCode(){            document.getElementById("showCheckCode").innerHTML=this.req.responseText;        }        //隐藏验证码显示框        function showCheckCodeClear(){            showCheckCode.style.display='none';        }        /***********验证验证码是否正确*******************************/        function checkCheckCode(inCheckCode){            if(inCheckCode!=""){                let loader= new net.AjaxRequest("checkCheckCode.jsp?inCheckCode="+inCheckCode+"&nocache="+new Date().getTime(),deal_checkCheckCode,onerror,"GET");            }        }        function deal_checkCheckCode(){            let h=this.req.responseText;            //去除字符串中的Unicode空白符            h=h.replace(/\s/g,"");            if(h==1){                document.getElementById("resultMessage").removeChild(document.getElementById("resultMessage").childNodes[0]);                document.getElementById("resultMessage").appendChild(document.createTextNode(" "));                document.getElementById("messageImg").src="images/dui2.gif";                document.getElementById("resultMessage").removeChild(document.getElementById("resultMessage").childNodes[0]);                document.getElementById("resultMessage").appendChild(document.createTextNode("恭喜您，验证码正确！"));                document.getElementById("btn_Submit").disabled=false;            }            else{                document.getElementById("messageImg").src="images/cuo2.gif";                document.getElementById("resultMessage").removeChild(document.getElementById("resultMessage").childNodes[0]);                document.getElementById("resultMessage").appendChild(document.createTextNode("您输入的验证码不正确！"));            }        }    </script></head><body onblur="showCheckCodeClear()"><table width="800" border="0" align="center" cellpadding="0" cellspacing="0">    <tr>        <td width="22" background="images/bg_left.gif"> </td>        <td width="760">            <table width="760" height="646" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">                <tr>                    <td height="126" align="center">                        <%@include file="top.jsp"%>                    </td>                </tr>                <tr>                    <td height="446" valign="top">                        <table width="100%" height="164" border="0" cellpadding="0" cellspacing="0" class="tableBorder_LRB">                            <tr>                                <td height="49" colspan="6" background="images/reply_navigate.gif"> </td>                            </tr>                            <tr>                                <td width="5%" height="143"  onClick="showCheckCodeClear()"> </td>                                <td colspan="4" align="center" valign="top">                                    <form name="form1" method="post" action="">                                        <table width="100%" height="383" border="0" cellpadding="0" cellspacing="0">                                            <tr onClick="showCheckCodeClear()">                                                <td width="14%" height="36" align="center">留言人：</td>                                                <td colspan="3">                                                    <input name="author" type="text" id="author" size="30" value="">                                                    *            </td>                                            </tr>                                            <tr onClick="showCheckCodeClear()">                                                <td height="107" align="center">表  情：</td>                                                <td colspan="3">                                                    <input name="face" type=radio class="noborder" value=0 checked>                                                    <img height=20                                                         src="images/face/face0.gif" width=20 align=middle border=0>                                                    <input name="face" type=radio class="noborder" value=1>                                                    <img height=19                                                         src="images/face/face1.gif" width=19 align=middle border=0>                                                    <INPUT name="face" type=radio class="noborder" value=2>                                                    <img height=20                                                         src="images/face/face2.gif" width=20 align=middle border=0>                                                    <input name="face" type=radio class="noborder" value=3>                                                    <img height=20                                                         src="images/face/face3.gif" width=20 align=middle border=0>                                                    <input name="face" type=radio class="noborder" value=4>                                                    <img height=20                                                         src="images/face/face4.gif" width=20 align=middle border=0>                                                    <input name="face" type=radio class="noborder" value=5>                                                    <img height=20                                                         src="images/face/face5.gif" width=20 align=middle border=0>                                                    <input name="face" type=radio class="noborder" value=6>                                                    <img height=20                                                         src="images/face/face6.gif" width=20 align=middle border=0>                                                    <input name="face" type=radio class="noborder" value=7>                                                    <img height=20                                                         src="images/face/face7.gif" width=20 align=middle border=0><br>                                                    <input name="face" type=radio class="noborder" value=8>                                                    <img height=20                                                         src="images/face/face8.gif" width=20 align=middle border=0>                                                    <input name="face" type=radio class="noborder" value=9>                                                    <img height=20                                                         src="images/face/face9.gif" width=20 align=middle border=0>                                                    <input name="face" type=radio class="noborder" value=10>                                                    <img height=20                                                         src="images/face/face10.gif" width=20 align=middle border=0>                                                    <input name="face" type=radio class="noborder" value=11>                                                    <img height=20                                                         src="images/face/face11.gif" width=20 align=middle border=0>                                                    <input name="face" type=radio class="noborder" value=12>                                                    <img height=20                                                         src="images/face/face12.gif" width=20 align=middle border=0>                                                    <input name="face" type=radio class="noborder" value=13>                                                    <img height=20                                                         src="images/face/face13.gif" width=20 align=middle border=0>                                                    <input name="face" type=radio class="noborder" value=14>                                                    <img height=20                                                         src="images/face/face14.gif" width=20 align=middle border=0>                                                    <input name="face" type=radio class="noborder" value=15>                                                    <img height=20                                                         src="images/face/face15.gif" width=20 align=middle border=0><br>                                                </td>                                            </tr>                                            <tr onClick="showCheckCodeClear()">                                                <td height="38" align="center">Email：</td>                                                <td colspan="3"><input name="email" type="text" id="email" size="72"></td>                                            </tr>                                            <tr onClick="showCheckCodeClear()">                                                <td height="160" align="center">留言内容：</td>                                                <td colspan="3">                                                    <textarea name="content" cols="70" rows="10" class="wenbenkuang" id="content">                                                    </textarea>                                                    *</td>                                            </tr>                                            <tr>                                                <td height="42" align="center" valign="bottom" onClick="showCheckCodeClear()">验证码：</td>                                                <td width="6%">                                                    <div style="position:absolute">                                                        <div id="showCheckCode" style="display:none; padding:3px" align="center" >                                                            <img  src="images/checkCodePicture.jpg" id="createCheckCode" width="200" height="60">                                                            <a href="#" style="color:#000000" onClick="getCheckCode1(showCheckCode,checkCode)">看不清?换一个</a>                                                        </div>                                                    <input name="checkCode" type="text" id="checkCode" size="6" value="" title="单击验证码输入框，获取验证码" onClick="getCheckCodeFun(showCheckCode,checkCode);"  onBlur="checkCheckCode(this.value)">                                                    </div>                                                </td>                                                <td width="6%" valign="bottom" id="resultCheckCode1" onClick="showCheckCodeClear()">                                                       <img id="messageImg" src='images/tishi2.gif' width='16' height='16'>                                                </td>                                                <td width="74%" valign="bottom" id="resultCheckCode2" onClick="showCheckCodeClear()">                                                     <div id="resultMessage">温馨提示：单击验证码输入框，获取验证码！验证码区分大小写</div>                                                </td>                                            </tr>                                            <tr onClick="showCheckCodeClear()">                                                <td height="42" align="center"> </td>                                                <td colspan="3" >                                                    <input name="btn_Submit" id="btn_Submit" type="button" class="btn_grey" value="保存" onClick="check(form1)" disabled="disabled">                                                                                                          <input name="Submit2" type="reset" class="btn_grey" value="重置">                                                                                                      </td>                                            </tr>                                        </table>                                    </form>                                </td>                                <td width="6%" onClick="showCheckCodeClear()"> </td>                            </tr>                        </table>                    </td>                </tr>                <tr>                    <td align="center" class="tableBorder_LR">                        <%@include file="copyright.jsp"%>                    </td>                </tr>            </table>        <td width="19" background="images/bg_right.gif"> </td>    </tr></table></body></html>

checkCheckCode.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %><%    String inCheckCode=request.getParameter("inCheckCode");    if(session.getAttribute("randCheckCode").equals(inCheckCode)){        out.println("1");    }    else{        out.println("0");    }%>

<table width="99%" height="72"  border="0" align="center" cellpadding="-2" cellspacing="-2">    <tr>        <td height="2" colspan="4"></td>    </tr>    <tr>        <td width="124" height="23"> </td>        <td valign="bottom" align="center"> CopyRight ©</td>        <td width="141"> </td>    </tr>    <tr>        <td height="28"> </td>        <td align="center"></td>        <td> </td>    </tr>    <tr>        <td height="8"></td>        <td height="8"></td>        <td height="8"></td>    </tr></table>

getPictureCheckCode.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" import="java.util.Random" %><%Random random = new Random();%><img src="<% out.println("PictureCheckCode?rand="+random.nextInt(10000));%>" id="createCheckCode" width="200" height="60"><a href="#" style="color:#EEEEEE" onclick="getCheckCode1(showCheckCode,checkCode)">看不清?换一个</a>

top.jsp

<table width="761" height="126" border="0" cellpadding="0" cellspacing="0">    <tr>        <td width="761" align="left" valign="top">            <img src="images/bg_top.gif" width="761" height="126" />        </td>    </tr></table>

style.css

body{    font-size: 9pt;    margin-left:0px;    margin-top:0px;    background-image: url(../images/bg.gif);    scrollbar-face-color: #5ac3f5;    scrollbar-highlight-color: #ffffff;    scrollbar-shadow-color: #fcfcfc; color: #000000;    scrollbar-3dlight-color: #ececec;    scrollbar-arrow-color: #ffffff;    scrollbar-track-color: #ececec;    scrollbar-darkshadow-color: #999966;    background-color: #fcfcfc}td {    font-size: 9pt;    line-height:150%;}a:hover {    font-size: 9pt;    color: #FF4400;}a {    font-size: 9pt;    text-decoration: none;    color: #3C404D;}.btn_grey {    font-family: "宋体";    font-size: 9pt;    color: #333333;    background-color: #eeeeee;    cursor: hand;    padding:1px;    height:19px;    border-top: 1px solid #FFFFFF;    border-right:1px solid #666666;    border-bottom: 1px solid #666666;    border-left: 1px solid #FFFFFF;}.word_grey {    font-size: 9pt;    color: #333333;}.txt_grey {    font-family: "宋体";    font-size: 9pt;    color: #333333;    border: 1px solid #999999;    width:110px;}input {    font-family: "宋体";    font-size: 9pt;    color: #333333;    border: 1px solid #999999;}.wenbenkuang {    font-family: "宋体";    font-size: 9pt;    color: #333333;    border: 1px solid #999999;}.search  {    font-family: 宋体;    font-size: 9pt;    color: #000000;    background-color: #EEEEEE;    border: 1px Hidden #000000;}.tableBorder {    border: #39B4E2 1px solid}.tableBorder_LRB {    border: #39B4E2 1px solid;    border-top-style:none;}.tableBorder_LR {    border: #39B4E2 1px solid;    border-top-style:none;    border-bottom-style:none;}.tableBorder_Top{    border:1px solid #39B4E2;    border-bottom-style:none;    border-left-style:none;    border-right-style:none}.tableBorder_Botton{    border:1px solid #39B4E2;    border-top-style:none;    border-left-style:none;    border-right-style:none}hr{    color:#39B4E2;}.ToolTip {    border-right: #39b4e2 1px solid;    border-top: #39b4e2 1px solid;    border-left: #39b4e2 1px solid;    color: #333333;    border-bottom: #39b4e2 1px solid;    background-color: #f9f9f9;}.noborder{    border-style:none;}.tableBorder_B{    border:1px solid #39B4E2;    border-left-style:none;    border-right-style:none;    border-Top-style:none;}

ajaxRequest.js

let net=new Object();//编写构造函数net.AjaxRequest=function(url,onload,onerror,method,params){    this.req=null;    this.onload=onload;    this.onerror=(onerror) ? onerror : this.defaultError;    this.loadDate(url,method,params);}//编写用于初始化XMLHttpRequest对象并指定处理函数，最后发送HTTP请求的方法net.AjaxRequest.prototype.loadDate=function(url,method,params){    if (!method){        method="GET";    }    if (window.XMLHttpRequest){        this.req=new XMLHttpRequest();    }    else if (window.ActiveXObject){        this.req=new ActiveXObject("Microsoft.XMLHTTP");    }    if (this.req){        try{            let loader=this;            this.req.onreadystatechange=function(){                net.AjaxRequest.onReadyState.call(loader);            }            this.req.open(method,url,true);            if(method=="POST"){                this.req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");            }            this.req.send(params);        }        catch (err){            this.onerror.call(this);        }    }}//重构回调函数net.AjaxRequest.onReadyState=function(){    let req = this.req;    let ready = req.readyState;    if (ready==4){        if (req.status==200 ){            this.onload.call(this);        }        else{            this.onerror.call(this);        }    }}//重构默认的错误处理函籹net.AjaxRequest.prototype.defaultError=function(){    alert("错误数据\n\n回调状态:"+this.req.readyState+"\n状态: "+this.req.status);}

check.js

//判断用户的输入是否合法function check(myform){    if(myform.author.value==""){        alert("留言人不允许为空!");        myform.author.focus();        return;    }    if (myform.email.value!=""){        var i=myform.email.value.indexOf("@");        var j=myform.email.value.indexOf(".");        if((i<0)||(i-j>0)||(j<0)){            alert("您输入的Email地址不正确，请重新输入！");            myform.email.value="";            myform.email.focus();            return;        }    }    if(myform.content.value==""){        alert("留言内容不允许为空！");        myform.content.focus();        return;    }    if(myform.checkCode.value==""){        alert("验证码不允许为空！");        myform.checkCode.focus();        return;    }    alert("留言提交成功！");    myform.submit();}

web.xml

<!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "; ><web-app>  <display-name>verificationCodeDemo2</display-name>  <servlet>    <servlet-name>PictureCheckCode</servlet-name>    <servlet-class>com.demo.PictureCheckCode</servlet-class>  </servlet>  <servlet-mapping>    <servlet-name>PictureCheckCode</servlet-name>    <url-pattern>/PictureCheckCode</url-pattern>  </servlet-mapping>  <welcome-file-list>    <welcome-file>index.jsp</welcome-file>  </welcome-file-list></web-app>

PictureCheckCode

package com.demo;import javax.imageio.ImageIO;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import javax.servlet.http.HttpSession;import java.awt.*;import java.awt.geom.AffineTransform;import java.awt.image.BufferedImage;import java.io.IOException;import java.util.Random;public class PictureCheckCode extends HttpServlet {    public PictureCheckCode() {        super();    }    public void destroy() {        super.destroy();    }    public void init() throws ServletException {        super.init();    }    public Color getRandColor(int s, int e) {        Random random = new Random();        if (s > 255) s = 255;        if (e > 255) e = 255;        int r = s + random.nextInt(e - s);        int g = s + random.nextInt(e - s);        int b = s + random.nextInt(e - s);        return new Color(r, g, b);    }    public void service(HttpServletRequest request, HttpServletResponse response)            throws ServletException, IOException {        //禁止缓存        response.setHeader("Pragma", "No-cache");        response.setHeader("Cache-Control", "No-cache");        response.setDateHeader("Expires", 0);        // 指定生成的响应是图片        response.setContentType("image/jpeg");        int width = 200;        int height = 60;        //创建BufferedImage类的对象        BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);        //创建Graphics类的对象        Graphics g = image.getGraphics();        //通过Graphics类的对象创建一个Graphics2D类的对象        Graphics2D g2d=(Graphics2D)g;        //实例化一个Random对象        Random random = new Random();        //通过Font构造字体        Font mFont = new Font("华文宋体", Font.BOLD, 30);        //改变图形的当前颜色为随机生成的颜色        g.setColor(getRandColor(200, 250));        //绘制一个填色矩形        g.fillRect(0, 0, width , height);        //画一条折线        //创建一个供画笔选择线条粗细的对象        BasicStroke bs=new BasicStroke(2f,BasicStroke.CAP_BUTT,BasicStroke.JOIN_BEVEL);        //改变线条的粗细        g2d.setStroke(bs);        //设置当前颜色为预定义颜色中的深灰色        g.setColor(Color.DARK_GRAY);        int[] xPoints=new int[3];        int[] yPoints=new int[3];        for(int j=0;j<3;j++){            xPoints[j]=random.nextInt(width - 1);            yPoints[j]=random.nextInt(height - 1);        }        g.drawPolyline(xPoints, yPoints,3);        //生成并输出随机的验证文字        g.setFont(mFont);        String sRand="";        int itmp=0;        for(int i=0;i<4;i++){            if(random.nextInt(2)==1){                //生成A~Z的字母                itmp=random.nextInt(26)+65;            }            else{                //生成0~9的数字                itmp=random.nextInt(10)+48;            }            char ctmp=(char)itmp;            sRand+=String.valueOf(ctmp);            Color color=new Color(20+random.nextInt(110),20+random.nextInt(110),20+random.nextInt(110));            g.setColor(color);            /****随机缩放文字并将文字旋转指定角度**/            //将文字旋转指定角度            Graphics2D g2d_word=(Graphics2D)g;            AffineTransform trans=new AffineTransform();            trans.rotate(random.nextInt(45)*3.14/180,15*i+10,7);            //缩放文字            float scaleSize=random.nextFloat()+0.8f;            if(scaleSize>1.1f) scaleSize=1f;            trans.scale(scaleSize, scaleSize);            g2d_word.setTransform(trans);            g.drawString(String.valueOf(ctmp),30*i+40,16);        }        //将生成的验证码保存到Session中        HttpSession session=request.getSession(true);        session.setAttribute("randCheckCode",sRand);        g.dispose();        ImageIO.write(image,"JPEG",response.getOutputStream());    }}

需要servlet和jsp的jar包

工程目录：

本文地址：http://www.longkongtuishu.com/ca33bDGsCBFsOAVQ.html

标签： #table td width

jsp第二天练习

不同环境相同配置项的内容如何diff差异？

jsp第二天练习