javaScript 收藏（1）

、数字验证内
 1.1 整数
     /^(-|\+)?\d+$/.test(str)
 1.2 大于0的整数 （用于传来的ID的验证)
     /^\d+$/.test(str)
 1.3 负整数的验证
     /^-\d+$/.test(str)
2、时间类
 2.1 短时间，形如 (13:04:06)
     function isTime(str)
     {
       var a = str.match(/^(\d{1,2})(:)?(\d{1,2})\2(\d{1,2})$/);
       if (a == null) {alert(''输入的参数不是时间格式''); return false;}
       if (a[1]>24 || a[3]>60 || a[4]>60)
       {
         alert("时间格式不对");
         return false
       }
       return true;
     }
 2.2 短日期，形如 (2003-12-05)
     function strDateTime(str)
     {
        var r = str.match(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/);
        if(r==null)return false;
        var d= new Date(r[1], r[3]-1, r[4]);
        return (d.getFullYear()==r[1]&&(d.getMonth()+1)==r[3]&&d.getDate()==r[4]);
     }
 2.3 长时间，形如 (2003-12-05 13:04:06)
     function strDateTime(str)
     {
       var reg = /^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2}) (\d{1,2}):(\d{1,2}):(\d{1,2})$/;
       var r = str.match(reg);
       if(r==null)return false;
       var d= new Date(r[1], r[3]-1,r[4],r[5],r[6],r[7]);
       return (d.getFullYear()==r[1]&&(d.getMonth()+1)==r[3]&&d.getDate()==r[4]&&d.getHours()==r[5]&&d.getMinutes()==r[6]&&d.getSeconds()==r[7]);
     }
 2.4 只有年和月。形如(2003-05,或者2003-5)
 2.5 只有小时和分钟,形如(12:03)
3、表单类
 3.1 所有的表单的值都不能为空
     <input onblur="if(this.value.replace(/^\s+|\s+$/g,'''')=='''')alert(''不能为空!'')">
 3.2 多行文本框的值不能为空。
 3.3 多行文本框的值不能超过sMaxStrleng
 3.4 多行文本框的值不能少于sMixStrleng
 3.5 判断单选框是否选择。
 3.6 判断复选框是否选择.
 3.7 复选框的全选，多选，全不选，反选
 3.8 文件上传过程中判断文件类型
4、字符类
 4.1 判断字符全部由a-Z或者是A-Z的字字母组成
     <input onblur="if(/[^a-zA-Z]/g.test(this.value))alert(''有错'')">
 4.2 判断字符由字母和数字组成。
     <input onblur="if(/[^0-9a-zA-Z]/g.test(this.value))alert(''有错'')">
 4.3 判断字符由字母和数字，下划线,点号组成.且开头的只能是下划线和字母
     /^([a-zA-z_]{1})([\w]*)$/g.test(str)
 4.4 字符串替换函数.Replace();
5、浏览器类
 5.1 判断浏览器的类型
     window.navigator.appName
 5.2 判断ie的版本
     window.navigator.appVersion
 5.3 判断客户端的分辨率
     window.screen.height;  window.screen.width;

6、结合类
 6.1 email的判断。
     function ismail(mail)
     {
       return(new RegExp(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/).test(mail));
     }
 6.2 手机号码的验证
 6.3 身份证的验证
     function isIdCardNo(num)
     {
       if (isNaN(num)) {alert("输入的不是数字！"); return false;}
       var len = num.length, re;
       if (len == 15)
         re = new RegExp(/^(\d{6})()?(\d{2})(\d{2})(\d{2})(\d{3})$/);
       else if (len == 18)
         re = new RegExp(/^(\d{6})()?(\d{4})(\d{2})(\d{2})(\d{3})(\d)$/);
       else {alert("输入的数字位数不对！"); return false;}
       var a = num.match(re);
       if (a != null)
       {
         if (len==15)
         {
           var D = new Date("19"+a[3]+"/"+a[4]+"/"+a[5]);
           var B = D.getYear()==a[3]&&(D.getMonth()+1)==a[4]&&D.getDate()==a[5];
         }
         else
         {
           var D = new Date(a[3]+"/"+a[4]+"/"+a[5]);
           var B = D.getFullYear()==a[3]&&(D.getMonth()+1)==a[4]&&D.getDate()==a[5];
         }
         if (!B) {alert("输入的身份证号 "+ a[0] +" 里出生日期不对！"); return false;}
       }
       return true;
     }

3.7 复选框的全选，多选，全不选，反选
<form name=hrong>
<input type=checkbox name=All onclick="checkAll(''mm'')">全选<br/>
<input type=checkbox name=mm onclick="checkItem(''All'')"><br/>
<input type=checkbox name=mm onclick="checkItem(''All'')"><br/>
<input type=checkbox name=mm onclick="checkItem(''All'')"><br/>
<input type=checkbox name=mm onclick="checkItem(''All'')"><br/>
<input type=checkbox name=mm onclick="checkItem(''All'')"><br/><br/>


<input type=checkbox name=All2 onclick="checkAll(''mm2'')">全选<br/>
<input type=checkbox name=mm2 onclick="checkItem(''All2'')"><br/>
<input type=checkbox name=mm2 onclick="checkItem(''All2'')"><br/>
<input type=checkbox name=mm2 onclick="checkItem(''All2'')"><br/>
<input type=checkbox name=mm2 onclick="checkItem(''All2'')"><br/>
<input type=checkbox name=mm2 onclick="checkItem(''All2'')"><br/>

</form>

