javascript经典题目 -

saviorzuo

浏览: 19878 次
性别:
来自: 上海

最近访客更多访客>>

1301244717

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

javascript经典题目

博客分类：

javascript

JavaScript UI HTML

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

</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>
   
   </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);}

分享到：