【JSP学习笔记(2)】——JavaScript应用

来源：互联网发布：mac电磁阀型号编辑：程序博客网时间：2024/05/29 18:56

1.变量应用：数字有效验证

代码

checkNumber.jsp

<%@ page language="java" import="java.util.*" contentType="text/html; charset=utf-8"%><html>  <head>    <title>数字有效性验证</title>    <script language="javascript">        function check(reg, str){            if(!reg.test(str)){                alert("请输入数字!");                return false;            }        };        function checkNumber(s){            var reg = /^\-?[0-9]+\.?[0-9]{0,9}$/;            return check(reg, s);        };    </script>  </head>  <body>     <form method="post" action="checkNumber.jsp" name="form1">        <font size="6">数字有效性验证</font>        <input name="number" type="text"/>              <input type="button" value="提交" onclick="checkNumber(document.form1.number.value)"/>     </form>  </body></html>

效果

这里写图片描述

2.String对象应用：字符串截取

代码

<%@ page language="java" import="java.util.*" contentType="text/html; charset=utf-8"%><html>  <head>    <title>截取特定文字</title>    <script language="javascript">        function checkSpace(s){            var index,len;            while(true){                index = s.indexOf(" ");                if(index == -1){                    break;                }                len = s.length;                s = s.substring(0,index) + s.substring((index+1),len);            }            return s;        }    </script>  </head>  <body>     <script>        var s1 = new String("JavaScript截取示例");        document.write("<h3>[1]"+s1.charAt(7)+"<br>");        var s2 = new String("一场团战死 7 个      韩国人");        document.write("[2]"+s2.substring(4)+"<br>");        var s3 = new String("恭喜WE！");        document.write("[3]"+s3.substring(1,6)+"<br>");        document.write("[4]"+"当时是选择原谅她啊啊啊啊".substring(3,8));        document.write("<h3>");        var str = "";        str += checkSpace("I love You!")+"\n";        str += checkSpace("You are a good man!");        alert(str);     </script>  </body></html>

效果

这里写图片描述

3.函数应用：界面加载时间

代码

loading.jsp

<%@ page language="java" import="java.util.*" contentType="text/html; charset=utf-8"%><html>  <head>    <title>页面加载时间</title>    <style>        #out{            width:300px;            height:20px;            background:#ddd;        }        #in{            width:10px;            height:20px;            background:#000;            color:white;            text-align:center;        }        #font_color{            background:yellow;            text-align:center;            color:white;        }    </style>  </head>  <body bgcolor="#ffffcc" onload="start();">     <div id="out">        <div id="in" style="width:10%">10%</div>     </div>     <script>        i = 0;        function start(){            ba= setInterval("begin()",100);        };        function begin(){            i += 1;            if(i <= 100){                document.getElementById("in").style.width = i+"%";                document.getElementById("in").innerHTML = i+"%";            }else{                clearInterval(ba);                document.getElementById("out").style.display = "none";                document.write("<span style='background:#33cc00;text-align:center;color:white;'>加载成功</span>");            }        };     </script>  </body></html>

效果

这里写图片描述

4.事件应用：动态下拉菜单

代码

dropMenu.jsp

<%@ page language="java" import="java.util.*" contentType="text/html; charset=utf-8"%><html>  <head>    <title>动态下拉菜单</title>    <link href="../css/drop_menu.css" rel="stylesheet" type="text/css" />    <script type="text/javascript">        function displaySubMenu(li){            var subMenu = li.getElementsByTagName("ul")[0];            subMenu.style.display = "block";        };        function hideSubMenu(li){            var subMenu = li.getElementsByTagName("ul")[0];            subMenu.style.display = "none";        }    </script>  </head>  <body>     <ul id="navigation">        <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">            <a href="#">栏目1</a>            <ul>                <li><a href="#">栏目1->菜单1</a></li>                <li><a href="#">栏目1->菜单2</a></li>                <li><a href="#">栏目1->菜单3</a></li>            </ul>         </li>         <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">            <a href="#">栏目2</a>            <ul>                <li><a href="#">栏目2->菜单1</a></li>                <li><a href="#">栏目2->菜单2</a></li>                <li><a href="#">栏目2->菜单3</a></li>            </ul>         </li>         <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">            <a href="#">栏目3</a>            <ul>                <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">                    <a href="#">栏目3->菜单1</a>                    <ul>                        <li><a href="#">菜单1->子菜单1</a></li>                        <li><a href="#">菜单1->子菜单2</a></li>                        <li><a href="#">菜单1->子菜单3</a></li>                    </ul>                </li>                <li><a href="#">栏目3->菜单2</a></li>                <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">                    <a href="#">栏目3->菜单3</a>                    <ul>                        <li><a href="#">菜单3->子菜单1</a></li>                        <li><a href="#">菜单3->子菜单2</a></li>                        <li><a href="#">菜单3->子菜单3</a></li>                    </ul>                </li>            </ul>         </li>     </ul>  </body></html>