<SCRIPT LANGUAGE="java script">
function checkAll(str)
{
 var a = document.getElementsByName(str);
 var n = a.length;
 for (var i=0; i<n; i++)
 a.checked = window.event.srcElement.checked;
}
function checkItem(str)
{
 var e = window.event.srcElement;
 var all = eval("document.hrong."+ str);
 if (e.checked)
 {
   var a = document.getElementsByName(e.name);
   all.checked = true;
   for (var i=0; i<a.length; i++)
   {
     if (!a.checked){ all.checked = false; break;}
   }
 }
 else all.checked = false;
}
</SCRIPT>

3.8 文件上传过程中判断文件类型
<input type=file onchange="alert(this.value.match(/^(.*)(\.)(.{1,8})$/)[3])">

画图:
<OBJECT
id=S
style="LEFT: 0px; WIDTH: 392px; TOP: 0px; HEIGHT: 240px"
height=240
width=392
classid="clsid:369303C2-D7AC-11D0-89D5-00A0C90833E6">
</OBJECT>
<SCRIPT>
S.DrawingSurface.ArcDegrees(0,0,0,30,50,60);
S.DrawingSurface.ArcRadians(30,0,0,30,50,60);
S.DrawingSurface.Line(10,10,100,100);
</SCRIPT>

写注册表：
<SCRIPT>
var WshShell = WScript.CreateObject("WScript.Shell");
WshShell.RegWrite ("HKCU\\Software\\ACME\\FortuneTeller\\", 1, "REG_BINARY");
WshShell.RegWrite ("HKCU\\Software\\ACME\\FortuneTeller\\MindReader", "Goocher!", "REG_SZ");
var bKey =    WshShell.RegRead ("HKCU\\Software\\ACME\\FortuneTeller\\");
WScript.Echo (WshShell.RegRead ("HKCU\\Software\\ACME\\FortuneTeller\\MindReader"));
WshShell.RegDelete ("HKCU\\Software\\ACME\\FortuneTeller\\MindReader");
WshShell.RegDelete ("HKCU\\Software\\ACME\\FortuneTeller\\");
WshShell.RegDelete ("HKCU\\Software\\ACME\\");
</SCRIPT>

