Javascript实验编写三个html页面,实现”实验三效果

主页面代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>register</title>
<script type="text/javascript" src="file:///D|/hanfeng/Documents/2" ></script>
<script language="javascript">
function isNull(str){
     if(str==""||str==null){
         return 0;
         }
     else
        return 1;
    }

function minLength(str,length){
        if(str.length<length)
        return 0;
        else
        return 1;
        }
function maxLength(str,length){
        if(str.length>length)
        return 0;
        else
        return 1;
        }
function isDate(str)
{
var r = str.match(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/);
if(r==null)return false;
var d= new Date(r[1], r[3]-1, r[4]);
return (d.getFullYear()==r[1]&&(d.getMonth()+1)==r[3]&&d.getDate()==r[4]);
}
function validateAndSubmit(){
            var name=form1.user.value;
            var pwd = form1.pwd.value;
            var pwd2= form1.pwd2.value;
            var date =form1.date.value;
            str="您所填写的信息:\n";
            str+="您的用户名是:"+name+"\n";
            str+="密码:"+pwd+"\n";
            str+="生日:"+date+"\n";
            ah=document.getElementsByName("Education");
            for(i=0;i<ah.length;i++){
                if(ah[i].checked==true){
                    str+="学历:"+ah[i].value+"\n";
                    }
                }
            index=diqu.selectedIndex;
            seldiqu=diqu.options[index].text;
            str+="地区:"+seldiqu+"\n";
            str+="备注:"+document.getElementById('beizhu').value;
            alert(str);
            form1.submit();
            window.location="heckboxTest.html"
}
function isValidate(){
    var name=form1.user.value;
    var pwd = form1.pwd.value;
    var pwd2= form1.pwd2.value;
    var date =form1.date.value;
    var str;
    var length;
        if(!isNull(name)){
        alert("请输入用户名!");
        form1.user.focus();        
        return;
        }
        else if(!minLength(name,2)){
                    alert("用户名长度小于2位!");
                    form1.name.focus();
                    return;
            }
        else if(!maxLength(name,10)){
                    alert("用户名长度大于10位!");
                    form1.name.focus();
                    return;
            }
        else if (!isNull(pwd)){
            alert("请输入密码!");
        form1.pwd.focus();
        return;
            }
        else if(pwd==name){
            alert("密码不能与用户名相同!");
                    form1.pwd.focus();
                    return;
            }
        else if(!minLength(pwd,2)){
                    alert("密码长度小于2位!");
                    form1.pwd.focus();
                    return;
                    }
        else if(!maxLength(name,8)){
            alert("密码长度大于8位!");
                    form1.pwd.focus();
                    return;
                    }
        else if(pwd!=pwd2){
            alert("两次密码不一致!");
            form1.pwd2.focus();
            return;
            }
        else if(!isDate(date)){
            alert("日期格式错误!");
            form1.date.focus();
            return ;
            }
        else{
             validateAndSubmit();
                }
    }
function forwardselectTest(){
    window.location="selectTest.html"
    }
</script>>

</head>

<body>
<form name="form1" method="post" action="">
<h1 align="center">请注册</h1>
<table  width="500" border="1" align="center">
<tr>
<td height="30" colspan="2" bgcolor="#eeeeee">用户注册</td>
</tr>

<tr>
<td width="70" height="30">用户名:</td>
<td> <input name="user" type="text" id="user" >2-10位</td>
</tr>

<tr>
<td height="30">密&nbsp;&nbsp;码:</td>
<td><input name="pwd" type="password" id="pwd">2-8位(不能与用户名相同)</td>
</tr>

<tr>
<td height="30">确认密码:</td>
<td><input name="pwd2" type="password" id="pwd2"></td>
</tr>

<tr>
<td height="30">生日:</td>
<td><input name="date" type="text" id="date">格式:1996-02-21</td>
</tr>

