javascript经典题目(不断补充中)

看过请留个言，转载请注明出处，尊重作者劳动成果，谢谢！

下面是平时布置的一些JS的小作业题目，大家可以自己动手写一下，然后参考实现。

1. 实现列表框元素的左右移动。

move.html

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>

<tr>

</select></td>

<td><input type="button" value=">>"

onclick="move('left','right')"><br>

<input type="button" value="<<"

onclick="move('right','left')"></td>

</select></td>

</tr>

</table>

2. 实现姓名和学号每隔一秒钟互换的效果。

change.html

//每隔一秒钟学号和姓名互换

var i = 0;

window.onload=change;

setInterval('change()',1000);

function change()

{

if(i%2)

{

document.getElementById("result").innerHTML='姓名:张三';

}else

{

document.getElementById("result").innerHTML='学号:0303003';

}

i++;

}

</script>

3. 动态显示当前日期时间。

datetime.html

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 minute = 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>

4. 实现全选和反选。

check.html

//全选

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>

5. 实现省市二级联动

connAction.html

<!--

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("上海","上海");

group[0][2]=new Option("天津","天津");

group[0][3]=new Option("重庆","重庆");

group[1][0]=new Option("武汉","武汉");

group[1][1]=new Option("鄂州","鄂州");

group[1][2]=new Option("孝感","孝感");

group[1][3]=new Option("黄冈","黄冈");

group[1][4]=new Option("黄石","黄石");

group[2][0]=new Option("石家庄","石家庄");

group[2][1]=new Option("保定","保定");

group[2][2]=new Option("张家口","张家口");

group[2][3]=new Option("承德","承德");

group[3][0]=new Option("长沙","长沙");

group[3][1]=new Option("湘潭","湘潭");

group[3][2]=new Option("株州","株州");

group[3][3]=new Option("衡阳","衡阳");

group[3][4]=new Option("岳阳","岳阳");

}

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)">

</select>

省

</select>

市

6. 实现基本的表单验证功能

formCheck.html

<HTML>

<HEAD>

<TITLE>FormCheck</TITLE>

<STYLE>

TD {

FONT-SIZE: 12px;

COLOR: #333333

}

</STYLE>

<!--

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();

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>

<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>

<TBODY>

<TR>

</TR>

<TR>

</TR>

<TR>

</TR>

<TR>

</TR>

<TR>

</TR>

<TR>

<TD width=182 height=25>只能输入数字、字母、下划线：</TD>

</TR>

<TR>

<TD width=182 height=25>输入长度在4-6之间：</TD>

</TR>

<TD colSpan=2 height=25><INPUT type=submit

value=" 点击测试 " name=Submit></TD>

</TR>

</TBODY>

</TABLE>

</FORM>

</CENTER>

</BODY>

</HTML>

formcheck.js

/*js函数文件 formcheck.js*/

/*焦点放置在第一个表单域*/

function focusInFirst(){

document.forms[0].elements[0].focus();}

/*判断用户输入是否为空*/

function isEmpty(ui) {

return (ui==null||ui=="");}

/*取得用户输入的字符串的长度*/

function getLength(ui) {

var i,sum=0;

for(i=0;i<ui.length;i++) {

if ((ui.charCodeAt(i)>=0) && (ui.charCodeAt(i)<=255))

sum++;

else

sum+=2;}

return sum;}

/*是否为数字、字母或下划线*/

function isNLU(ui) {

var valid=/^/w*$/;

return (valid.test(ui));}

/*判断是否为身份证号码*/

function isIdno(ui){

var valid=/(^/d{16}$)|(^/d{18}$)/;