TABLAE相关(客户端动态增加行列）
<HTML>
<SCRIPT LANGUAGE="JScript">
function numberCells() {
   var count=0;
   for (i=0; i < document.all.mytable.rows.length; i++) {
       for (j=0; j < document.all.mytable.rows(i).cells.length; j++) {
           document.all.mytable.rows(i).cells(j).innerText = count;
           count++;
       }
   }
}
</SCRIPT>
<BODY onload="numberCells()">
<TABLE id=mytable border=1>
<TR><TH> </TH><TH> </TH><TH> </TH><TH> </TH></TR>
<TR><TD> </TD><TD> </TD><TD> </TD><TD> </TD></TR>
<TR><TD> </TD><TD> </TD><TD> </TD><TD> </TD></TR>
</TABLE>
</BODY>
</HTML>

１．身份证严格验证：

<script>
var aCity={11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",21:"辽宁",22:"吉林",23:"黑龙江 ",31:"上海",32:"江苏",33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",42:"湖北 ",43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",51:"四川",52:"贵州",53:"云南",54:"西藏 ",61:"陕西",62:"甘肃",63:"青海",64:"宁夏",65:"新疆",71:"台湾",81:"香港",82:"澳门",91:"国外 "}

function cidInfo(sId){
var iSum=0
var info=""
if(!/^\d{17}(\d|x)$/i.test(sId))return false;
sId=sId.replace(/x$/i,"a");
if(aCity[parseInt(sId.substr(0,2))]==null)return "Error:非法地区";
sBirthday=sId.substr(6,4)+"-"+Number(sId.substr(10,2))+"-"+Number(sId.substr(12,2));
var d=new Date(sBirthday.replace(/-/g,"/"))
if(sBirthday!=(d.getFullYear()+"-"+ (d.getMonth()+1) + "-" + d.getDate()))return "Error:非法生日";
for(var i = 17;i>=0;i --) iSum += (Math.pow(2,i) % 11) * parseInt(sId.charAt(17 - i),11)
if(iSum%11!=1)return "Error:非法证号";
return aCity[parseInt(sId.substr(0,2))]+","+sBirthday+","+(sId.substr(16,1)%2?"男":"女")
}

document.write(cidInfo("380524198002300016"),"<br/>");
document.write(cidInfo("340524198002300019"),"<br/>")
document.write(cidInfo("340524197711111111"),"<br/>")
document.write(cidInfo("34052419800101001x"),"<br/>");
</script>

２．验证ＩＰ地址
<SCRIPT LANGUAGE="java script">
function isip(s){
var check=function(v){try{return (v<=255 && v>=0)}catch(x){return false}};
var re=s.split(".")
return (re.length==4)?(check(re[0]) && check(re[1]) && check(re[2]) && check(re[3])):false
}

var s="202.197.78.129";
alert(isip(s))
</SCRIPT>

３．加sp1后还能用的无边框窗口！！
<HTML XMLNS:IE>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<IE:Download ID="include" STYLE="behavior:url(#default#download)" />
<title>Chromeless Window</title>

<SCRIPT LANGUAGE="JScript">
/*--- Special Thanks For andot ---*/

/*
This following code are designed and writen by Windy_sk <[e-mail]>
You can use it freely, but u must held all the copyright items!
*/

/*--- Thanks For andot Again ---*/

var CW_width = 400;
var CW_height = 300;
var CW_top = 100;
var CW_left = 100;
var CW_url = "/";
var New_CW = window.createPopup();
var CW_Body = New_CW.document.body;
var content = "";
var CSStext = "margin:1px;color:black; border:2px outset;border-style:expression(onmouseout=onmouseup=function(){this.style.borderStyle=''outset''}, onmousedown=function(){if(event.button!=2)this.style.borderStyle=''inset''});background-color:buttonface;width:16px;height:14px;font-size:12px;line-height:11px;cursor:Default;";

//Build Window
include.startDownload(CW_url, function(source){content=source});

function insert_content(){
var temp = "";
CW_Body.style.overflow  = "hidden";
CW_Body.style.backgroundColor = "white";
CW_Body.style.border  =  "solid black 1px";
content = content.replace(/<a ([^>]*)>/g,"<a onclick=''parent.open(this.href);return false'' $1>");
temp += "<table width=100% height=100% cellpadding=0 cellspacing=0 border=0>";
temp += "<tr style='';font-size:12px;background:#0099CC;height:20;cursor:default'' ondblclick=\"Max.innerText=Max.innerText==''1''?''2'':''1'';parent.if_max=!parent.if_max;parent.show_CW();\" onmouseup=''parent.drag_up(event)'' onmousemove=''parent.drag_move(event)'' onmousedown=''parent.drag_down(event)'' onselectstart=''return false'' oncontextmenu=''return false''>";
temp += "<td style=''color:#ffffff;padding-left:5px''>Chromeless Window For IE6 SP1</td>";
temp += "<td style=''color:#ffffff;padding-right:5px;'' align=right>";
temp += "<span id=Help  onclick=\"alert(''Chromeless Window For IE6 SP1  -  Ver 1.0\\n\\nCode By Windy_sk\\n\\nSpecial Thanks For andot'')\" style=\""+CSStext+"font-family:System;padding-right:2px;\">?</span>";
temp += "<span id=Min   onclick=''parent.New_CW.hide();parent.blur()'' style=\""+CSStext+"font-family:Webdings;\" title=''Minimum''>0</span>";
temp += "<span id=Max   onclick=\"this.innerText=this.innerText==''1''?''2'':''1'';parent.if_max=!parent.if_max;parent.show_CW();\" style=\""+CSStext+"font-family:Webdings;\" title=''Maximum''>1</span>";
temp += "<span id=Close onclick=''parent.opener=null;parent.close()'' style=\""+CSStext+"font-family:System;padding-right:2px;\" title=''Close''>x</span>";
temp += "</td></tr><tr><td colspan=2>";
temp += "<div id=include style=''overflow:scroll;overflow-x:hidden;overflow-y:auto; HEIGHT: 100%; width:"+CW_width+"''>";
temp += content;
temp += "</div>";
temp += "</td></tr></table>";
CW_Body.innerHTML = temp;
}

setTimeout("insert_content()",1000);

var if_max = true;
function show_CW(){
window.moveTo(10000, 10000);
if(if_max){
 New_CW.show(CW_top, CW_left, CW_width, CW_height);
 if(typeof(New_CW.document.all.include)!="undefined"){
  New_CW.document.all.include.style.width = CW_width;
  New_CW.document.all.Max.innerText = "1";
 }

}else{
 New_CW.show(0, 0, screen.width, screen.height);
 New_CW.document.all.include.style.width = screen.width;
}
}

window.onfocus  = show_CW;
window.onresize = show_CW;

// Move Window
var drag_x,drag_y,draging=false

function drag_move(e){
if (draging){
 New_CW.show(e.screenX-drag_x, e.screenY-drag_y, CW_width, CW_height);
 return false;
}
}

function drag_down(e){
if(e.button==2)return;
if(New_CW.document.body.offsetWidth==screen.width && New_CW.document.body.offsetHeight==screen.height)return;
drag_x=e.clientX;
drag_y=e.clientY;
draging=true;
e.srcElement.setCapture();
}

function drag_up(e){
draging=false;
e.srcElement.releaseCapture();
if(New_CW.document.body.offsetWidth==screen.width && New_CW.document.body.offsetHeight==screen.height) return;
CW_top  = e.screenX-drag_x;
CW_left = e.screenY-drag_y;
}

</SCRIPT>
</HTML>

电话号码的验证

要求：
　　(1)电话号码由数字、"("、")"和"-"构成
　　(2)电话号码为3到8位
　　(3)如果电话号码中包含有区号，那么区号为三位或四位
　　(4)区号用"("、")"或"-"和其他部分隔开
　　(5)移动电话号码为11或12位，如果为12位,那么第一位为0
　　(6)11位移动电话号码的第一位和第二位为"13"
　　(7)12位移动电话号码的第二位和第三位为"13"
　　根据这几条规则，可以与出以下正则表达式：
　　(^[0-9]{3,4}\-[0-9]{3,8}$)|(^[0-9]{3,8}$)|(^\([0-9]{3,4}\)[0-9]{3,8}$)|(^0{0,1}13[0-9]{9}$)


<script language="java script">
function PhoneCheck(s) {
var str=s;
var reg=/(^[0-9]{3,4}\-[0-9]{3,8}$)|(^[0-9]{3,8}$)|(^\([0-9]{3,4}\)[0-9]{3,8}$)|(^0{0,1}13[0-9]{9}$)/
alert(reg.test(str));
}
</script>
<input type=text name="iphone">
<input type=button onclick="PhoneCheck(document.all.iphone.value)" value="Check">

具有在输入非数字字符不回显的效果，即对非数字字符的输入不作反应。
function numbersonly(field,event){
var key,keychar;
if(window.event){
 key = window.event.keyCode;
}
else if (event){
 key = event.which;
}
else{
 return true
}
keychar = String.fromCharCode(key);
if((key == null)||(key == 0)||(key == 8)||(key == 9)||(key == 13)||(key == 27)){
 return true;
}
else if(("0123456789.").indexOf(keychar)>-1){
 window.status = "";
 return true;
}
else {
 window.status = "Field excepts numbers only";
 return false;
}
}

验证ip

str=document.RegExpDemo.txtIP.value;
if(/^(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})$/.test(str)==false)
{
window.alert(''错误的IP地址格式'');
document.RegExpDemo.txtIP.select();
document.RegExpDemo.txtIP.focus();
return;
}
if(RegExp.$1<1 || RegExp.$1>254||RegExp.$2<0||RegExp.$2>254||RegExp.$3<0||RegExp.$3>254||RegExp.$4<1||RegExp.$4>254)
{
window.alert(''错误的IP地址'');
document.RegExpDemo.txtIP.select();
document.RegExpDemo.txtIP.focus();
return;
}
//剔除 如  010.020.020.03 前面 的0
var str=str.replace(/0(\d)/g,"$1");
str=str.replace(/0(\d)/g,"$1");
window.alert(str);


//一下是取数据的类
//Obj参数指定数据的来源(限定Table),默认第一行为字段名称行
//GetTableData类提供MoveNext方法,参数是表的行向上或向下移动的位数,正数向下移动,负数向上.
//GetFieldData方法获得指定的列名的数据
//Sort_desc方法对指定的列按降序排列
//Sort_asc方法对指定的列按升序排列
//GetData方法返回字段值为特定值的数据数组,提供数据,可以在外部进行其他处理
//Delete方法删除当前记录,数组减少一行
//初始化,Obj:table的名字,Leftlen:左面多余数据长度,Rightlen:右面多余数据长度,
function GetTableData(Obj,LeftLen,RightLen){
var MyObj=document.all(Obj);
var iRow=MyObj.rows.length;
var iLen=MyObj.rows[0].cells.length;
var i,j;

TableData=new Array();
 for (i=0;i< iRow;i++){
  TableData=new Array();
  for (j=0;j<iLen;j++){
  TableStr=MyObj.rows(i).cells(j).innerText;
  TableStr=TableStr.substring(LeftLen, TableStr.length-RightLen).Trim();
  TableStr=TableStr.replace(/ /gi,"").replace(/\r\n/ig,"");
  TableData[j]=TableStr;
  }
  }

 this.TableData=TableData;
 this.cols=this.TableData[0].length;
 this.rows=this.TableData.length;
 this.rowindex=0;
}


function movenext(Step){
if (this.rowindex>=this.rows){
return
}

if (Step=="" || typeof(Step)=="undefined") {
if (this.rowindex<this.rows-1)
this.rowindex++;
return;

}
else{
 if (this.rowindex + Step<=this.rows-1 && this.rowindex + Step>=0 ){
 this.rowindex=this.rowindex + Step;
 }
 else
 {
 if (this.rowindex + Step<0){
  this.rowindex= 0;
  return;
  }
 if (this.rowindex + Step>this.rows-1){
  this.rowindex= this.rows-1;
  return;
  }
 }
}
}


function getfielddata(Field){
var colindex=-1;
var i=0;
if (typeof(Field) == "number"){
  colindex=Field;
 }
else
{
for (i=0;i<this.cols && this.rowindex<this.rows ;i++){
  if (this.TableData[0]==Field){
  colindex=i;
  break;
  }  
 }
}
 if (colindex!=-1) {
 return this.TableData[this.rowindex][colindex];
 }

}



function sort_desc(){//降序
var colindex=-1;
var highindex=-1;
desc_array=new Array();
var i,j;
for (n=0; n<arguments.length; n++){
Field=arguments[arguments.length-1-n];
for (i=0;i<this.cols;i++){
 if (this.TableData[0]==Field){
 colindex=i;
 break;
 }  
}
  if ( colindex==-1 )
 return;
  else
 {
 desc_array[0]=this.TableData[0];
 for(i=1;i<this.rows;i++){
 desc_array=this.TableData[1];
 highindex=1;
  for(j=1;j<this.TableData.length;j++){
     if  (desc_array[colindex]<this.TableData[j][colindex]){
     desc_array=this.TableData[j];  
     highindex=j;
   }
  
  }
    if (highindex!=-1)
    this.TableData=this.TableData.slice(0,highindex).concat(this.TableData.slice(highindex+1,this.TableData.length));                      
 }
}


this.TableData=desc_array;
}
return;
}



function sort_asc(){//升序
var colindex=-1;
var highindex=-1;
var i,j;
for (n=0; n<arguments.length; n++){
  asc_array=new Array();
  Field=arguments[arguments.length-1-n];
  for (i=0;i<this.cols;i++){
   if (this.TableData[0]==Field){
   colindex=i;
   break;
   }  
  }
  if ( colindex==-1 )
    return;
  else
    {
    asc_array[0]=this.TableData[0];
    for(i=1;i<this.rows;i++){
    asc_array=this.TableData[1];
    highindex=1;
     for(j=1;j<this.TableData.length;j++){//找出最小的列值
        if  (asc_array[colindex]>this.TableData[j][colindex]){
        asc_array=this.TableData[j];  
        highindex=j;
        
       }
        
      }
        if (highindex!=-1)
        this.TableData=this.TableData.slice(0,highindex).concat(this.TableData.slice(highindex+1,this.TableData.length));                      
       
     }
    }


   this.TableData=asc_array;
}
return;
}



function getData(Field,FieldValue){
var colindex=-1;
var i,j;

GetData=new Array();
 if (typeof(Field)=="undefined" || typeof(FieldValue)=="undefined" ){
 return this.TableData;
 }

  for(j=0;j<this.cols;j++){
     if  (this.TableData[0][j]==Field){
    colindex=j;
    }
  }
  if (colindex!=-1){
  
  for(i=1;i<this.rows;i++){
     if  (this.TableData[colindex]==FieldValue){
    GetData=new Array();
    GetData=this.TableData;
    }
  }
  }
  return GetData;
}
function Delete(){
this.TableData=this.TableData.slice(0,this.rowindex).concat(this.TableData.slice(this.rowindex+1,this.TableData.length));                      
this.rows=this.TableData.length;
return;
}
function updateField(Field,FieldValue){
var colindex=-1;
var i=0;
if (typeof(Field) == "number"){
  colindex=Field;
 }
else
{
for (i=0;i<this.cols && this.rowindex<this.rows ;i++){
  if (this.TableData[0]==Field){
  colindex=i;
  break;
  }  
 }
}
if (colindex!=-1) {
 this.TableData[this.rowindex][colindex]=FieldValue;
 }


}
function movefirst(){
this.rowindex=0;
}
function movelast(){
this.rowindex=this.rows-1;
}
function String.prototype.Trim() {return this.replace(/(^\s*)|(\s*$)/g,"");}
GetTableData.prototype.MoveNext = movenext;
GetTableData.prototype.GetFieldData = getfielddata;
GetTableData.prototype.Sort_asc = sort_asc;
GetTableData.prototype.Sort_desc = sort_desc;
GetTableData.prototype.GetData = getData;
GetTableData.prototype.Delete = Delete;
GetTableData.prototype.UpdateField = updateField;
GetTableData.prototype.MoveFirst = movefirst;

具体的例子：http://202.119.73.208/NetEAn/com/test/jsprint.htm

在每个文本框的onblur事件中调用校验代码,并且每个文本框中onKeyDown事件中写一个enter转tab函数

//回车键换为tab
function enterToTab()
{
   if(event.srcElement.type != ''button'' && event.srcElement.type != ''textarea''
      && event.keyCode == 13)
   {
       event.keyCode = 9;
   }
}

有时候还需要自由编辑表格---
给大家一个自由编辑表格的小例子,写的有点乱,呵呵:）

//===============================start================================

HTML代码

<HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=gb2312"> <TITLE>测试修改表格</TITLE> <STYLE> /*提示层的样式*/ div { BORDER-RIGHT: #80c144 1px solid; BORDER-TOP: #80c144 1px solid; VISIBILITY: hidden; BORDER-LEFT: #80c144 1px solid; CURSOR: default; LINE-HEIGHT: 20px; BORDER-BOTTOM: #80c144 1px solid; FONT-FAMILY: 宋体; font-size:12px; POSITION: absolute; BACKGROUND-COLOR: #f6f6f6; TOP:30px; LEFT:30px; } /*tr的样式*/ tr { font-family: "宋体"; color: #000000; background-color: #C1DBF5; font-size: 12px } /*table脚注样式*/ .TrFoot { FONT-SIZE: 12px; font-family:"宋体", "Verdana", "Arial"; BACKGROUND-COLOR: #6699CC; COLOR:#FFFFFF; height: 25; } /*trhead属性*/ .TrHead { FONT-SIZE: 13px; font-family:"宋体", "Verdana", "Arial"; BACKGROUND-COLOR: #77AADD; COLOR:#FFFFFF; height: 25; } /*文本框样式*/ INPUT { BORDER-COLOR: #AACEF7 #AACEF7 #AACEF7 #AACEF7; BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 1px solid; BORDER-BOTTOM: 1px solid; FONT-SIZE: 12px; FONT-FAMILY: "宋体","Verdana"; color: #000000; BACKGROUND-COLOR: #E9EFF5; } /*button样式*/ button { BORDER-COLOR: #AACEF7 #AACEF7 #AACEF7 #AACEF7; BACKGROUND-COLOR: #D5E4F3; CURSOR: hand; FONT-SIZE:12px; BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 1px solid; BORDER-BOTTOM: 1px solid; COLOR: #000000; } </STYLE> </HEAD> <BODY> <TABLE id="editer_table" width="100%" align="center" onclick="editerTableCell(''editer_table'',''no_editer'')"> <TR class="TrHead"> <TD colspan="3" align="center" id="no_editer">自由编辑表格</TD> </TR> <TR> <TD width="33%">单击开始编辑按钮,然后点击各单元格编辑</TD> <TD width="33%">2</TD> <TD width="33%">3</TD> </TR> <TR> <TD width="33%">4</TD> <TD width="33%">5</TD> <TD width="33%">6</TD> </TR> <TR> <TD width="33%">one</TD> <TD width="33%">two</TD> <TD width="33%">three</TD> </TR> <TR> <TD width="33%">four</TD> <TD width="33%">five</TD> <TD width="33%">six</TD> </TR> <TR class="TrFoot"> <TD colspan="3" align="center" id="no_editer"> <INPUT type="button" class="bt" value="开始编辑" onClick="editStart()" onMouseOver="showTip()" onMouseMove="showTip()" onMouseOut="editTip.style.visibility = ''hidden'';"> </TD> </TR> </TABLE> </BODY> <DIV id="editTip">请单击某个单元格进行编辑!</DIV> </HTML>

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

]]> http://www.fhlroom.com/default.asp?id=158 牧童 http://www.fhlroom.com/ [e-mail] 2007-04-28T16:53:51+08:00 2007-04-28T16:53:51+08:00