drop_menu.css

*{    padding:0;    margin:0;}body{    font-family:verdana,sans-serif;font-size:small;}#navigation,#navigation li ul{    list-style-type:none;}#navigation{    margin:20px;}#navigation li{    float:left;    text-align:center;    position:relative;}#navigation li a:link,#navigation li a:visited{    display:block;    text-decoration:none;    color:#000;    width:120px;    height:40px;    line-height:40px;    border:1px solid #fff;    border-width:1px 1px 0 0;    background:#c5dbf2;    padding-left:10px;}#navigation li a:hover{    color:#fff;    background:#2687eb;}#navigation li ul li a:hover{    color:#fff;    background:#6b839c;}#navigation li ul{    display:none;    position:absolute;    top:40px;    left:0;    margin-top:1px;    width:120px;}#navigation li ul li ul{    dispaly:none;    position:absolute;    top:0px;    left:130px;    margin-top:0;    margin-left:1px;    width:120px;}

效果

这里写图片描述

5.对话框应用：用户注册信息验证

代码

register.jsp

<%@ page language="java" import="java.util.*" contentType="text/html; charset=utf-8"%><html>  <head>    <title>用户注册信息验证</title>    <script type="text/javascript">        function check(){            if(document.form1.name.value == ""){                alert("请填写您的用户名!");                document.form1.name.focus();                return(false);            }            var filter = /^\s*[.A-Za-z0-9_-]{5,15}\s*$/;            if(!filter.test(document.form1.name.value)){                alert("用户名填写不正确，请重新填写!");                document.form1.name.focus();                document.form1.name.select();                return (false);            }            if(document.form1.password.value == ""){                alert("请填写您的密码!");                document.form1.password.focus();                return (false);            }            if(document.form1.repassword.value == ""){                alert("请确认密码!");                document.form1.repassword.focus();                return (false);            }            var filter = /^\s*[.A-Za-z0-9_-]{5,15}\s*$/;            if(!filter.test(document.form1.password.value)){                alert("密码填写不正确，请重新填写！");                document.form1.password.focus();                document.form1.password.select();                return (false);            }            if(document.form1.password.value != document.form1.repassword.value){                alert("两次填写的密码不一致，请重新填写！");                document.form1.password.focus();                document.form1.password.select();                return (false);            }            if(confirm("注册成功,是否立即登录？")){                alert("用户选择立即登录");                //window.close();            }else{                alert("用户点击了取消");            }        }    </script>  </head>  <body>     <center>用户注册信息验证</center>     <form name="form1" method="post" action="regist.jsp">        <table align="center" border="1">            <tr>                <td bgcolor="#f0f0f0">用户名</td>                <td><input type="text" name="name" size="15"></td>                <td><font size="2" color="red">*长度在5到15个字符之间</font></td>            </tr>            <tr>                <td bgcolor="#f0f0f0">密码</td>                <td><input type="password" name="password" size="15"></td>                <td><font size="2" color="red">*必填</font></td>            </tr>            <tr>                <td bgcolor="#f0f0f0">密码</td>                <td><input type="password" name="repassword" size="15"></td>                <td><font size="2" color="red">*必填</font></td>            </tr>            <tr>                <td colspan="3" bgcolor="#f0f0f0">                    <div align="center">                        <input type="submit" value="确定" onClick="check()">                        <input type="reset" value="取消">                    </div>                </td>            </tr>        </table>     </form>  </body></html>

效果

这里写图片描述

0 0