java web实验作业9

来源：互联网发布：华为机顶盒软件下载编辑：程序博客网时间：2024/06/01 09:10

这次的java实验没想到写这么久，这还是之前有现成的，，，不说了，各种傻的bug

//后记。。。刚刚下去看了看yxm的，发现是我想难了，笑哭

实现一个模拟计算器

更改文本框中的数字值

 document.getElementById("result").value="";

判断鼠标点击按钮函数为

<input type="button" id="add" value="/" onclick="calculate(4);"/>

<html><head><script type="text/javascript">var isleftnumber=0;var isrightnumber=0;function calculate(s){    document.getElementById("result").value="";       document.getElementById("message").innerHTML="";    var left = document.getElementById("left").value;    var right = document.getElementById("right").value;    var p = new RegExp("^(-?\\d+)(\\.\\d+)?$"); //正则表达式判断是否为数字    var isleftnumber = p.test(left);    var isrightnumber = p.test(right);    if(!isleftnumber){        document.getElementById("message").innerHTML="请输入第一个数字";// 输出信息         return;    }    document.getElementById("message").innerHTML="";         if(!isrightnumber){        document.getElementById("message").innerHTML="请输入第二个数字";  //输出信息        return;    }    document.getElementById("message").innerHTML="";    if(isleftnumber&&isrightnumber){     if(s==1)          document.getElementById("result").value=parseFloat(left)+parseFloat(right); else if(s==2)  document.getElementById("result").value=parseFloat(left)-parseFloat(right); else if(s==3)  document.getElementById("result").value=parseFloat(left)*parseFloat(right);else {     if(parseFloat(right)==0)    {       document.getElementById("message").innerHTML="除法的第二个数不能为0";               return;   }    else     document.getElementById("result").value=parseFloat(left)/parseFloat(right);}     }      }     </script></head><body>    <span id="message" style="color:red"></span>        第一个数：<input type="text" id="left"  /></br>    第二个数：<input type="text" id="right"  /> </br><input type="button" id="add" value="+" onclick="calculate(1);"/> <input type="button" id="add" value="-" onclick="calculate(2);"/> <input type="button" id="add" value="*" onclick="calculate(3);"/> <input type="button" id="add" value="/" onclick="calculate(4);"/> </br>     计算结果：<input type="text" id="result" disabled /></body></html>

实现一个注册界面（用了JQuery的函数）

写了一些类，利用jquery 的函数库进行，利用了自带的树形结构

html部分

<!DOCTYPE html><html><head><meta charset="UTF-8">                <!引入网上的JQuery函数库>            <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery                /jquery-1.4.min.js"></script><script src="register.js" type="text/javascript"></script><title>注册</title><script language="javascript">               //鼠标点击函数，用来判断是否用户信息填写正确，利用正则表达式，放在js里面不能运行               function ok(){var name=$("#name").val();var num1=/^[0-9a-zA-z_]{6,}$/; var password = $("#password").val();var num2=/^\S{6,16}$/;var repassword = $("#repassword").val();var emai=$("#email").val();var num3=/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;if((num1.test(name))&&(num2.test(password))&&(password==repassword)&&(num3.test(emai))){       return true; }else{alert("用户信息填写错误，请重新填写");                       //更改表单的action属性，不再跳转到成功界面                       var x=document.getElementById("fm");fm.action="";x.submit();return false;}   }</script></head><div  style="text-align:left;">        <img src="logo.png"  width="300" height="48" >    </div><body><div id="RG_contentContainer"><div class="RG_formContainer"><form  align="center"  class="RG_form" id = "fm"action = "success.htm"><ul class="RG_formLi"><span class="RG_formName">用户名:</span><input type="text" class="RG_formText" id="name"/><span class="RG_formRequest">*（至少6个字符）</span><div class="RG_formTip" style="color:#FF0000"><i class="RG_tipIcon"></i><span class="RG_tipwords" >用户名不能为空</span></div></ul><ul class="RG_formLi"><span class="RG_formName">密码:</span><input type="password" class="RG_formText" id="password"/><span class="RG_formRequest">*（至少包含6个字符）</span><div class="RG_formTip" style="color:#FF0000"><i class="RG_tipIcon"></i><span class="RG_tipwords">密码不能为空</span></div></ul><ul class="RG_formLi"><span class="RG_formName">再次输入密码</span><input type="password" class="RG_formText" id="repassword"/><div class="RG_formTip" style="color:#FF0000"><i class="RG_tipIcon"></i><span class="RG_tipwords" >重复密码不能为空</span></div></ul><ul class="RG_formLi"><span class="RG_formName">性别：</span>男<input type="radio" name="Sex" value="Male" checked="checked" id="sex">女 <input type="radio" name="Sex" value="Female" id="sex"><div class="RG_formTip"><i class="RG_tipIcon"></i><span class="RG_tipwords"></span></div></ul><ul class="RG_formLi"><span class="RG_formName">请输入邮箱：</span><input type="text" class="RG_formText" id="email"/><div class="RG_formTip" style="color:#FF0000"><i class="RG_tipIcon"></i><span class="RG_tipwords">邮箱不能为空</span></div></ul><ul> <input type="reset" value="重填"/><input type="submit" value="提交"  onclick="ok()"/></ul></form></div></div></body></html>

js部分

$(document).ready(function(){//当光标在文本框内时隐藏提示框$("#name,#password,#repassword,#email,#sex").focus(function(){$(this).siblings(".RG_formTip").hide();})//当文本框失去焦点时分为三种情况，为这三种情况添加不同的样式//用户名输入框$("#name").blur(function(){var num = $(this).val();var reg=/^[0-9a-zA-z_]{6,}$/;  //正则表达式，if(num == ""){ //输入了空串$(this).siblings(".RG_formRequest").hide();//隐藏$(this).siblings(".RG_formTip").show().find(".RG_tipwords").text("用户名不能为空");}else if(reg.test(num)){ //满足格式$(this).siblings(".RG_formRequest").hide();}else{  //否则$(this).siblings(".RG_formTip").show().find(".RG_tipwords").text("用户名格式错误");}})//密码输入框$("#password").blur(function(){var num = $(this).val();var reg=/^\S{6,16}$/;  //输入格式为字符，长度6~16if(num == ""){$(this).siblings(".RG_formRequest").hide();$(this).siblings(".RG_formTip").show().find(".RG_tipwords").text("密码不能为空");}else if(reg.test(num)){$(this).siblings(".RG_formRequest").hide();}else{$(this).siblings(".RG_formTip").show().find(".RG_tipwords").text("密码格式错误");}})//重复密码$("#repassword").blur(function(){var password = $("#password").val();var repassword = $("#repassword").val();if(repassword == ""){$(this).siblings(".RG_formRequest").hide();$(this).siblings(".RG_formTip").show().find(".RG_tipwords").text("重复密码不能为空");}else if(password == repassword){}else{$(this).siblings(".RG_formTip").show().find(".RG_tipwords").text("两次输入密码不一致");}})//邮箱输入框    $("#email").blur(function(){var num = $(this).val();//var reg=/^1[358]\d{9}$/;  //正则表达式，var reg=/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;if(num == ""){ //输入了空串$(this).siblings(".RG_formRequest").hide();//隐藏$(this).siblings(".RG_formTip").show().find(".RG_tipwords").text("邮箱不能为空");}else if(reg.test(num)){ //满足格式$(this).siblings(".RG_formRequest").hide();}else{  //否则$(this).siblings(".RG_formTip").show().find(".RG_tipwords").text("邮箱格式错误");}})})

附上yxm的简单实现的代码

<html><head><title>用户输入表单</title></head><body><script type = "text/javascript">function judge(){if(FORM.t1.value.length < 6)alert("用户名至少6个字符");   else if(FORM.t2.value.length < 6)alert("密码至少6个字符");   else if(FORM.t2.value != FORM.t3.value)alert("两次密码输入不一样");   elsealert("祝贺！！！" );}function clear(){document.getElementById("FORM").value = "";}</script><form action = "#signup-form" id = "FORM"><table border = "1" width = "600"><tr><img src = "./acm.jpg" width="600" height="50"></tr><tr><td align = "left">登录名：</td><td><input type = "text" size = "25" id = "t1">*（至少6个字符）</td></tr><tr><td align = "left">密码：</td><td><input type = "text" size = "20" id = "t2">*</td></tr><tr><td align = "left">再次输入密码：</td><td><input type = "text" size = "20" id = "t3">*</td></tr><tr><td align = "left">性别：</td><td><input name = "sex" type = "radio" value = ""> 男<input name = "sex" type = "radio" value = ""> 女</td></tr><tr><td align = "left">电子邮件地址：</td><td><input type = "text" size = "20" id = "t4"></td></tr><tr><td align = "center" colspan = "2"><button onclick = "clear()">重置</button>    <button onclick="judge()"> 提交表单 </button></td></tr></table></form></body></html>

emmmmm，我就说，老师怎么可能给同学布置这种作业，是我被之前板子限制了思路，不过还不错的吧，偶尔学学js也可以

阅读全文

0 0