1: <script language=”JavaScript”>
2: JavaScript code goes here
3: </script> 

　

2 隐藏脚本代码

1: <script language=”JavaScript”>
2: <!--
3: document.write(“Hello”);
4: // -->
5: </script> 


在不支持JavaScript的浏览器中将不执行相关代码

3 浏览器不支持的时候显示

1: <noscript>
2: Hello to the non-JavaScript browser.
3: </noscript> 

　

4 链接外部脚本文件

1: <script language=”JavaScript” src='/”filename.js'”></script> 


5 注释脚本

1: // This is a comment
2: document.write(“Hello”); // This is a comment
3: /*
4: All of this
5: is a comment
6: */ 

　

6 输出到浏览器

1: document.write(“<strong>Hello</strong>”); 

　

7 定义变量

1: var myVariable = “some value”; 

　

8 字符串相加

1: var myString = “String1” + “String2”; 

　

9 字符串搜索

1: <script language=”JavaScript”>
2: <!--
3: var myVariable = “Hello there”;
4: var therePlace = myVariable.search(“there”);
5: document.write(therePlace);
6: // -->
7: </script> 

　

10 字符串替换

1: thisVar.replace(“Monday”,”Friday”); 


11 格式化字串

1: <script language=”JavaScript”>
2: <!--
3: var myVariable = “Hello there”;
4: document.write(myVariable.big() + “<br>”);
5: document.write(myVariable.blink() + “<br>”);
6: document.write(myVariable.bold() + “<br>”);
7: document.write(myVariable.fixed() + “<br>”);
8: document.write(myVariable.fontcolor(“red”) + “<br>”);
9: document.write(myVariable.fontsize(“18pt”) + “<br>”);
10: document.write(myVariable.italics() + “<br>”);
11: document.write(myVariable.small() + “<br>”);
12: document.write(myVariable.strike() + “<br>”);
13: document.write(myVariable.sub() + “<br>”);
14: document.write(myVariable.sup() + “<br>”);
15: document.write(myVariable.toLowerCase() + “<br>”);
16: document.write(myVariable.toUpperCase() + “<br>”);
17: 
18: var firstString = “My String”;
19: var finalString = firstString.bold().toLowerCase().fontcolor(“red”);
20: // -->
21: </script> 

　

