java（二十）練習
練習：單選按鈕演示。
<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>
本文出自 “12946849” 博客，請務必保留此出處http://12956849.blog.51cto.com/12946849/1959727
java（二十）練習