<tr>
<td height="30">学历:</td>
<td><input name="Education" type="radio" value="专科">专科
<input name="Education" type="radio" value="本科">本科
<input name="Education" type="radio" value="硕士研究生"> 硕士研究生
<input name="Education" type="radio" value="博士研究生">博士研究生</br>
</td>
</tr>

<tr>
<td height="30">地区:</td>
<td><select name="diqu" id="diqu">
<option value="东北">东北
<option value="山东">山东
<option value="北京">北京
<option value="上海">上海
<option value="广东">广东
</select>
</td>
</tr>

<tr>
<td height="30">备注:</td>
<td><textarea id ="beizhu" rows="5" cols="30"></textarea></td><p>
</tr>

<tr>
<td height="30" colspan="2" align="center">
<input type="reset" value="重置">
<input type="button" value="提交并进行check测试" οnclick=isValidate()>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="button" value="select测试" οnclick=forwardselectTest()>

</td>
</tr>
</table>
</form>
</body>
</html>

heckboxTest代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>checkboxTest</title>
<script language="javascript">
function selectAll()
{
var ch=document.getElementsByName("m");
for(var i=0;i<ch.length;i++)
{
ch[i].checked=true;
}
}

function unSelectAll()
{
var ch=document.getElementsByName("m");
for(var i=0;i<ch.length;i++)
{
ch[i].checked=false;
}
}

function showInfo(){
    var str="选中项的信息为:";
var ch=document.getElementsByName("m");
for(var i=0;i<ch.length;i++)
{
    if(ch[i].checked==true){
        str+=ch[i].value+" ";
        }
}
alert(str);
}
</script>
</head>

<body>
<input type="checkbox" value="1" name="m"  id="m1"/>旅游</br>
<input type="checkbox" value="2" name="m" id="m2"/>音乐</br>
<input type="checkbox" value="3" name="m" id="m3"/>运动
</br>

<input type="button" value="全选" name="全选"  οnclick=selectAll()>
<input type="reset" name="取消全选" value="取消全选" οnclick=unSelectAll()>
<input type="button" value="显示" name="显示"οnclick=showInfo()>
</body>
</html>



selectTest代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>selectTest</title>
<script type="text/javascript" language="javascript">
    //对下拉框信息进行初始化
    function init() {
        for (i = 0; i < 10; i++) {
            var y = document.createElement("option");//增加一个元素option
            y.text = '选项' + i;
            var x=document.getElementById("s1");//根据ID找到列表框

            x.add(y, null); //

        }

    }

    //把选中的选项移到另一边
    function move(s1, s2) {
        var index = s1.selectedIndex;
        if (index == -1) {
            alert("没有选中值");
            return;
        }

        s2.length++;
        s2.options[s2.length - 1].value = s1.options[index].value;
        s2.options[s2.length - 1].text = s1.options[index].text;//s1中当前选中的值赋给s2的最后一个元素
        s1.remove(index);//从s1中移除当前元素
    }

    //把一边的完全移到另一边
    function moveAll(s1, s2) {
        if (s1.length == 0) {
            alert("没有可用选择");
            return;
        }
        s2.length = s2.length + s1.length;
        for (var i = 0; i < s1.length; i++) {
            s2.options[s2.length - s1.length + i].value = s1.options[i].value;
            s2.options[s2.length - s1.length + i].text = s1.options[i].text;
        }

        s1.length = 0;
    }
</script>
</head>
<body οnlοad="init()">
    <table>
        <tr>
            <td><select id="s1" size=10 style="width:100"></select></td>

            <td><input type="button" name="moveToRight" value=">"
                onClick="move(s1,s2)"> <br>
            <br> <input type="button" name="moveAllToRight" value=">>"
                onClick="moveAll(s1,s2)"> <br> <input type="button"
                name="moveToLeft" value="<" onClick="move(s2,s1)"> <br>
            <br> <input type="button" name="moveAllToLeft" value="<<"
                onClick="moveAll(s2,s1)"></td>
            <td><select id="s2" name="s2" size=10 style="width:100"></select></td>

        </tr>
    </table>

</body>
</html>


  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值