12 创建数组

1: <script language=”JavaScript”>
2: <!--
3: var myArray = new Array(5);
4: myArray[0] = “First Entry”;
5: myArray[1] = “Second Entry”;
6: myArray[2] = “Third Entry”;
7: myArray[3] = “Fourth Entry”;
8: myArray[4] = “Fifth Entry”;
9: var anotherArray = new Array(“First Entry”,”Second Entry”,”Third Entry”,”Fourth Entry”,”Fifth Entry”);
10: // -->
11: </script> 

　

13 数组排序

1: <script language=”JavaScript”>
2: <!--
3: var myArray = new Array(5);
4: myArray[0] = “z”;
5: myArray[1] = “c”;
6: myArray[2] = “d”;
7: myArray[3] = “a”;
8: myArray[4] = “q”;
9: document.write(myArray.sort());
10: // -->
11: </script> 

　

14 分割字符串

1: <script language=”JavaScript”>
2: <!--
3: var myVariable = “a,b,c,d”;
4: var stringArray = myVariable.split(“,”);
5: document.write(stringArray[0]);
6: document.write(stringArray[1]);
7: document.write(stringArray[2]);
8: document.write(stringArray[3]);
9: // -->
10: </script> 

　

15 弹出警告信息

1: <script language=”JavaScript”>
2: <!--
3: window.alert(“Hello”);
4: // -->
5: </script> 

　

