练习：单选按钮演示。
<html>
<head>
<title>这是我的网页</title>
<style type="text/css">
#contentid{
display:none;
}
</style>
</head>
<body>
<!--
1.是否参与调查问卷？
2.性格测试
-->
<div>
您要参与问卷调查吗？
<input type="radio" name="wenjuan" value="yes" onclick="showContent(this)"/>是
<input type="radio" name="wenjuan" value="no" checked="checked" onclick="showContent(this)"/>否
</div>
<div id="contentid">
问卷调查内容：<br/>
您的姓名:<input type="text" /><br/>
您的邮箱:<input type="text" />
</div>
<script type="text/javascript">
function showContent(node){
var oDivNode=document.getElementById("contentid");
with(oDivNode.style){ //其实这个和下面注释里的内容效果是一样的，就是另一种写法。
if(node.value=="yes"){
display="block";
}else{
display="none";
}
}
// if(node.value=="yes"){
// oDivNode.style.display="block";
// }else{
// oDivNode.style.display="none";
// }
}
</script>
</body>
</html>
<html>
<head>
<title>这是我的网页</title>
<style type="text/css">
#no1ul{
list-style:none;
margin:0px;
}
.close{
display:none;
}
.open{
display:block;
}
</style>
<script type="text/javascript">
function showResult(){
//1.判断是否有答案被选中。获取所有的no1的radio，并遍历判断checked状态。
var oNo1Nodes=document.getElementsByName("no1");
var flag=false; //用这个标记判断是否有答案被选中。
var val; //用这个标记记住被选中的是哪个答案。
for(var x=0;x<oNo1Nodes.length;x++){
if(oNo1Nodes[x].checked){
flag=true;
val=oNo1Nodes[x].value;
break;
}
}
if(!flag){
alert("没有任何答案被选中！");
}
if(val>=1&&val<=3){
document.getElementById("res_1").className="open";
document.getElementById("res_2").className="close"; //注意：这里如果只写res_1 open，那么换一个选项，
//这个结果仍然会显示，会一直显示，所以要两个都写出来。
}else{
document.getElementById("res_2").className="open";
document.getElementById("res_1").className="close";
}
}
</script>
</head>
<body>
<h2>欢迎您参与性格测试！</h2>
<div>
<h3>第一题：</h3>
<span>您喜欢的水果是什么？</span>
<ul id="no1ul">
<li><input type="radio" name="no1" value="1" />葡萄</li>
<li><input type="radio" name="no1" value="2" />西瓜</li>
<li><input type="radio" name="no1" value="3" />苹果</li>
<li><input type="radio" name="no1" value="4" />芒果</li>
<li><input type="radio" name="no1" value="5" />樱桃</li>
</ul>
</div>
<div>
<input type="button" value="查看测试结果" onclick="showResult()"/>
<div id="res_1" class="close">1-3分：您的性格内向并扭曲，建议....</div>
<div id="res_2" class="close">4分以上：您的性格外向并分裂，建议....</div>
</div>
</body>
</html>
练习：下拉菜单应用
<html>
<head>
<title>这是我的网页</title>
<style type="text/css">
.clrclass{
height:50px;
width:50px;
float:left;
margin-right:30px
}
#text{
clear:left;
margin-top:20px;
}
</style>
</head>
<body>
<div class="clrclass" id="clr1" style="background-color:red" onclick="changeColor(this)"></div>
<div class="clrclass" id="clr2" style="background-color:green" onclick="changeColor(this)"></div>
<div class="clrclass" id="clr3" style="background-color:blue" onclick="changeColor(this)"></div>
<div id="text">
需要显示效果的文字<br/>
需要显示效果的文字<br/>
需要显示效果的文字<br/>
需要显示效果的文字<br/>
</div>
<hr/>
<select name="selectColor" onchange="changeColor2()"> //注意这里是onchange而不是onclick
<option value="black">选择颜色</option>
<option value="red">红色</option>
<option value="green">绿色</option>
<option value="blue">蓝色</option>
</select>
<script type="text/javascript">
function changeColor(node){
var colorVal=node.style.backgroundColor;
document.getElementById("text").style.color=colorVal;
}
function changeColor2(){
var oSelectedNode=document.getElementsByName("selectColor")[0];
var colorVal=oSelectedNode.options[oSelectedNode.selectedIndex].value;
document.getElementById("text").style.color=colorVal;
}
</script>
</body>
</html>
练习：选择城市（二级联动菜单）
<html>
<head>
<title>这是我的网页</title>
<style type="text/css">
width:100px;
</style>
</head>
<body>
<select id="selid" onchange="selectCity()">
<option>选择省市</option>
<option value="beijing">北京</option>
<option>山东</option>
<option>辽宁</option>
<option>河北</option>
</select>
<select id="subselid">
<option>选择城市</option>
</select>
<script type="text/javascript">
function selectCity(){
var collCities=[[‘选择城市‘],
[‘海淀区‘,‘朝阳区‘,‘东城区‘, ‘西城区‘],
[‘济南‘,‘青岛‘,‘烟台‘,‘威海‘],
[‘沈阳‘,‘大连‘,‘鞍山‘,‘抚顺‘],
[‘石家庄‘,‘保定‘,‘邯郸‘,‘廊坊‘]];
//获取两个下拉菜单对象。
var oSelNode=document.getElementById("selid");
var oSubSelNode=document.getElementById("subselid");
//获取到底选择的是哪个省
var index=oSelNode.selectedIndex;
//通过角标到容器中去获取对应的城市数组。
var arrCities=collCities[index];
// //将子菜单中的内容清空。否则，如果选山东，城市里会既有北京的区，又有山东的城市。
// for(var x=0;x<oSubSelNode.length;){ //注意：这里不需要x++
// oSubSelNode.removeChild(oSubSelNode.option[x]);
// }
// //上面这个删除太麻烦了，直接一句话就可以代替。
oSubSelNode.length=0;
//遍历获取到的对应城市的数组，并将这个数组的元素封装成option对象，添加到子菜单中。
for(var x=0;x<arrCities.length;x++){
var oOptNode=document.createElement("option");
oOptNode.innerHTML=arrCities[x];
oSubSelNode.appendChild(oOptNode);
}
}
</script>
</body>
</html>
练习：在页面中添加附件的动作。
<html>
<head>
<title>这是我的网页</title>
<style type="text/css">
table a:link,a:visited{
color:#179ed9;
text-decoration:none;
}
table a:hover{
color:#f36021;
}
</style>
</head>
<body>
<table id="fileid">
<tr>
<td><a href="javascript:void(0)" onclick="addFile()">添加附件</a></td>
</tr>
<script type="text/javascript">
function addFile(){
//因为文件选取框定义在行对象中，
//所以只要给表格创建新的行和单元格即可。
var oTabNode=document.getElementById("fileid");
var oTrNode=oTabNode.insertRow();
var oTdNode_file=oTrNode.insertCell();
var oTdNode_del=oTrNode.insertCell();
oTdNode_file.innerHTML="<input type=‘file‘/>";
oTdNode_del.innerHTML="<a href=‘javascript:void(0)‘ onclick=‘deleteFile(this)‘>删除附件</a>";
}
function deleteFile(node){
var oTrNode=node.parentNode.parentNode;
oTrNode.parentNode.removeChild(oTrNode);
}
</script>
</body>
</html>
表单校验
<html>
<head>
<title>这是我的网页</title>
</head>
<body>
<form id="userinfo" onsubmit="return checkForm()"> <!--注意：这里是return checkForm()。才能在用户名错误的情况下，不提交数据。否则会一直提交。-->
用户名称：<input type="text" name="user" onblur="checkUser()" />
<span id="userspan"></span>
<br/>
输入密码：<input type="text" name="psw" onblur="checkPsw()" />
<span id="pswspan"></span>
<br/>
确认密码：<input type="text" name="repsw" onblur="checkRepsw()" />
<span id="repswspan"></span>
<br/>
邮件地址:<input type="text" name="mail" onblur="checkMail()" />
<span id="mailspan"></span>
<br/>
<input type="submit" value="提交数据" />
</form>
<hr/>
<input type="button" value="我的自定义提交" onclick="mySubmit()"/>
<script type="text/javascript">
//校验用户名
function checkUser(){
var flag;
var oUserNode=document.getElementsByName("user")[0];
var name=oUserNode.value;
var oSpanNode=document.getElementById("userspan");
//定义正则表达式。用户名必须是4个字母。
var reg=new RegExp("^[a-z]{4}$","i");
if(reg.test(name)){
oSpanNode.innerHTML="用户名正确".fontcolor("green");
flag=true;
}else{
oSpanNode.innerHTML="用户名错误".fontcolor("red");
flag=false;
}
return flag;
}
// 想要控制只在用户名正确的时候才提交数据，怎么办？
// 直接在form后面加个属性就行。改成这样： <form onsubmit="return checkForm()">
// 注意：这里是return checkForm()。才能在用户名错误的情况下，不提交数据。否则会一直提交。
//
// 另一种方式：自定义提交按钮
// 直接加个按钮，定义个事件,然后用form的submit()方法就行。
//提交事件的处理
function checkForm(){
alert(checkUser()+checkPsw()+checkRepsw()+checkMail());
if(checkUser()&&checkPsw()&&checkRepsw()&&checkMail()){
return true;
}else{
return false;
}
}
function mySubmit(){
var oFormNode=document.getElementById("userinfo");
if(checkUser()&&checkPsw()&&checkRepsw()&&checkMail()){
oFormNode.submit();
}else{
return;
}
}
//关于校验：
//发现很多框（比如用户名和密码）的校验除了几个内容不同外，过程几乎是一样的，所以进行了代码的提取。
function check(name,reg,spanId,okinfo,errinfo){
var flag;
var val=document.getElementsByName(name)[0].value;
var oSpanNode=document.getElementById(spanId);
if(reg.test(val)){
oSpanNode.innerHTML=okinfo.fontcolor("green");
flag=true;
}else{
oSpanNode.innerHTML=errinfo.fontcolor("red");
flag=false;
}
return flag;
}
//这下校验就很简单方便了，比如要校验密码。
function checkPsw(){
var reg=/^\d{4}$/; //这是正则表达式的另一种定义方式，这种方式的数字就不用写成\\d了，因为外面没有双引号
return check("psw",reg,"pswspan","密码格式正确","密码格式错误");
}
//校验确认密码
function checkRepsw(){
var flag;
//获取密码框内容
var pass=document.getElementsByName("psw")[0].value;
//获取确认密码框内容
var repass=document.getElementsByName("repsw")[0].value;
//获取确认密码的span区域
var oSpanNode=document.getElementById("repswspan");
if(pass==repass){
oSpanNode.innerHTML="密码一致".fontcolor("green");
flag=true;
}else{
oSpanNode.innerHTML="密码不一致".fontcolor("red");
flag=false;
}
return flag;
}
//校验邮件
function checkMail(){
var reg=/^\[email protected]\w+(\.\w+)+$/i; //\w后面写个加号表示一次或多次。
return check("mail",reg,"mailspan","邮件地址格式正确","邮件地址格式错误");
}
</script>
</body>
</html>