日期:2014-05-16 浏览次数:20456 次
<html>
<head>
<title>测试程序</title>
<script language="javascript" type="text/javascript">
window.onload = function(){
/*写入18--100的年龄到select标签里面*/
for(var age = 18; age <= 100; age ++){
var cretoption = document.createElement("option");
cretoption.text = age+"岁";
cretoption.value = age+"岁";
$("stuAge").add(cretoption);
}
}
/*点击注册按钮*/
function zcstu(){
/*获得用户姓名*/
var stu_name = $("stuName").value
/*获得用户性别*/
var stu_sex = "男";
if(!$("stuSex").checked){
stu_sex = "女";
}
/*获得年龄*/
var stu_ages = $("stuAge");
var stu_age;
stu_age = stu_ages.options[stu_ages.selectedIndex].value;
/*获得爱好*/
var stu_hobby="";
var stu_hobbys = document.getElementsByName("stuhobby");
for(var i = 0; i < stu_hobbys.length; i ++){
if(stu_hobbys[i].checked){
stu_hobby+=stu_hobbys[i].value+" ";
}
}
/*获得密码和确认密码*/
var stu_password = $("stuPW").value;
var stu_password_d = $("stuPWd").value;
/*把注册信息构建成html代码块*/
var ihzc = "姓名:"+stu_name+"<br/>"+
"性别:"+stu_sex+"<br/>"+
"年龄:"+stu_age+"<br/>"+
"爱好:"+stu_hobby+"<br/>"+
"密码:"+stu_password;
$("zcxx").innerHTML = ihzc;
return false;
}
function $(uid){
return document.getElementById(uid);
}
</script>
</head>
<body>
<form action="#" >
姓名:<input type="text" id="stuName"/><br/>
性别:<input type="radio" value="男" id="stuSex" name="stuSex" checked="checked"/>男
<input type="radio" value="女" id="stuSex" name="stuSex"/>女<br/>
年龄:<select id="stuAge">
<option value="10岁" id="stuAge1">10岁</option>
</select><br/>
爱好:<label><input type="checkbox" value="野游" name="stuhobby" id="stuhobby">野游</label>
<label><input type="checkbox" value="逛街" name="stuhobby" id="stuhobby">逛街</label>
<label><input type="checkbox" value="交友" name="stuhobby" id="stuhobby">交友</label>
<label><input type="checkbox" value="下棋" name="stuhobby" id="stuhobby">下棋</label>
<label><input type="checkbox" value="其他" name="stuhobby" id="stuhobby">其他</label><br/>
输入密码:<input type="password" id="stuPW"/><br/>
确认密码:<input type="password" id="stuPWd"/><br/>
<input type="submit" value="注册" id="subzc" onclick="return zcstu()"/><input type="reset" value="重置"/>
</form>
<div id="zcxx"></div>
</body>
</html>