16 弹出确认框

1: <script language=”JavaScript”>
2: <!--
3: var result = window.confirm(“Click OK to continue”);
4: // -->
5: </script> 

　

17 定义函数

1: <script language=”JavaScript”>
2: <!--
3: function multiple(number1,number2) { 
4: var result = number1 * number2;
5: return result;
6: }
7: // -->
8: </script> 

　

18 调用JS函数

1: <a href=”#” onClick=”functionName()”>Link text</a>
2: <a href='/”javascript:functionName'()”>Link text</a> 

　

19 在页面加载完成后执行函数

1: <body onLoad=”functionName();”>
2: Body of the page
3: </body> 


20 条件判断

1: <script>
2: <!--
3: var userChoice = window.confirm(“Choose OK or Cancel”);
4: var result = (userChoice == true) ? “OK” : “Cancel”;
5: document.write(result);
6: // -->
7: </script> 

　

21 指定次数循环

1: <script>
2: <!--
3: var myArray = new Array(3);
4: myArray[0] = “Item 0”;
5: myArray[1] = “Item 1”;
6: myArray[2] = “Item 2”;
7: for (i = 0; i < myArray.length; i++) { 
8: document.write(myArray[i] + “<br>”);
9: }
10: // -->
11: </script> 

　

22 设定将来执行

1: <script>
2: <!--
3: function hello() { 
4: window.alert(“Hello”);
5: }
6: window.setTimeout(“hello()”,5000);
7: // -->
8: </script> 

　

