当前位置: 代码迷 >> JavaScript >> javascript经典标题
  详细解决方案

javascript经典标题

热度:245   发布时间:2012-11-22 00:16:41.0
javascript经典题目
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);
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 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>
<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("上海","上海");
   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)">
   <option value="直辖市" selected>直辖市</option>
   <option value="湖北">湖北</option>
   <option value="河北">河北</option>
   <option value="湖南">湖南</option>
</select>

<select name="city">
   <option value="北京" selected>北京</option>
   <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(); 
     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>
      </TR>
      <TR>
         <TD width=182 height=25>只能输入数字、字母、下划线:</TD>
         <TD width=312><INPUT name=nlu></TD>
      </TR>
      <TR>
         <TD width=182 height=25>输入长度在4-6之间:</TD>
         <TD width=312><INPUT name=leng></TD>
      </TR>
      <TR align=middle>
         <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}$)/; 
       return    (isEmpty(ui)||valid.test(ui));} 
  
   /*判断是否为邮政编码*/ 
   function    isPostCode(ui){ 
       var    valid=/^\d{6}$/; 
       return    (isEmpty(ui)||valid.test(ui));} 
  
   /*判断是否为固定电话*/ 
   function    isChinaTel(ui){ 
       var    valid=/^0\d{2,3}\-\d{7,8}$/; 
       return    (isEmpty(ui)||valid.test(ui));} 
  
   /*判断是否为移动电话*/ 
   function    isChinaMob(ui){ 
       var    valid=/^0?13[0,1,3,5,6,8,9]\d{8}$/; 
       return    (isEmpty(ui)||valid.test(ui));} 
  
   /*判断是否为电话,只能为固定电话或移动电话*/ 
   function    isTel(ui){ 
       var    valid=/(^0\d{2,3}\-\d{7,8}$)|(^0?13[0,1,3,5,6,8,9]\d{8}$)/; 
       return    (isEmpty(ui)||valid.test(ui));} 
  
   /*判断是否为邮件*/ 
   function    isMail(ui){ 
     if(isEmpty(ui)){return    true;} 
       var    notValid=/(@.*@)|(\.\.)|(@\.)|(\.@)|(^\.)|(^\-)|(\-\.)|(\.\-)/; 
       var    valid=/^.+\@[a-zA-Z0-9\-\.]+\.[a-zA-Z]{2,3}$/; 
     return    (!notValid.test(ui)&&valid.test(ui));} 
  
   /*用户输入字符串长度是否在两值之间*/  
   function    isLenBetween(ui,minl,maxl)    { 
       return    (ui>=minl&&ui<=maxl);}
  相关解决方案