js经典试题

1. 实现列表框元素的左右移动。 move.html <script type="text/javascript"> function move(a,b) { var aObj = document.getElementById(a); var bObj = document.getElementById(b); for(var i=0;i<aObj.length;i++) { if(aObj[i].selected) { var opt = new Option(aObj[i].text,aObj[i].value); bObj.add(opt); aObj.remove(i); i--; } } } </script> <table width="40%" border="1" bgcolor="#cecece"> <tr> <td><select id="left" size="6" multiple> <option value="1">增加简历</option> <option value="2">删除简历</option> <option value="3">修改简历</option> <option value="4">列表简历</option> </select></td> <td><input type="button" value=">>" onclick="move('left','right')"><br> <input type="button" value="<<" onclick="move('right','left')"></td> <td><select id="right" size="6" multiple style="width: 80px"> </select></td> </tr> </table> 2. 实现姓名和学号每隔一秒钟互换的效果。 change.html <script> //每隔一秒钟学号和姓名互换 var i = 0; window.onload=change; setInterval('change()',1000);
group[0][2]=new Option("天津","天津"); group[0][3]=new Option("重庆","重庆"); group[1][0]=new group[1][1]=new group[1][2]=new group[1][3]=new group[1][4]=new group[2][0]=new group[2][1]=new group[2][2]=new group[2][3]=new group[3][0]=new group[3][1]=new group[3][2]=new group[3][3]=new group[3][4]=new } function connAction(x){ var city=document.getElementById("city"); for (var m=city.length-1;m>0;m--) { city.options[m]=null; } for (i=0;i<group[x].length;i++){ city.options[i]=new Option(group[x][i].text,group[x][i].value); } } //--> </script> <select name="province" onChange="connAction(this.selectedIndex)"> <option value="直辖市" selected>直辖市</option> <option value="湖北">湖北</option> <option value="河北">河北</option> <option value="湖南">湖南</option> </select> 省 <select name="city"> <option value="北京" selected>北京</option> Option("武汉","武汉"); Option("鄂州","鄂州"); Option("孝感","孝感"); Option("黄冈","黄冈"); Option("黄石","黄石"); Option("石家庄","石家庄"); Option("保定","保定"); Option("张家口","张家口"); Option("承德","承德"); Option("长沙","长沙"); Option("湘潭","湘潭"); Option("株州","株州"); Option("衡阳","衡阳"); Option("岳阳","岳阳");
function change() { if(i%2) { document.getElementById("result").innerHTML='姓名:张三'; }else { document.getElementById("result").innerHTML='学号:0303003'; } i++; } </script> <div id="result"></div> 3. 动态显示当前日期时间。 datetime.html <script> window.onload=init; setInterval('init()',1000); function init() { var date = new Date(); var year = date.getYear(); var month = date.getMonth()+1; if(month<10)month="0"+month; var day = date.getDate(); if(day<10)day="0"+day; var hour = date.getHours(); if(hour<10)hour="0"+hour; var miwenku.baidu.comute = date.getMinutes(); if(minute<10)minute="0"+minute; var second = date.getSeconds(); if(second<10)second="0"+second; var dateTime = year+"-"+month+"-"+day+" "+hour+":"+minute+":"+second; document.getElementById("dateTime").value= dateTime; } </script> <input type="text" name="dateTime" readonly> 4. check.html <script> //全选 实现全选和反选。
function checkAll() { var chAll = document.getElementById("ckAll"); var items = document.getElementsByName("item"); for(var i = 0;i<items.length;i++) { items[i].checked = chAll.checked; } } //反选 function reverseAll() { var revAll = document.getElementById("revAll"); var items = document.getElementsByName("item"); for(var i = 0;i<items.length;i++) { items[i].checked = !items[i].checked ; } } </script> 全选<input type="checkbox" name="ckAll" onclick="checkAll()">/反选 <input type="checkbox" name="revAll" onclick="reverseAll()"><br> <input type="checkbox" name="item"><br> <input type="checkbox" name="item"><br> <input type="checkbox" name="item"><br> <input type="checkbox" name="item"><br> <input type="checkbox" name="item"><br> 5. 实现省市二级联动 connAction.html <script language="javascript"> <!-var group; window.onload=init; function init(){ var len = document.getElementById("province").length; group=new Array(len); for (var i=0; i<len; i++) { group[i]=new Array(); } group[0][0]=new Option("北京","北京"); group[0][1]=new Option("上海","上海");
return false;} if(!isNLU(document.testForm.nlu.value)){ alert("该域只能输入数字、字母或下划线！"); document.testForm.nlu.focus(); return false;} var len=getLength(document.testForm.leng.value); if(len<4||len>6){ alert("该域要求输入长度范围是 4 至 6 个字符！"); document.testForm.leng.focus(); return false;} } //--> </SCRIPT> <BODY text=#000000 bgColor=#ffffff onload=focusInFirst()> <CENTER><B><FONT face="Geneva, Arial, Helvetica, san-serif" color=#ff6600 size=4>The sample of FormCheck</FONT></B> <FONT face="Arial, Helvetica, sans-serif" size=2>(By Roczhao) </FONT> <HR width="60%" color=#000000 noShade SIZE=1> <FORM name=testForm onsubmit="return formCheck();" method=post> <TABLE cellSpacing=0 cellPadding=0 width=500 border=1> <TBODY> <TR> <TD width=182 height=25>身份证：</TD> <TD width=312><INPUT name=id></TD> </TR> <TR> <TD width=182 height=25>固定电话：</TD> <TD width=312><INPUT name=tel></TD> </TR> <TR> <TD width=182 height=25>手机号码：</TD> <TD width=312><INPUT name=mobi></TD> </TR> <TR> <TD width=182 height=25>邮箱：</TD> <TD width=312><INPUT name=mail></TD> </TR> <TR> <TD width=182 height=25>邮编：</TD> <TD width=312><INPUT name=post></TD>
<option value="上海">上海</option> <option value="天津">天津</option> <option value="重庆">重庆</option> </select> 市 6. 实现基本的表单验证功能 formCheck.html <HTML> <HEAD> <TITLE>FormCheck</TITLE> <META http-equiv=Content-Type content="text/html; charset=gb2312"> <STYLE> TD { FONT-SIZE: 12px; COLOR: #333333 } </STYLE> <SCRIPT language=JavaScript type=text/JavaScript src="formcheck.js"></SCRIPT> <SCRIPT language=JavaScript> <!-function formCheck(){ if(!isIdno(document.testForm.id.value)){ alert("身份证号码输入有误！要求只能输入数字，长度为 16 或 18 位。"); document.testForm.id.focus(); return false;} if(!isChinaTel(document.testForm.tel.value)){ alert("固定电话号码输入有误！ 合法的格式为： 区号-电话号码。 "); document.testForm.tel.focus(); return false;} if(!isChinaMob(document.testForm.mobi.value)){ alert("移动电话号码输入有误！"); document.testForm.mobi.focus(); return false;} if(!isMail(document.testForm.mail.value)){ alert("邮箱输入有误！"); document.testForm.mail.focus(); return false;} if(!isPostCode(document.testForm.post.value)){ alert("邮政编码输入有误！要求只能输入数字，长度为 6 位。"); document.testForm.post.focus();