23 定时执行函数

1: <script>
2: <!--
3: function hello() { 
4: window.alert(“Hello”);
5: window.setTimeout(“hello()”,5000);
6: }
7: window.setTimeout(“hello()”,5000);
8: // -->
9: </script> 

　

24 取消定时执行

1: <script>
2: <!--
3: function hello() { 
4: window.alert(“Hello”);
5: }
6: var myTimeout = window.setTimeout(“hello()”,5000);
7: window.clearTimeout(myTimeout);
8: // -->
9: </script> 

　

25 在页面卸载时候执行函数

1: <body onUnload=”functionName();”>
2: Body of the page
3: </body> 

JavaScript就这么回事2：浏览器输出 


26 访问document对象

1: <script language=”JavaScript”>
2: var myURL = document.URL;
3: window.alert(myURL);
4: </script> 

　

27 动态输出HTML

1: <script language=”JavaScript”>
2: document.write(“<p>Here’s some information about this document:</p>”);
3: document.write(“<ul>”);
4: document.write(“<li>Referring Document: “ + document.referrer + “</li>”);
5: document.write(“<li>Domain: “ + document.domain + “</li>”);
6: document.write(“<li>URL: “ + document.URL + “</li>”);
7: document.write(“</ul>”);
8: </script> 


28 输出换行

1: document.writeln(“<strong>a</strong>”);
2: document.writeln(“b”); 

　

29 输出日期

1: <script language=”JavaScript”>
2: var thisDate = new Date();
3: document.write(thisDate.toString());
4: </script> 

　

30 指定日期的时区

1: <script language=”JavaScript”>
2: var myOffset = -2;
3: var currentDate = new Date();
4: var userOffset = currentDate.getTimezoneOffset()/60;
5: var timeZoneDifference = userOffset - myOffset;
6: currentDate.setHours(currentDate.getHours() + timeZoneDifference);
7: document.write(“The time and date in Central Europe is: “ + currentDate.toLocaleString());
8: </script> 


31 设置日期输出格式

1: <script language=”JavaScript”>
2: var thisDate = new Date();
3: var thisTimeString = thisDate.getHours() + “:” + thisDate.getMinutes();
4: var thisDateString = thisDate.getFullYear() + “/” + thisDate.getMonth() + “/” + thisDate.getDate();
5: document.write(thisTimeString + “ on “ + thisDateString);
6: </script> 


32 读取URL参数

1: <script language=”JavaScript”>
2: var urlParts = document.URL.split(“?”);
3: var parameterParts = urlParts[1].split(“&”);
4: for (i = 0; i < parameterParts.length; i++) { 
5: var pairParts = parameterParts[i].split(“=”);
6: var pairName = pairParts[0];
7: var pairValue = pairParts[1];
8: document.write(pairName + “ ：“ +pairValue );
9: }
10: </script> 

你还以为HTML是无状态的么？

33 打开一个新的document对象

1: <script language=”JavaScript”>
2: function newDocument() { 
3: document.open();
4: document.write(“<p>This is a New Document.</p>”);
5: document.close();
6: }
7: </script> 

　

34 页面跳转

1: <script language=”JavaScript”>
2: window.location = “http://www.cnzzw.com.cn/”;
3: </script> 

　

35 添加网页加载进度窗口

1: <html>
2: <head>
3: <script language='javaScript'>
4: var placeHolder = window.open('holder.html','placeholder','width=200,height=200');
5: </script>
6: <title>The Main Page</title>
7: </head>
8: <body onLoad='placeHolder.close()'>
9: <p>This is the main page</p>
10: </body>
11: </html> 

　

JavaScript就这么回事3：图像 

　

36 读取图像属性

1: <img src='http://www.cnzzw.com.cn/”image1.jpg'” name=”myImage”>
2: <a href=”# ” onClick=”window.alert(document.myImage.width)”>Width</a>
3: 


37 动态加载图像

1: <script language=”JavaScript”>
2: myImage = new Image;
3: myImage.src = “Tellers1.jpg”;
4: </script> 


38 简单的图像替换

1: <script language=”JavaScript”>
2: rollImage = new Image;
3: rollImage.src = “rollImage1.jpg”;
4: defaultImage = new Image;
5: defaultImage.src = “image1.jpg”;
6: </script>
7: <a href='/”myUrl'” onMouseOver=”document.myImage.src = rollImage.src;”
8: onMouseOut=”document.myImage.src = defaultImage.src;”>
9: <img src='http://www.cnzzw.com.cn/”image1.jpg'” name=”myImage” width=100 height=100 border=0> 


39 随机显示图像

1: <script language=”JavaScript”>
2: var imageList = new Array;
3: imageList[0] = “image1.jpg”;
4: imageList[1] = “image2.jpg”;
5: imageList[2] = “image3.jpg”;
6: imageList[3] = “image4.jpg”;
7: var imageChoice = Math.floor(Math.random() * imageList.length);
8: document.write(‘<img src=”’ + imageList[imageChoice] + ‘“>’);
9: </script> 


40 函数实现的图像替换

1: <script language=”JavaScript”>
2: var source = 0;
3: var replacement = 1;
4: function createRollOver(originalImage,replacementImage) { 
5: var imageArray = new Array;
6: imageArray[source] = new Image;
7: imageArray[source].src = originalImage;
8: imageArray[replacement] = new Image;
9: imageArray[replacement].src = replacementImage;
10: return imageArray;
11: }
12: var rollImage1 = createRollOver(“image1.jpg”,”rollImage1.jpg”);
13: </script>
14: <a href=”#” onMouseOver=”document.myImage1.src = rollImage1[replacement].src;”
15: onMouseOut=”document.myImage1.src = rollImage1[source].src;”>
16: <img src='http://www.cnzzw.com.cn/”image1.jpg'” width=100 name=”myImage1” border=0>
17: </a> 


41 创建幻灯片

1: <script language=”JavaScript”>
2: var imageList = new Array;
3: imageList[0] = new Image;
4: imageList[0].src = “image1.jpg”;
5: imageList[1] = new Image;
6: imageList[1].src = “image2.jpg”;
7: imageList[2] = new Image;
8: imageList[2].src = “image3.jpg”;
9: imageList[3] = new Image;
10: imageList[3].src = “image4.jpg”;
11: function slideShow(imageNumber) { 
12: document.slideShow.src = imageList[imageNumber].src;
13: imageNumber += 1;
14: if (imageNumber < imageList.length) { 
15: window.setTimeout(“slideShow(“ + imageNumber + “)”,3000);
16: }
17: }
18: </script>
19: </head>
20: <body onLoad=”slideShow(0)”>
21: <img src='http://www.cnzzw.com.cn/”image1.jpg'” width=100 name=”slideShow”> 


42 随机广告图片

1: <script language=”JavaScript”>
2: var imageList = new Array;
3: imageList[0] = “image1.jpg”;
4: imageList[1] = “image2.jpg”;
5: imageList[2] = “image3.jpg”;
6: imageList[3] = “image4.jpg”;
7: var urlList = new Array;
8: urlList[0] = “http://some.host/”;
9: urlList[1] = “http://another.host/”;
10: urlList[2] = “http://somewhere.else/”;
11: urlList[3] = “http://right.here/”;
12: var imageChoice = Math.floor(Math.random() * imageList.length);
13: document.write(‘<a href=”’ + urlList[imageChoice] + ‘“><img src=”’ + imageList[imageChoice] + ‘“></a>’);
14: </script> 

JavaScript就这么回事4：表单 


还是先继续写完JS就这么回事系列吧～
43 表单构成

1: <form method=”post” action=”target.html” name=”thisForm”>
2: <input type=”text” name=”myText”>
3: <select name=”mySelect”>
4: <option value=”1”>First Choice</option>
5: <option value=”2”>Second Choice</option>
6: </select>
7: <br>
8: <input type=”submit” value=”Submit Me”>
9: </form> 


44 访问表单中的文本框内容

1: <form name=”myForm”>
2: <input type=”text” name=”myText”>
3: </form>
4: <a href='#' onClick='window.alert(document.myForm.myText.value);'>Check Text Field</a> 


45 动态复制文本框内容

1: <form name=”myForm”>
2: Enter some Text: <input type=”text” name=”myText”><br>
3: Copy Text: <input type=”text” name=”copyText”>
4: </form>
5: <a href=”#” onClick=”document.myForm.copyText.value =
6: document.myForm.myText.value;”>Copy Text Field</a> 


46 侦测文本框的变化

1: <form name=”myForm”>
2: Enter some Text: <input type=”text” name=”myText” onChange=”alert(this.value);”>
3: </form> 


47 访问选中的Select

1: <form name=”myForm”>
2: <select name=”mySelect”>
3: <option value=”First Choice”>1</option>
4: <option value=”Second Choice”>2</option>
5: <option value=”Third Choice”>3</option>
6: </select>
7: </form>
8: <a href='#' onClick='alert(document.myForm.mySelect.value);'>Check Selection List</a> 


48 动态增加Select项

1: <form name=”myForm”>
2: <select name=”mySelect”>
3: <option value=”First Choice”>1</option>
4: <option value=”Second Choice”>2</option>
5: </select>
6: </form>
7: <script language=”JavaScript”>
8: document.myForm.mySelect.length++;
9: document.myForm.mySelect.options[document.myForm.mySelect.length - 1].text = “3”;
10: document.myForm.mySelect.options[document.myForm.mySelect.length - 1].value = “Third Choice”;
11: </script> 


49 验证表单字段

1: <script language=”JavaScript”>
2: function checkField(field) { 
3: if (field.value == “”) { 
4: window.alert(“You must enter a value in the field”);
5: field.focus();
6: }
7: }
8: </script>
9: <form name=”myForm” action=”target.html”>
10: Text Field: <input type=”text” name=”myField”onBlur=”checkField(this)”>
11: <br><input type=”submit”>
12: </form> 


50 验证Select项

1: function checkList(selection) { 
2: if (selection.length == 0) { 
3: window.alert(“You must make a selection from the list.”);
4: return false;
5: }
6: return true;
7: } 


51 动态改变表单的action

1: <form name=”myForm” action=”login.html”>
2: Username: <input type=”text” name=”username”><br>
3: Password: <input type=”password” name=”password”><br>
4: <input type=”button” value=”Login” onClick=”this.form.submit();”>
5: <input type=”button” value=”Register” onClick=”this.form.action = ‘register.html’; this.form.submit();”>
6: <input type=”button” value=”Retrieve Password” onClick=”this.form.action = ‘password.html’; this.form.submit();”>
7: </form> 


52 使用图像按钮

1: <form name=”myForm” action=”login.html”>
2: Username: <input type=”text” name=”username”><br>
3: Password: <input type=”password”name=”password”><br>
4: <input type=”image” src='http://www.cnzzw.com.cn/”login.gif'” value=”Login”>
5: </form>
6: 


53 表单