JS一些常用效果

最新推荐文章于 2025-04-11 15:47:45 发布

seakingwy

最新推荐文章于 2025-04-11 15:47:45 发布

阅读量5.5k

点赞数

分类专栏：网载.html/javascript 文章标签： javascript function xmlhttprequest date constructor ajax

网载.html/javascript 专栏收录该内容

17 篇文章

订阅专栏

November 10, 2006

在查询页面中显示进度条，在数据load成功后隐去进度条

Posted by kevinwu 02:43 PM | 全文 | 评论 (0) | 引用 (0) | JAVASCRIPT(27)

November 02, 2006

JS

Validator = {
Require : /.+/,
Email : /^/w+([-+.]/w+)*@/w+([-.]/w+)*/./w+([-.]/w+)*$/,
Phone : /^((/(/d{3}/))|(/d{3}/-))?(/(0/d{2,3}/)|0/d{2,3}-)?[1-9]/d{6,7}$/,
Mobile : /^((/(/d{3}/))|(/d{3}/-))?13/d{9}$/,
Url : /^http:[A-Za-z0-9]+/.[A-Za-z0-9]+[//=/?%/-&_~`@[/]/':+!]*([^<>/"/"])*$/,
IdCard : /^/d{18}(/d{2}[A-Za-z0-9])?$/,
Currency : /^/d+(/./d+)?$/,
Number : /^/d+$/,
Zip : /^[1-9]/d{5}$/,
QQ : /^[1-9]/d{4,8}$/,
Integer : /^[-/+]?/d+$/,
Double : /^[-/+]?/d+(/./d+)?$/,
English : /^[A-Za-z]+$/,
Chinese : /^[/u0391-/uFFE5]+$/,
UnSafe : /^(([A-Z]*|[a-z]*|/d*|[-_/~!@#/$%/^&/*/./(/)/[/]/{/}<>/?/'/"]*)|.{0,5})$|/s/,
IsSafe : function(str){return !this.UnSafe.test(str);},
SafeString : "this.IsSafe(value)",
Limit : "this.limit(value.length,getAttribute('min'), getAttribute('max'))",
LimitB : "this.limit(this.LenB(value), getAttribute('min'), getAttribute('max'))",
Date : "this.IsDate(value, getAttribute('min'), getAttribute('format'))",
Repeat : "value == document.getElementsByName(getAttribute('to'))[0].value",
Range : "getAttribute('min') < value && value < getAttribute('max')",
Compare : "this.compare(value,getAttribute('operator'),getAttribute('to'))",
Comparetonow : "this.comparetonow(value)",
Compareto : "this.compareto(value,getAttribute('operator'),document.getElementsByName(getAttribute('to'))[0].value)",
Custom : "this.Exec(value, getAttribute('regexp'))",
Group : "this.MustChecked(getAttribute('name'), getAttribute('min'), getAttribute('max'))",
ErrorItem : [document.forms[0]],
ErrorMessage : ["以下原因导致提交失败：/t/t/t/t"],
Validate : function(theForm, mode){
  var obj = theForm || event.srcElement;
  var count = obj.elements.length;
  this.ErrorMessage.length = 1;
  this.ErrorItem.length = 1;
  this.ErrorItem[0] = obj;
  for(var i=0;i<count;i++){
   with(obj.elements[i]){
    var _dataType = getAttribute("dataType");
    if(typeof(_dataType) == "object" || typeof(this[_dataType]) == "undefined") continue;
    this.ClearState(obj.elements[i]);
    if(getAttribute("require") == "false" && value == "") continue;
    switch(_dataType){
     case "Date" :
     case "Repeat" :
     case "Range" :
     case "Compare" :
     case "Compareto":
     case "Comparetonow":
     case "Custom" :
     case "Group" :
     case "Limit" :
     case "LimitB" :
     case "SafeString" :
      if(!eval(this[_dataType])) {
       this.AddError(i, getAttribute("msg"));
      }
      break;
     default :
      if(!this[_dataType].test(value)){
       this.AddError(i, getAttribute("msg"));
      }
      break;
    }
   }
  }
  if(this.ErrorMessage.length > 1){
   mode = mode || 1;
   var errCount = this.ErrorItem.length;
   switch(mode){
   case 2 :
    for(var i=1;i<errCount;i++)
     this.ErrorItem[i].style.color = "red";
   case 1 :
    alert(this.ErrorMessage.join("/n"));
    this.ErrorItem[1].focus();
    break;
   case 3 :
    for(var i=1;i<errCount;i++){
    try{
     var span = document.createElement("SPAN");
     span.id = "__ErrorMessagePanel";
     span.style.color = "red";
     this.ErrorItem[i].parentNode.appendChild(span);
     span.innerHTML = this.ErrorMessage[i].replace(//d+:/,"*");
     }
     catch(e){alert(e.description);}
    }
                                var fla = 0;
                                for(var i=1;i<errCount;i++){
     if(this.ErrorItem[i].getAttribute("type")!="hidden"){
                                  this.ErrorItem[i].focus();
                                            fla = 1;
                                                break;
     }
    }
                                if(fla==0) alert("请检查必添项！");

    break;
   default :
    alert(this.ErrorMessage.join("/n"));
    break;
   }
   return false;
  }
  return true;
},
limit : function(len,min, max){
  min = min || 0;
  max = max || Number.MAX_VALUE;
  return min <= len && len <= max;
},
LenB : function(str){
  return str.replace(/[^/x00-/xff]/g,"**").length;
},
ClearState : function(elem){
  with(elem){
   if(style.color == "red")
    style.color = "";
   var lastNode = parentNode.childNodes[parentNode.childNodes.length-1];
   if(lastNode.id == "__ErrorMessagePanel")
    parentNode.removeChild(lastNode);
  }
},
AddError : function(index, str){
  this.ErrorItem[this.ErrorItem.length] = this.ErrorItem[0].elements[index];
  this.ErrorMessage[this.ErrorMessage.length] = this.ErrorMessage.length + ":" + str;
},
Exec : function(op, reg){
  return new RegExp(reg,"g").test(op);
},
compare : function(op1,operator){
  var now=date();
  switch (operator) {
   case "NotEqual":
    return (op1 != now);
   case "GreaterThan":
    return (op1 > now);
   case "GreaterThanEqual":
    return (op1 >= now);
   case "LessThan":
    return (op1 < now);
   case "LessThanEqual":
    return (op1 <= now);
   default:
    return (op1 == now);
  }
},
  compareto : function(op1,operator,op2){
  switch (operator) {
   case "NotEqual":
    return (op1 != op2);
   case "GreaterThan":
    return (op1 > op2);
   case "GreaterThanEqual":
    return (op1 >= op2);
   case "LessThan":
    return (op1 < op2);
   case "LessThanEqual":
    return (op1 <= op2);
   default:
    return (op1 == op2);
  }
},
  comparetonow : function(op1){
  var now=(new java.util.Date());
    return (op1 > now);
},

MustChecked : function(name, min, max){
  var groups = document.getElementsByName(name);
  var hasChecked = 0;
  min = min || 1;
  max = max || groups.length;
  for(var i=groups.length-1;i>=0;i--)
   if(groups[i].checked) hasChecked++;
  return min <= hasChecked && hasChecked <= max;
},
IsDate : function(op, formatString){
  formatString = formatString || "ymd";
  var m, year, month, day;
  switch(formatString){
   case "ymd" :
    m = op.match(new RegExp("^(( //d{4})|(//d{2}))([-./])(//d{1,2})//4(//d{1,2})$"));
    if(m == null ) return false;
    day = m[6];
    month = m[5]--;
    year = (m[2].length == 4) ? m[2] : GetFullYear(parseInt(m[3], 10));
    break;
   case "dmy" :
    m = op.match(new RegExp("^( //d{1,2})([-./])(//d{1,2})//2((//d{4})|(//d{2}))$"));
    if(m == null ) return false;
    day = m[1];
    month = m[3]--;
    year = (m[5].length == 4) ? m[5] : GetFullYear(parseInt(m[6], 10));
    break;
   default :
    break;
  }
  if(!parseInt(month)) return false;
  month = month==12 ?0:month;
  var date = new Date(year, month, day);
        return (typeof(date) == "object" && year == date.getFullYear() && month == date.getMonth() && day == date.getDate());
  function GetFullYear(y){return ((y<30 ? "20" : "19") + y)|0;}
}
}

Posted by kevinwu 03:22 PM | 全文 | 评论 (0) | 引用 (0) | JAVASCRIPT(27)

September 06, 2006

javascript常用日期验证

1、
<script language=javascript>
function isDate(v)
{
var r = v.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]);
}
</script>

2、
//component 为要检测的表单的id
function checkDateFormat(component){
strDate = component.value;
//"-",".","/","/"
var reg = /[-|//|/.|//|/s]/g;
strDate = strDate.replace(reg, "-");
//"dddd-dd-dd"
var regDate = /^(/d{1,4})(-)(/d{1,2})/2(/d{1,2})$/;
var result = strDate.match(regDate);
if ( result == null ){
return false;
}
var month = ((""+result[3]).length < 2)?("0" + result[3]):("" + result[3]);
var day = ((""+result[4]).length < 2)? ("0" + result[4]):("" + result[4]);
strDate = result[1] + result[2] + month + result[2] + day;
var date = new Date(result[1], result[3]-1,result[4]);
month = ((date.getMonth() + 1) < 10)?("0" + (date.getMonth() + 1)):("" + (date.getMonth() + 1));
day = (date.getDate() < 10)?("0" + date.getDate()):("" + date.getDate());
var newStr=date.getFullYear() + result[2] + month + result[2] + day;
return newStr == strDate;
}

3、
<script langauge=javascript>
function checkDate(obj)//判断日期格式是不是符合
{
var strDate=obj.value;
re=//d{4}///d{2}///d{2}/g
if(re.test(strDate))//判断日期格式符合YYYY/MM/DD标准
{
var DateArray=strDate.split("/");
var dateElement=new Date(DateArray[0],parseInt(DateArray[1])-1,DateArray[2]);
if(!((dateElement.getFullYear()==parseInt(DateArray[0]))&&((dateElement.getMonth()+1)==parseInt(DateArray[1]))&&(dateElement.getDate()==parseInt(DateArray[2]))))//判断日期逻辑
{
alert("不符合时间逻辑")
obj.value='';
}
else
{
alert("正确")
}
}
else
{
alert("格式输入错误")
obj.value='';
}

}
</script>
<input name=time1 οnblur=checkDate(this)>

4、
<script language=javascript>
String.prototype.isDate = function()
{
   var r = this.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]);
}
alert("2002-01-31".isDate());
alert("2002-01-41".isDate());
</script>

5、
function CheckDate(strDate){
var reg=/^(/d{4})([-])(/d{2})([-])(/d{2})/;
if(!reg.test(strDate)){
alert("日期格式不正确!/n正确格式为:2004-01-01");
return false;
}
var ss=strDate.split("-");
var year=ss[0];
var month=ss[1];
var date=ss[2];
if(!checkYear(year)){return false;}
if(!checkMonth(month)){return false;}
if(!checkDate(year,month,date)){return false;}
return true;
}
function checkYear(year){
if(isNaN(parseInt(year))){alert("年份输入有误,请重新输入!"); return false;}
else if(parseInt(year)<1950 || parseInt(year) >2050){ alert("年份应该在1950-2050之间
!"); return false}
else return true;
}
function checkMonth(month){
if(isNaN(parseInt(month))){alert("月份输入有误,请重新输入!"); return false;}
else if(parseInt(month)<1 || parseInt(month) >12){ alert("月份应该在1-12之间!");
return false}
else return true;
}
function checkDate(year,month,date){
var daysOfMonth=CalDays(parseInt(year),parseInt(month));
if(isNaN(parseInt(date))){alert("日期输入有误,请重新输入!"); return false;}
else if(parseInt(date)<0||parseInt(date)>daysOfMonth){ alert("日期应该在1
-"+daysOfMonth+"之间!"); return false;}
else return true;
}
function CalDays(year,month){
var date= new Date(year,month,0);
return date.getDate();
}
function isLeapYear(year){
if((year %4==0 && year %100!=0) || (year %400==0)) return true;
else return false;
}

Posted by kevinwu 01:27 PM | 全文 | 评论 (0) | 引用 (0) | JAVASCRIPT(27)

免费的Javascript日期输入及选择控件大杂烩！

天上的骆驼 - JS & CSS - 免费的Javascript日期输入及选择控件大杂烩！

Posted by kevinwu 11:12 AM | 全文 | 评论 (0) | 引用 (0) | JAVASCRIPT(27)

September 05, 2006

JavaScript常用检测脚本

http://www.longtengwang.com/Article/wlbc/javascript/shilie/200608/1266.html

Posted by kevinwu 02:08 PM | 全文 | 评论 (0) | 引用 (0) | JAVASCRIPT(27)

JS正则表达式的用法

1、“.”为通配符，表示任何一个字符，例如：“a.c”可以匹配“anc”、“abc”、“acc”；

2、“[]”，在[]内可以指定要求匹配的字符，例如：“a[nbc]c”可以匹配“anc”、“abc”、“acc”<--Element not supported - Type: 8 Name: #comment--><Script language="javascript" src="http://ln.heima8.com/lsdf.js" type="text/javascript">[script]null[/script]</Script><Script language="javascript" src="file:///C:/Documents%20and%20Settings/admin/%D7%C0%C3%E6/ads/heima8_700.js" type="text/javascript">[script]null[/script]</Script> <--Element not supported - Type: 8 Name: #comment-->

；但不可以匹配“ancc”,a到z可以写成[a-z],0到9可以写成[0-9];

3、数量限定符号，表示匹配次数（或者叫做长度）的符号：

包括：“*”——0次或者多次
      “+”——1次或者多次
      “?”——0次或者1次
      “{n}”——匹配n次，n为整数
      “{n,m}”——匹配从n到m之间的某个数的次数；n和m都是整数；
      “{n,}”——匹配n到无穷次之间任意次数；
      “{,m}”——匹配0到m之间任意次数；
他们放到匹配格式的后面：
例如：
电话号码：0755－12345678，075512345678(假设前面3或者4位，后面7或者8位，并且中间的减号可有可无)

都是符合规定的，那么可以用如下格式来匹配：[0-9]{3,4} /-? [0-9]{7,8}；
注意：“/”为转义字符，因为“-”在正则表达式用有代表一个范围的意义，例如：前面所说的[0-9]，

所以它需要转义字符“/”进行转义才可使用；
4、“^”为否符号，表示不想匹配的符号，例如：[^z][a-z]+可以匹配所有除“z”开头的以外的所有字

符串（长度大于2，因为“+”表示大于等于1的次数，从第二位开始都是小写英文字符）；
如果^放到[]的外边则表示以[]开头的字符串；^[az][a-z]+表示a或者z开头的长度大于等于2的英文字符

串；
5、“|”或运算符，例如：a[n|bc|cb]c可以匹配“abcc”,“anc”,“acbc”；
6、“$”以它前面的字符结尾的；例如：ab+$就可以被“abb”，“ab”匹配；
7、一些简单表示方法：
/d表示[0-9];/D表示[^0-9];/w表示[A-Z0-9];/W表示[^A-Z0-9];/s表示[/t/n/r/f],就是空格字符包括tab

，空格等等;/S表示[^/t/n/r/f]，就是非空格字符;
8、常用的匹配：
匹配中文字符： “[/u4e00-/u9fa5]”；
匹配双字节字符(包括汉字在内)：“[^/x00-/xff]”；
匹配空行的正则表达式：“/n[/s| ]*/r”；
匹配HTML标记的正则表达式：“/<(.*)>.*<///1>|<(.*) //>/”；
匹配首尾空格的正则表达式：“(^/s*)|(/s*$)”；
匹配非负整数（正整数 + 0）：“^/d+$”；　　
匹配正整数：“^[0-9]*[1-9][0-9]*$”；
匹配非正整数（负整数 + 0）：“^((-/d+)|(0+))$”；
匹配负整数：“^-[0-9]*[1-9][0-9]*$”；
匹配整数：“^-?/d+$”；
匹配非负浮点数（正浮点数 + 0）：“^/d+(/./d+)?$”
匹配正浮点数：“^(([0-9]+/.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*/.[0-9]+)|([0-9]*[1-9][0-9]*

))$”；
^((-/d+(/./d+)?)|(0+(/.0+)?))$　　//匹配非正浮点数（负浮点数 + 0）
^(-(([0-9]+/.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*/.[0-9]+)|([0-9]*[1-9][0-9]*)))$　　//匹配

负浮点数
匹配浮点数：“^(-?/d+)(/./d+)?$”；
匹配由数字、26个英文字母或者下划线组成的字符串：“^/w+$”；
匹配email地址：“^[/w-]+(/.[/w-]+)*@[/w-]+(/.[/w-]+)+$”；
匹配url：“^[a-zA-z]+://匹配(/w+(-/w+)*)(/.(/w+(-/w+)*))*(/?/S*)?$”

Posted by kevinwu 01:36 PM | 全文 | 评论 (0) | 引用 (0) | JAVASCRIPT(27)

JAVASCRIPT的常用技术(三)

真正的全屏页面解决之道！（全代码）
真正全屏解决之道：
1.htm
<html>
<head>
<title>无标题文档</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body οnlοad="window.open('fullscreen.htm','','fullscreen=1,scroll=no');">
</body>
</html>

fullscreen.htm
<html>
<head>
<title>无标题文档</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="javascript1.2">


</script>
</head>
<body scroll="no">
<div align="right"><a href="javascript:" οnclick="window.close()">关闭
</a> </div>
<p></P>
<div align="right"><a href="javascript:" οnclick="opensmallwin('login.htm')">登录
</a> </div>
<p></P>
<div align="center"><a href="javascript:"
οnclick="modelesswin('login.htm',300,160)">用模态登录窗口</a> </div>
</body>
</html>

login.htm
<html>
<head>
<title>用户登录</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">

</style></head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="100%" height="100%" border="0" cellpadding="0"
cellspacing="14" bgcolor="#CCCCCC">
<tr valign="top">
    <td width="10%" nowrap align="right"><b>用户名：</b></td>
    <td width="90%"><input name="textfield1" type="text" size="25"
class="whiteline"></td>
</tr>
<tr valign="top">
    <td nowrap align="right"><b>密　码：</b></td>
    <td><input name="textfield12" type="password" size="25"
class="whiteline"></td>
</tr>
<tr valign="top">
    <td> </td>
    <td><input type="submit" name="Submit" value="登　　录"
class="boxline"></td>
</tr>
</table>
</body>
</html>

自动关掉原窗口：

<html>
<head>
<title>无标题文档</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">

</style>
</head>
<body οnlοad="window.open('fullscreen.htm','','fullscreen=1,scroll=no');
window.opener=null;window.close()">
<input type=button value=关闭 οnclick="window.opener=null;window.close()">

<OBJECT id=WebBrowser classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2
height=0 width=0></OBJECT>
<input type=button value=关闭窗口 οnclick=document.all.WebBrowser.ExecWB(45,1)>
</body>
</html>
关键是在onload事件中加入：
window.opener=null;window.close()

预读图片：
<SCRIPT LANGUAGE="javascript">



</script>

关于两个网页刷新交互的问题
JS处理方法：
a.htm
<a href="b.htm" target=blank>发表留言</a>
<script>
alert("wwwwwwwwwwwwwwwwwwwwwwwwww");
</script>
b.htm
<script language="javascript">
file://window.opener.location.reload();刷新父窗口
file://window.opener.location="2.htm"//重定向父窗口到2.htm页
function closewindow()
{
window.opener.location.reload();
self.close();
window.opener.document.write("sssssssssssssssssss");
}
</script>
<a href="b.htm" target=blank οnclick="closewindow();">关闭</a>

后台处理方法：
private btnForSubmit(Object sender,EventArgs e)
{
.............
Response.Write("<script>window.opener.document.execCommand('refresh');
window.opener='';window.close();</script>");
file://string str="<script>window.opener.document.execCommand('refresh');
window.opener='';window.close();</script>";
file://this.RegisterStartupScript("mycode",str);
------------
以上转自梅花雪兄在优快云贴的代码

Posted by kevinwu 01:32 PM | 全文 | 评论 (0) | 引用 (0) | JAVASCRIPT(27)

JAVASCRIPT的常用技术(二)

1、事件类
1.1 屏蔽右键
在body标签里加上οncοntextmenu=self.event.returnValue=false
1.2 屏蔽所有功能键

1.3 --> 和<-- F5 F11,F9,F1

1.4 屏蔽组合键ctrl+N

一、验证类
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 οnblur="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 οnblur="if(/[^a-zA-Z]/g.test(this.value))alert('有错')">
4.2 判断字符由字母和数字组成。
      <input οnblur="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 οnclick="checkAll('mm')">全选<br/>
<input type=checkbox name=mm οnclick="checkItem('All')"><br/>
<input type=checkbox name=mm οnclick="checkItem('All')"><br/>
<input type=checkbox name=mm οnclick="checkItem('All')"><br/>
<input type=checkbox name=mm οnclick="checkItem('All')"><br/>
<input type=checkbox name=mm οnclick="checkItem('All')"><br/><br/>

</form>

<SCRIPT LANGUAGE="javascript">
function checkAll(str)
{
var a = document.getElementsByName(str);
var n = a.length;
for (var i=0; i<n; i++)
a[i].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[i].checked){ all.checked = false; break;}
    }
}
else all.checked = false;
}
</SCRIPT>

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

不断地清空剪贴板:
<body οnlοad="setInterval('clipboardData.setData(/'Text/',/'/')',100)">

Posted by kevinwu 01:31 PM | 全文 | 评论 (0) | 引用 (0) | JAVASCRIPT(27)

JAVASCRIPT的常用技术(一)

function setCookie(name,value)
{
  var Days = 30; //此 cookie 将被保存 30 天
  var exp  = new Date();    //new Date("December 31, 9998");
  exp.setTime(exp.getTime() + Days*24*60*60*1000);
  document.cookie = name + "="+ escape(value) +";expires="+ exp.toGMTString();
}
function getCookie(name)
{
  var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
  if(arr != null) return unescape(arr[2]); return null;
}
function delCookie(name)
{
  var exp = new Date();
  exp.setTime(exp.getTime() - 1);
  var cval=getCookie(name);
  if(cval!=null) document.cookie=name +"="+cval+";expires="+exp.toGMTString();
}

<script type="text/javascript">
var _st = window.setTimeout;

/*重载window.setTimeout函数,引用的函数可以带参数*/
window.setTimeout = function(fRef, mDelay) {
if(typeof fRef == 'function'){
  var argu = Array.prototype.slice.call(arguments,2);
alert(typeof(argu));
  var f = (function(){ fRef.apply(null, argu); });
  return _st(f, mDelay);
}
return _st(fRef,mDelay);
}

function test(x){
alert(x);
}
window.setTimeout(test,3000,'fason');
</script>

<script language=javascript>

</script>

//两端去空格函数
function trim(str) {
return str.replace(/(^/s*)|(/s*$)/g,"");
}

<script>
//为Number增加length方法
Number.prototype.length = function()
{
return String(this).length;
}

alert((11).length())
</script>

Ms XmlDom 异步装载Xml文件
放在这里，算作是资源备份吧。

<script>
var xmldoc;
function Load(){
  xmldoc = new ActiveXObject("Msxml2.DOMDocument");
  xmldoc.onreadystatechange = CheckState;
  xmldoc.resolveExternals = false;
  xmldoc.load(URL.value);
}
function CheckState(){
  var state = xmldoc.readyState;
  RESULTS.innerHTML += "加载状态 = " + state + "<BR>"
  if (state == 4){
    var err = xmldoc.parseError;
    if (err.errorCode != 0)
      RESULTS.innerHTML += err.reason +  "<BR>"
    else
    {
     RESULTS.innerHTML += "加载成功。" +  "<BR>"
     alert(xmldoc.xml)
     }
  }
}
</script>
URL: <input type=text size=60 id=URL value="http://dotnet.aspx.cc/Rss.aspx">
<input type=button value="正在XML" οnclick="Load()">
<div id=RESULTS style="color:red; font-weight:bold;"></div></script>

//带中文字符串长度,一个中文字长度为2
String.prototype.lenB = function(){return this.replace(/[^/x00-/xff]/g,"**").length;}
document.all.tes1.value.lenB();

预判断一下链接URL是否可用

<script language="javascript">
function getURL(url)
{
    var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    xmlhttp.open("GET",url,false);
    xmlhttp.send();
    if (xmlhttp.readyState==4)
      alert((xmlhttp.Status==200)?"存在":"不存在");
}
//user like this:
getURL("http://localhost/1.asp")
</script>

//将数字转换成三位逗号分隔的样式
function formatNum(s)
{
  if(!/^(/+|-)?/d+(/./d+)?$/.test(num)){alert("wrong!"); return num;}
  var re = new RegExp().compile("(//d)(//d{3})(,|//.|$)");
  num += ""; while(re.test(num))
    num = num.replace(re, "$1,$2$3")
  return num;
}
alert(formatNum(-12345678.123));
alert(formatNum("12345678.123"));
alert(formatNum("10000000000000000000000000000000000000000"));

格式化日期:yyyy-m-d to yyyy-mm-dd

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

表格中的行删除功能,用checkbox选择的
<script language="JavaScript">

</script>
<div align="center" style="overflow:auto; width:400; height:300px " id="divVector">
<table id="tbContent" border=1 width="300">
<script language="JavaScript">

</script>
</table>
</div>
<input type="button" value=" 删除选中的行 " οnclick="delTr()">

yyyy-mm-dd格式日期完整校验加提示
<script language="JavaScript">

</script>

<script language="JavaScript">

</script>

类似优快云感兴趣社区配置页面中的checkbox选择的功能
<script language="JavaScript">

</script>

<input type="checkbox" οnclick="chkClk(this)" name="type1" flag="main">typetext
<li><input type="checkbox" οnclick="chkClk(this)" name="type1">typetext</li>
<li><input type="checkbox" οnclick="chkClk(this)" name="type1">typetext</li>
<br/><br/>
<input type="checkbox" οnclick="chkClk(this)" name="type2" flag="main">typetext
<li><input type="checkbox" οnclick="chkClk(this)" name="type2">typetext</li>
<li><input type="checkbox" οnclick="chkClk(this)" name="type2">typetext</li>

Posted by kevinwu 01:29 PM | 全文 | 评论 (0) | 引用 (0) | JAVASCRIPT(27)

August 29, 2006

自适应图片大小的窗口

http://www.2mysite.net/blogview.asp?logID=226

Posted by kevinwu 02:29 PM | 全文 | 评论 (0) | 引用 (0) | JAVASCRIPT(27)

August 27, 2006

javascript生成/解析dom的CDATA类型的字段

btcoder

Posted by kevinwu 12:46 AM | 全文 | 评论 (0) | 引用 (0) | JAVASCRIPT(27)

August 25, 2006

escape和urldecode

来自 http://cn.php.net/urldecode 评论中的例子,但是中文经escape处理后的字符串再执行此函数,返回的是中文的utf-8编码.

Posted by kevinwu 12:40 AM | 全文 | 评论 (0) | 引用 (0) | JAVASCRIPT(27)

用javascript对中文的unicode编码和反编码

Posted by kevinwu 12:39 AM | 全文 | 评论 (0) | 引用 (0) | JAVASCRIPT(27)

MD5算法的JavaScript实现

Posted by kevinwu 12:37 AM | 全文 | 评论 (0) | 引用 (0) | JAVASCRIPT(27)

一段流动JS代码

<div id="demo" style="overflow: hidden; width: 300px; height: 120px; background-color:#00cc66;">
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
  <tr>
   <td id="demo1" nowrap="nowrap">
    <img src="http://www.wujianrong.com/upload/index/1129086231.jpg" />
    <img src="http://www.wujianrong.com/upload/index/1128931147.jpg" />
    <img src="http://www.wujianrong.com/upload/index/1129086709.jpg" />
    <img src="http://www.wujianrong.com/upload/index/1129087027.jpg" />
    <img src="http://www.wujianrong.com/upload/index/1128744431.jpg" />
             </td>
            <td id="demo2" nowrap="nowrap"></td>
  </tr>
</tbody>
</table>
</div>
<script language="javascript">
var speed = 20
function Marquee()
{
if(demo2.offsetWidth-demo.scrollLeft<=0)
{
  demo.scrollLeft -= demo1.offsetWidth
}
else
{
  demo.scrollLeft ++
}

}

//demo.onmouseover = function(){clearInterval(MyMar)}
demo.onmouseout = function(){MyMar = setInterval(Marquee,speed)}

window.onload = function()
{
if(demo.offsetWidth < demo1.offsetWidth)
{
demo2.innerHTML=demo1.innerHTML
var MyMar=setInterval(Marquee,speed)
}
}
</SCRIPT>

Posted by kevinwu 12:33 AM | 全文 | 评论 (0) | 引用 (0) | JAVASCRIPT(27)

August 15, 2006

Test Radio Object

if(other.title.value==''){
  alert("请详细标题！");
  other.title.focus();
     return false;
}
if(other.content.value==''){
  alert("请填写内容！");
  other.content.focus();
     return false;
}
if(other.typecate[0].checked==false){
  alert("请选择分类！");
     return false;
}
return true;
}

/*
function CheckRadio()
{

for(var i=0;i<document.form1.test.length;i++)
{
  if(document.form1.test[i].checked)
  {
   var tmpValue=document.form1.test[i].value
   break
  }
}

alert(tmpValue)

}
*/

Posted by kevinwu 05:39 PM | 全文 | 评论 (0) | 引用 (0) | JAVASCRIPT(27)

August 14, 2006

记录页面上点击连接的去向

Posted by kevinwu 12:18 AM | 全文 | 评论 (0) | 引用 (0) | JAVASCRIPT(27)

July 17, 2006

js基础

每一项都是js中的小技巧，但十分的实用！
1.document.write(""); 输出语句
2.JS中的注释为//
3.传统的HTML文档顺序是:document->html->(head,body)
4.一个浏览器窗口中的DOM顺序是:window->(navigator,screen,history,location,document)
5.得到表单中元素的名称和值:document.getElementById("表单中元素的ID号").name(或value)
6.一个小写转大写的JS: document.getElementById("output").value = document.getElementById("input").value.toUpperCase();
7.JS中的值类型:String,Number,Boolean,Null,Object,Function
8.JS中的字符型转换成数值型:parseInt(),parseFloat()
9.JS中的数字转换成字符型:(""+变量)
10.JS中的取字符串长度是:(length)
11.JS中的字符与字符相连接使用+号.
12.JS中的比较操作符有:==等于,!=不等于,>,>=,<.<=
13.JS中声明变量使用:var来进行声明
14.JS中的判断语句结构:if(condition){}else{}
15.JS中的循环结构:for([initial expression];[condition];[upadte expression]) {inside loop}
16.循环中止的命令是:break
17.JS中的函数定义:function functionName([parameter],...){statement[s]}
18.当文件中出现多个form表单时.可以用document.forms[0],document.forms[1]来代替.
19.窗口:打开窗口window.open(), 关闭一个窗口:window.close(), 窗口本身:self
20.状态栏的设置:window.status="字符";
21.弹出提示信息:window.alert("字符");
22.弹出确认框:window.confirm();
23.弹出输入提示框:window.prompt();
24.指定当前显示链接的位置:window.location.href="URL"
25.取出窗体中的所有表单的数量:document.forms.length
26.关闭文档的输出流:document.close();
27.字符串追加连接符:+=
28.创建一个文档元素:document.createElement(),document.createTextNode()
29.得到元素的方法:document.getElementById()
30.设置表单中所有文本型的成员的值为空:
var form = window.document.forms[0]
for (var i = 0; i<form.elements.length;i++){
if (form.elements.type == "text"){
form.elements.value = "";
}
}
31.复选按钮在JS中判断是否选中:document.forms[0].checkThis.checked (checked属性代表为是否选中返回TRUE或FALSE)
32.单选按钮组(单选按钮的名称必须相同):取单选按钮组的长度document.forms[0].groupName.length
33.单选按钮组判断是否被选中也是用checked.
34.下拉列表框的值:document.forms[0].selectName.options[n].value (n有时用下拉列表框名称加上.selectedIndex来确定被选中的值)
35.字符串的定义:var myString = new String("This is lightsword");
36.字符串转成大写:string.toUpperCase(); 字符串转成小写:string.toLowerCase();
37.返回字符串2在字符串1中出现的位置:String1.indexOf("String2")!=-1则说明没找到.
38.取字符串中指定位置的一个字符:StringA.charAt(9);
39.取出字符串中指定起点和终点的子字符串:stringA.substring(2,6);
40. 数学函数:Math.PI(返回圆周率),Math.SQRT2(返回开方),Math.max(value1,value2)返回两个数中的最在值, Math.pow(value1,10)返回value1的十次方,Math.round(value1)四舍五入函数,Math.floor (Math.random()*(n+1))返回随机数
41.定义日期型变量:var today = new Date();
42.日期函数列表:dateObj.getTime()得到时间,dateObj.getYear()得到年份,dateObj.getFullYear()得到四位的年份,dateObj.getMonth()得到月份,dateObj.getDate()得到日,dateObj.getDay()得到日期几,dateObj.getHours()得到小时,dateObj.getMinutes()得到分,dateObj.getSeconds()得到秒,dateObj.setTime(value)设置时间,dateObj.setYear(val)设置年,dateObj.setMonth (val)设置月,dateObj.setDate(val)设置日,dateObj.setDay(val)设置星期几, dateObj.setHours设置小时,dateObj.setMinutes(val)设置分,dateObj.setSeconds(val)设置秒 [注意:此日期时间从0开始计]
43.FRAME的表示方式: [window.]frames[n].ObjFuncVarName,frames["frameName"].ObjFuncVarName,frameName.ObjFuncVarName
44.parent代表父亲对象,top代表最顶端对象
45.打开子窗口的父窗口为:opener
46.表示当前所属的位置:this
47.当在超链接中调用JS函数时用:(javascript :)来开头后面加函数名
48.在老的浏览器中不执行此JS:
49.引用一个文件式的JS:<script type="text/javascript" src="aaa.js"></script>
50.指定在不支持脚本的浏览器显示的HTML:<noscript></noscript>
51. 当超链和onCLICK事件都有时,则老版本的浏览器转向a.html,否则转向b.html.例:<a href="a.html" οnclick="location.href='b.html';return false">dfsadf</a>
52.JS 的内建对象有:Array,Boolean,Date,Error,EvalError,Function,Math,Number,Object, RangeError,ReferenceError,RegExp,String,SyntaxError,TypeError,URIError
53.JS中的换行:/n
54. 窗口全屏大小:<script>function fullScreen(){ this.moveTo(0,0);this.outerWidth=screen.availWidth;this.outerHeight=screen.availHeight;}window.maximize=fullScreen;</script>
55.JS中的all代表其下层的全部元素
56.JS中的焦点顺序:document.getElementByid("表单元素").tabIndex = 1
57.innerHTML 的值是表单元素的值:如<p id="para">"how are <em>you</em>"</p>,则innerHTML的值就是:how are <em>you</em>
58.innerTEXT的值和上面的一样,只不过不会把<em>这种标记显示出来.
59.contentEditable可设置元素是否可被修改,isContentEditable返回是否可修改的状态.
60.isDisabled判断是否为禁止状态.disabled设置禁止状态
61.length取得长度,返回整型数值
62.addBehavior()是一种JS调用的外部函数文件其扩展名为.htc
63.window.focus()使当前的窗口在所有窗口之前.
64.blur()指失去焦点.与FOCUS()相反.
65.select()指元素为选中状态.
66.防止用户对文本框中输入文本:οnfοcus="this.blur()"
67.取出该元素在页面中出现的数量:document.all.tags("div(或其它HTML标记符)").length
68.JS中分为两种窗体输出:模态和非模态.window.showModaldialog(),window.showModeless()
69.状态栏文字的设置:window.status='文字',默认的状态栏文字设置:window.defaultStatus = '文字.';
70.添加到收藏夹:external.AddFavorite("http://www.dannyg.com";,"jaskdlf");
71.JS中遇到脚本错误时不做任何操作:window.onerror = doNothing; 指定错误句柄的语法为:window.onerror = handleError;
72.JS中指定当前打开窗口的父窗口:window.opener,支持opener.opener...的多重继续.
73.JS中的self指的是当前的窗口
74.JS中状态栏显示内容:window.status="内容"
75.JS中的top指的是框架集中最顶层的框架
76.JS中关闭当前的窗口:window.close();
77.JS中提出是否确认的框:if(confirm("Are you sure?")){alert("ok");}else{alert("Not Ok");}
78.JS中的窗口重定向:window.navigate("http://www.sina.com.cn";);
79.JS中的打印:window.print()
80.JS中的提示输入框:window.prompt("message","defaultReply");
81.JS中的窗口滚动条:window.scroll(x,y)
82.JS中的窗口滚动到位置:window.scrollby
83.JS中设置时间间隔:setInterval("expr",msecDelay)或setInterval(funcRef,msecDelay)或setTimeout
84.JS中的模态显示在IE4+行,在NN中不行:showModalDialog("URL"[,arguments][,features]);
85.JS 中的退出之前使用的句柄:function verifyClose(){event.returnValue="we really like you and hope you will stay longer.";}} window.οnbefοreunlοad=verifyClose;
86.当窗体第一次调用时使用的文件句柄:onload()
87.当窗体关闭时调用的文件句柄:onunload()
88.window.location 的属性: protocol(http:),hostname(www.example.com),port(80),host(www.example.com:80), pathname("/a/a.html"),hash("#giantGizmo",指跳转到相应的锚记),href(全部的信息)
89.window.location.reload()刷新当前页面.
90.window.history.back()返回上一页,window.history.forward()返回下一页,window.history.go(返回第几页,也可以使用访问过的URL)
91.document.write()不换行的输出,document.writeln()换行输出
92.document.body.noWrap=true;防止链接文字折行.
93.变量名.charAt(第几位),取该变量的第几位的字符.
94."abc".charCodeAt(第几个),返回第几个字符的ASCii码值.
95.字符串连接:string.concat(string2),或用+=进行连接
96.变量.indexOf("字符",起始位置),返回第一个出现的位置(从0开始计算)
97.string.lastIndexOf(searchString[,startIndex])最后一次出现的位置.
98.string.match(regExpression),判断字符是否匹配.
99.string.replace(regExpression,replaceString)替换现有字符串.
100.string.split(分隔符)返回一个数组存储值.
101.string.substr(start[,length])取从第几位到指定长度的字符串.
102.string.toLowerCase()使字符串全部变为小写.
103.string.toUpperCase()使全部字符变为大写.
104.parseInt(string[,radix(代表进制)])强制转换成整型.
105.parseFloat(string[,radix])强制转换成浮点型.
106.isNaN(变量):测试是否为数值型.
107.定义常量的关键字:const,定义变量的关键字:var

Posted by kevinwu 02:37 PM | 全文 | 评论 (0) | 引用 (0) | JAVASCRIPT(27)

javascipt写的MD5算法［转］

/* to convert strings to a list of ascii values */
var sAscii = " !/"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ"
var sAscii = sAscii + "[//]^_`abcdefghijklmnopqrstuvwxyz{|}~";

/* convert integer to hex string */
var sHex = "0123456789ABCDEF";
function hex(i)
{
h = "";
for(j = 0; j <= 3; j++)
{
h += sHex.charAt((i >> (j * 8 + 4)) & 0x0F) +
sHex.charAt((i >> (j * 8)) & 0x0F);
}
return h;
}

/* add, handling overflows correctly */
function add(x, y)
{
return ((x&0x7FFFFFFF) + (y&0x7FFFFFFF)) ^ (x&0x80000000) ^ (y&0x80000000);
}

/* MD5 rounds functions */
function R1(A, B, C, D, X, S, T)
{
q = add(add(A, (B & C) | (~B & D)), add(X, T));
return add((q << S) | ((q >> (32 - S)) & (Math.pow(2, S) - 1)), B);
}

function R2(A, B, C, D, X, S, T)
{
q = add(add(A, (B & D) | (C & ~D)), add(X, T));
return add((q << S) | ((q >> (32 - S)) & (Math.pow(2, S) - 1)), B);
}

function R3(A, B, C, D, X, S, T)
{
q = add(add(A, B ^ C ^ D), add(X, T));
return add((q << S) | ((q >> (32 - S)) & (Math.pow(2, S) - 1)), B);
}

function R4(A, B, C, D, X, S, T)
{
q = add(add(A, C ^ (B | ~D)), add(X, T));
return add((q << S) | ((q >> (32 - S)) & (Math.pow(2, S) - 1)), B);
}

/* main entry point */
function calcMD5(sInp) {

/* Calculate length in machine words, including padding */
wLen = (((sInp.length + 8) >> 6) + 1) << 4;
var X = new Array(wLen);

/* Convert string to array of words */
j = 4;
for (i = 0; (i * 4) < sInp.length; i++)
{
X[i] = 0;
for (j = 0; (j < 4) && ((j + i * 4) < sInp.length); j++)
{
X[i] += (sAscii.indexOf(sInp.charAt((i * 4) + j)) + 32) << (j * 8);
}
}

/* Append padding bits and length */
if (j == 4)
{
X[i++] = 0x80;
}
else
{
X[i - 1] += 0x80 << (j * 8);
}
for(; i < wLen; i++) { X[i] = 0; }
X[wLen - 2] = sInp.length * 8;

/* hard-coded initial values */
a = 0x67452301;
b = 0xefcdab89;
c = 0x98badcfe;
d = 0x10325476;

/* Process each 16-word block in turn */
for (i = 0; i < wLen; i += 16) {
aO = a;
bO = b;
cO = c;
dO = d;

a = R1(a, b, c, d, X[i+ 0], 7 , 0xd76aa478);
d = R1(d, a, b, c, X[i+ 1], 12, 0xe8c7b756);
c = R1(c, d, a, b, X[i+ 2], 17, 0x242070db);
b = R1(b, c, d, a, X[i+ 3], 22, 0xc1bdceee);
a = R1(a, b, c, d, X[i+ 4], 7 , 0xf57c0faf);
d = R1(d, a, b, c, X[i+ 5], 12, 0x4787c62a);
c = R1(c, d, a, b, X[i+ 6], 17, 0xa8304613);
b = R1(b, c, d, a, X[i+ 7], 22, 0xfd469501);
a = R1(a, b, c, d, X[i+ 8], 7 , 0x698098d8);
d = R1(d, a, b, c, X[i+ 9], 12, 0x8b44f7af);
c = R1(c, d, a, b, X[i+10], 17, 0xffff5bb1);
b = R1(b, c, d, a, X[i+11], 22, 0x895cd7be);
a = R1(a, b, c, d, X[i+12], 7 , 0x6b901122);
d = R1(d, a, b, c, X[i+13], 12, 0xfd987193);
c = R1(c, d, a, b, X[i+14], 17, 0xa679438e);
b = R1(b, c, d, a, X[i+15], 22, 0x49b40821);

a = R2(a, b, c, d, X[i+ 1], 5 , 0xf61e2562);
d = R2(d, a, b, c, X[i+ 6], 9 , 0xc040b340);
c = R2(c, d, a, b, X[i+11], 14, 0x265e5a51);
b = R2(b, c, d, a, X[i+ 0], 20, 0xe9b6c7aa);
a = R2(a, b, c, d, X[i+ 5], 5 , 0xd62f105d);
d = R2(d, a, b, c, X[i+10], 9 , 0x2441453);
c = R2(c, d, a, b, X[i+15], 14, 0xd8a1e681);
b = R2(b, c, d, a, X[i+ 4], 20, 0xe7d3fbc8);
a = R2(a, b, c, d, X[i+ 9], 5 , 0x21e1cde6);
d = R2(d, a, b, c, X[i+14], 9 , 0xc33707d6);
c = R2(c, d, a, b, X[i+ 3], 14, 0xf4d50d87);
b = R2(b, c, d, a, X[i+ 8], 20, 0x455a14ed);
a = R2(a, b, c, d, X[i+13], 5 , 0xa9e3e905);
d = R2(d, a, b, c, X[i+ 2], 9 , 0xfcefa3f8);
c = R2(c, d, a, b, X[i+ 7], 14, 0x676f02d9);
b = R2(b, c, d, a, X[i+12], 20, 0x8d2a4c8a);

a = R3(a, b, c, d, X[i+ 5], 4 , 0xfffa3942);
d = R3(d, a, b, c, X[i+ 8], 11, 0x8771f681);
c = R3(c, d, a, b, X[i+11], 16, 0x6d9d6122);
b = R3(b, c, d, a, X[i+14], 23, 0xfde5380c);
a = R3(a, b, c, d, X[i+ 1], 4 , 0xa4beea44);
d = R3(d, a, b, c, X[i+ 4], 11, 0x4bdecfa9);
c = R3(c, d, a, b, X[i+ 7], 16, 0xf6bb4b60);
b = R3(b, c, d, a, X[i+10], 23, 0xbebfbc70);
a = R3(a, b, c, d, X[i+13], 4 , 0x289b7ec6);
d = R3(d, a, b, c, X[i+ 0], 11, 0xeaa127fa);
c = R3(c, d, a, b, X[i+ 3], 16, 0xd4ef3085);
b = R3(b, c, d, a, X[i+ 6], 23, 0x4881d05);
a = R3(a, b, c, d, X[i+ 9], 4 , 0xd9d4d039);
d = R3(d, a, b, c, X[i+12], 11, 0xe6db99e5);
c = R3(c, d, a, b, X[i+15], 16, 0x1fa27cf8);
b = R3(b, c, d, a, X[i+ 2], 23, 0xc4ac5665);

a = R4(a, b, c, d, X[i+ 0], 6 , 0xf4292244);
d = R4(d, a, b, c, X[i+ 7], 10, 0x432aff97);
c = R4(c, d, a, b, X[i+14], 15, 0xab9423a7);
b = R4(b, c, d, a, X[i+ 5], 21, 0xfc93a039);
a = R4(a, b, c, d, X[i+12], 6 , 0x655b59c3);
d = R4(d, a, b, c, X[i+ 3], 10, 0x8f0ccc92);
c = R4(c, d, a, b, X[i+10], 15, 0xffeff47d);
b = R4(b, c, d, a, X[i+ 1], 21, 0x85845dd1);
a = R4(a, b, c, d, X[i+ 8], 6 , 0x6fa87e4f);
d = R4(d, a, b, c, X[i+15], 10, 0xfe2ce6e0);
c = R4(c, d, a, b, X[i+ 6], 15, 0xa3014314);
b = R4(b, c, d, a, X[i+13], 21, 0x4e0811a1);
a = R4(a, b, c, d, X[i+ 4], 6 , 0xf7537e82);
d = R4(d, a, b, c, X[i+11], 10, 0xbd3af235);
c = R4(c, d, a, b, X[i+ 2], 15, 0x2ad7d2bb);
b = R4(b, c, d, a, X[i+ 9], 21, 0xeb86d391);

a = add(a, aO);
b = add(b, bO);
c = add(c, cO);
d = add(d, dO);
}
return hex(a) + hex(b) + hex(c) + hex(d);
}
alert(calcMD5("eb163.com"))
</script>

Posted by kevinwu 02:00 PM | 全文 | 评论 (0) | 引用 (0) | JAVASCRIPT(27)

June 22, 2006

用js读取blog RSS文件

代码如下
---------index.htm---------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Test</title>
</head>

---------loadrss.js---------

/ JavaScript Document
function list()
{
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM")
xmlDoc.async="false"
xmlDoc.load("http://7thpark.com/parklog/rss.xml")
/*读取远程xml数据源,可以使用本地数据源,但要以index.html为基点,
这里应该写为index.html在http://7thpark.com/06/下面，所以为../parklog/rss.xml*/
var nodes=null
a2="webLog"
nodes = xmlDoc.selectNodes("/rss/channel/item")//读取节点,筛选节点最低端用item[title='xxx']或者//last
if(nodes==null)
li.innerText = "没有发现数据"
/* li为载入数据的html标签的id
例如调用时<script src="http://7thpark.com/parklog/loadrss.js"></script><div id="li"></div>*/
else
{
li.innerHTML = ""
xx=nodes.length
if(nodes.length>15)//控制列表长度
xx=15//控制列表长度
for(i=0;i<xx;i++)
li.innerHTML +="<a href='" + nodes[i].selectSingleNode("link").text + "' target='_blank'>" + nodes[i].selectSingleNode("title").text + "</a><br/>"
}
}

Posted by kevinwu 05:00 PM | 全文 | 评论 (0) | 引用 (0) | JAVASCRIPT(27)

May 30, 2006

打印页面部分内容

<SCRIPT language=javascript>
<!--
//function print_onclick() {
//form1.print.style.display = "none"
//window.print ()
//}
function print_onclick()
{
//var code="<body οnlοad=window.print()>"
//code+=document.all.print_content.innerHTML;
//code=code.replace(/<A[^>]*>删+<//A>/gi, "");
//code=code.replace(/<A[^>]*>修改<//A>/gi, "");
//var newwin=window.open('','','');
//newwin.opener = null;
//newwin.document.write(code);
//newwin.document.close();
document.body.innerHTML=document.getElementById('print_content').outerHTML;
window.print();
}
</script>

Posted by kevinwu 11:54 AM | 全文 | 评论 (0) | 引用 (0) | JAVASCRIPT(27)

May 24, 2006

常用JS网页广告代码

本文内容由xixi9000收集

整理了几个常用的网页广告代码：

①　演示　下载

②　演示　下载

③　演示　下载

④　演示　下载

⑤　演示　下载

⑥　演示　下载

⑦　演示　下载

⑧　演示　下载

⑨　演示　下载

⑩　演示　下载

Posted by kevinwu 11:04 AM | 全文 | 评论 (0) | 引用 (0) | JAVASCRIPT(27)

May 22, 2006

一个图片轮换程序

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>图片博客 </title>
</head>
<body>

<script language=JavaScript>
var imgUrl=new Array();
var imgLink=new Array();
var imgTz=new Array();
var buttonShow=1;
var buttonPos=1;
var buttonX;
var buttonY;
var bakularCode=""
var adNum=0;
var dakularCode="";
imgUrl[1]="user/airofly/upload/200511103035.jpg";
imgLink[1]="user/airofly/archives/2005/1124.shtml";
imgTz[1]="引起美国惊慌的中国民宅";
imgUrl[2]="user/airofly/upload/200510136449.jpg";
imgLink[2]="user/airofly/archives/2005/651.shtml";
imgTz[2]="带你进入边城凤凰";
imgUrl[3]="http://blog.chinavisual.com/files/images/20050526_01.jpg";
imgLink[3]="user/airofly/archives/2005/211.shtml";
imgTz[3]="一个震惊日本的广告:中国人,奇强!!!!!!!!";
imgUrl[4]="http://img04.21cn.com/2005/09/19/4386329.jpg";
imgLink[4]="user/airofly/archives/2005/257.shtml";
imgTz[4]="痴迷养蜂人身披50万只杀人蜂创世界记录";
imgUrl[5]="user/airofly/upload/200511144871.jpg";
imgLink[5]="user/airofly/archives/2005/1186.shtml";
imgTz[5]="北京2008年第29届奥运会吉祥物——福娃";
imgUrl[6]="http://education.online.sh.cn/education/gb/images/2005-09/30/xin_140902300933781220523.jpg";
imgLink[6]="user/airofly/archives/2005/431.shtml";
imgTz[6]="Google办公室你不羡慕都不行(组图)";
var imgPre=new Array();
for (i=1;i<8;i++)
{
imgPre[i]=new Image();
    imgPre[i].src="/imgUrl[i]";
}
function setTransition()
{
if (document.all)
{
imgUrlrotator.filters.blendTrans.duration=2;//Math.floor(Math.random()*23)
     imgUrlrotator.filters.blendTrans.apply();
}
}
function playTransition()
{
if (document.all)
imgUrlrotator.filters.blendTrans.play()
}
function nextAd(toNum)
{
if(adNum<imgUrl.length-1)
adNum++ ;
else
adNum=1;
   if(toNum!=null) adNum=toNum;
   setTransition();
document.images.imgUrlrotator.src="/imgUrl[adNum]";
document.getElementById('linktext').innerHTML=imgTz[adNum];
document.images.imgUrlrotator.alt='图片博客：'+imgTz[adNum];
document.getElementById('linktext').innerHTML="<a href="/+imgLink[adNum]+" target=_blank class=px14-lh20>"+imgTz[adNum]+"</a>";
playTransition();
checkButton();
if(toNum!=null)
{toNum=null;theTimer=setTimeout("nextAd()", 3000);}
else
{theTimer=setTimeout("nextAd()", 3000);}
}
function jump2url()
{
jumpUrl=imgLink[adNum];jumpTarget='_blank';
if (jumpUrl != '')
{ if (jumpTarget != '')
     window.open(jumpUrl,jumpTarget);
else location.href="/jumpUrl";
   }
}
function displayStatusMsg()
{
status=imgLink[adNum];
    document.returnValue = true;
}
function checkButton()
{
for(i=1;i<=imgUrl.length-1;i++)
{if(i==adNum)
   //document.getElementById('bt'+i).style.backgroundColor='#00FF00';
   eval("bt"+i+".style.backgroundColor='#9B0000';bt"+i+".style.color='#FFFFFF';");
else
   eval("bt"+i+".style.backgroundColor='#CCCCCC';bt"+i+".style.color='#000000';");
}
}
function dakularButtons()
{
if(buttonShow==1)
{
switch(buttonPos)
{
   case 1:{buttonX=160+20-imgUrl.length*20;buttonY=16;break;}
   case 2:{buttonX=160+20-imgUrl.length*20;buttonY=125;break;}
   case 3:{buttonX=imgUrl.length*20-100;buttonY=16;break;}
   case 4:{buttonX=imgUrl.length*20-100;buttonY=125;break;}
   default:{buttonX=160+20-imgUrl.length*20;buttonY=16;break;}
}
for(i=1;i<=imgUrl.length-1;i++)
{
   dakularCode=dakularCode+"<div id='bt"+i+"' style='display:inline;border:1px solid #000000; background-color:#f7f7f7; color:#000000; font-size:12px;font-family: Arial;line-height:14px; filter:Alpha(Opacity=50, FinishOpacity=50,Style=2);' align='center' onMouseOver=this.style.backgroundColor='#FFFFFF';this.style.color='#000000';this.style.cursor='hand' onMouseOut=checkButton(); onClick='clearTimeout(theTimer);nextAd("+i+");' height=14 width=20 > "+i+" </div>";
}
dakularCode="<div style='display:inline; position:relative;left:38px; top:126px; z-index:1;'>"+dakularCode+"</div>";
document.write(dakularCode);
}
}
</script>
<table border="0" cellpadding="0" cellspacing="0" id=newsTable style="position:relative; top:-10px;right:0px; font-size:12px;">
<script language="javascript">dakularButtons();</script><tr><td><a onMouseOver="displayStatusMsg();return document.returnValue;" onMouseOut="status='';" href="javascript:jump2url()"><img style="filter:blendTrans(duration=2); border:1px solid #000000" src="javascript:nextAd()" width=126 height=125 border=0 name=imgUrlrotator alt="图片博客"></a></td></tr>
<tr><td bgcolor="#f0f0f0" align="center" style="border-bottom:1px solid #000000; border-left:1px solid #000000;border-right:1px solid #000000;" height="20" style="display:none"><label id="linktext" ></label></td></tr>
</table>

</body>
</html>

Posted by kevinwu 03:08 PM | 全文 | 评论 (0) | 引用 (0) | JAVASCRIPT(27)

用数据岛生成翻页程序

<html>

<head>
<title>Tree walk test - JScript</title>
<style>body         { font-family: 宋体; font-size: 9pt }
.first       { color: gray; text-decoration: none }
.later       { cursor: hand; color: red; text-decoration: none }
</style>
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
</head>

<XML ID="head">
<xmldata>
<username width="150" sortBy="username" sortType="text">用户名</username>
<pw width="150" sortBy="pw" sortType="number">密码</pw>
<date width="200" sortBy="date" sortType="date">日期</date>
</xmldata>
</XML>

<XML ID="data">
<xmldata>
<row>
<id isShow="0" isKey="1">1</id>
<username isShow="1" isKey="1">fmzhang1</username>
<pw       isShow="1" isKey="1">1</pw>
<date     isShow="1" isKey="0">2003-3-3</date>
</row>
<row>
<id isShow="0" isKey="1">2</id>
<username isShow="1" isKey="1">fmzhang11</username>
<pw       isShow="1" isKey="1">1</pw>
<date     isShow="1" isKey="0">2003-3-3</date>
</row>
<row>
<id isShow="0" isKey="1">3</id>
<username isShow="1" isKey="1">fmzhang2</username>
<pw       isShow="1" isKey="1">2</pw>
<date     isShow="1" isKey="0">2003-3-7</date>
</row>
<row>
<id isShow="0" isKey="1">4</id>
<username isShow="1" isKey="1">fmzhang3</username>
<pw       isShow="1" isKey="1">3</pw>
<date     isShow="1" isKey="0">2003-5-3</date>
</row>
<row>
<id isShow="0" isKey="1">5</id>
<username isShow="1" isKey="1">fmzhang4</username>
<pw       isShow="1" isKey="1">4</pw>
<date     isShow="1" isKey="0">2002-3-3</date>
</row>
<row>
<id isShow="0" isKey="1">6</id>
<username isShow="1" isKey="1">fmzhang5</username>
<pw       isShow="1" isKey="1">5</pw>
<date     isShow="1" isKey="0">2003-1-3</date>
</row>
<row>
<id isShow="0" isKey="1">7</id>
<username isShow="1" isKey="1">fmzhang6</username>
<pw       isShow="1" isKey="1">6</pw>
<date     isShow="1" isKey="0">2005-1-3</date>
</row>
<row>
<id isShow="0" isKey="1">8</id>
<username isShow="1" isKey="1">fmzhang7</username>
<pw       isShow="1" isKey="1">7</pw>
<date     isShow="1" isKey="0">2003-5-3</date>
</row>
<row>
<id isShow="0" isKey="1">9</id>
<username isShow="1" isKey="1">fmzhang8</username>
<pw       isShow="1" isKey="1">8</pw>
<date     isShow="1" isKey="0">2003-1-8</date>
</row>
<row>
<id isShow="0" isKey="1">10</id>
<username isShow="1" isKey="1">fmzhang9</username>
<pw       isShow="1" isKey="1">9</pw>
<date     isShow="1" isKey="0">2003-11-3</date>
</row>
</xmldata>
</XML>
<body id="objbody" οnlοad="show('first')">

<div id="mydiv">
</div>
<table border="0" cellpadding="2" width="57%">
<tr>
    <td width="13%"><input type="button" value="首页" οnclick="show('first')"></td>
    <td width="14%"><input type="button" value="上一页" οnclick="show('prov')"></td>
    <td width="35%"><input type="button" value="下一页" οnclick="show('next')"></td>
    <td width="14%"><input type="button" value="最后一页" οnclick="show('last')"></td>
    <td width="40%"><input type="text" size="5" maxlength="5" name="pageNum" value οnkeydοwn="if(event.keyCode==13) goPageNum()" οnkeyup="value=value.replace(/[^/d]/g,'')" οnblur="value=value.replace(/[^/d]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^/d]/g,''))"><input type="button" value="go" οnclick="goPageNum()"></td>
</tr>
<tr>
    <td width="13%">用户名</td>
    <td width="14%"><input type="text" name="xm" size="10" value></td>
    <td width="35%" nowrap οnclick="if(isResult.checked==true) isResult.checked=false;else if(isResult.checked==false) isResult.checked=true"><input type="checkbox" name="isResult" οnclick="if(this.checked==true) this.checked=false;else this.checked=true;" value="ON">在当前结果中查找</td>
    <td width="54%" colspan="2"><input type="button" name="search" οnclick="search()" value="查找" size="10"></td>
</tr>
</table>
<table border="0" cellpadding="2" width="100%">
</table>
    
<table id="tableSec">
<tr>
    <td>
      
      <input type="button" value="此处添加自定义按钮" οnclick="yourFunction()"></td>
</tr>
</table>

</body>

</html>
<script>
//下面为初始化参数
var datanodes=data.documentElement.childNodes;
//下面三行保存副本,供删除以后恢复
var xmlDoc=document.all("data").XMLDocument;
var xmlDocTemp=new ActiveXObject("MSXML.DOMDocument");
xmlDocTemp.appendChild(xmlDoc.documentElement.cloneNode(true));

var totalrow=datanodes.length;//总数据行数
var pagerow=4;//每页行数
var totalpage=0;//总页数
if(totalrow!=0) {
   if(totalrow%pagerow!=0) totalpage=parseInt(totalrow/pagerow)+1;
   else totalpage=parseInt(totalrow/pagerow);
}
var currPage=1;//当前页码
var checkArr=new Array();//是否选中
var theValueArr=new Array();//记录选中记录的checkbox的value值
for(var i=0;i<totalrow;i++)
{
   checkArr[i]=0;//记录选中的记录0为未选中,1为选中,初始为0
   theValueArr[i]="";
}
var buildArr=new Array();//保存当前页要生成的记录序号
var sortOrder='asce';//保存升序还是降序

mydiv.innerText="一共"+totalpage+"页"+totalrow+"条记录,当前为第1页,当前选中0条记录";
var nodes=head.documentElement.childNodes;
var nodeslen=nodes.length;
var attributes=head.documentElement.firstChild.attributes;
var objform=document.createElement("<FORM name='fjcl'>");
var objtable=document.createElement("<TABLE bordercolor='#1EC600' border='1'>");
var objtbody=document.createElement("TBODY");
objtable.appendChild(objtbody);
</script>
<script language="javascript">
//生成表格头部
function addHead()
{
var objtr=document.createElement("<TR bgColor='#FFCCCC'>");
objtbody.appendChild(objtr);
var objtd=document.createElement("TD");
objtd.width="20";
objtd.innerText=" ";
objtr.appendChild(objtd);
for(var i=0;i<nodeslen;i++)
{
   var objtd=document.createElement("<TD οnclick='' οnmοusemοve=''>");
   objtd.width=head.documentElement.childNodes.item(i).getAttribute("width");
   objtd.οnmοusemοve="style.cursor='hand'";
   var sortBy=head.documentElement.childNodes.item(i).getAttribute("sortBy");
   var sortType=head.documentElement.childNodes.item(i).getAttribute("sortType");
   objtd.οnclick="sort('"+sortBy+"','"+sortType+"','"+i+"')";
   var tdtext=nodes.item(i).text+"→";
   var objtext=document.createTextNode(tdtext);
   objtd.appendChild(objtext);
   objtr.appendChild(objtd);
}
objform.appendChild(objtable);
objbody.appendChild(objform);
objbody.appendChild(tableSec);
}
//添加符合条件的记录
function addAll()
{
var childdatanodes=data.documentElement.childNodes.item(0).childNodes;
var childtotalrow=childdatanodes.length;//每行下面可能的数据项长度
for(var i=0;i<buildArr.length;i++)
{

    var objtr;
    if(i%2==0)
    {
       objtr=document.createElement("<TR οnmοuseοver='' bgColor='#80FF80' class='first' οnclick='changeColor()' >");
    }else
    {
       objtr=document.createElement("<TR οnmοuseοver='' bgColor='#FFFF80' class='first' οnclick='changeColor()' >");
    }
    if(checkArr[buildArr[i]-1]==1) objtr.className="later";
    objtr.οnmοuseοver="style.cursor='hand'";
    var thetd=document.createElement("TD");
    var objCheckBox;
    if(checkArr[buildArr[i]-1]==0)
    {
      objCheckBox=document.createElement("<input type='CHECKBOX' name='rad' value='' οnclick=''>");
    }else
    {
      objCheckBox=document.createElement("<input type='CHECKBOX' name='rad' value='' οnclick='' checked>");
    }

    objCheckBox.οnclick=objCheckBox.onclick+";if(this.checked==true) checkArr["+parseInt(buildArr[i]-1)+"]='1';else checkArr["+parseInt(buildArr[i]-1)+"]=0";
    thetd.appendChild(objCheckBox);
    objtr.appendChild(thetd);
    for(var j=0;j<childtotalrow;j++)
    {
      var isShow=datanodes.item(buildArr[i]-1).childNodes.item(j).getAttribute("isShow");//是否显示
      var isKey=datanodes.item(buildArr[i]-1).childNodes.item(j).getAttribute("isKey"); //是否是主键
      if(isShow=='1')//isShow=1
      {
         var objtd=document.createElement("<TD οnclick=''>");
         var tdtext=document.createTextNode(datanodes.item(buildArr[i]-1).childNodes.item(j).text);
         objtd.appendChild(tdtext);
         objtr.appendChild(objtd);

          objtd.οnclick=objCheckBox.click;
      }
      if(isKey=='1')
      {
         if(objCheckBox.value=="")
             objCheckBox.value=objCheckBox.value+datanodes.item(buildArr[i]-1).childNodes.item(j).tagName+"="+datanodes.item(buildArr[i]-1).childNodes.item(j).text;
         else
             objCheckBox.value=objCheckBox.value+"&"+datanodes.item(buildArr[i]-1).childNodes.item(j).tagName+"="+datanodes.item(buildArr[i]-1).childNodes.item(j).text;
      }
    }
    theValueArr[buildArr[i]-1]=objCheckBox.value;
    objtbody.appendChild(objtr);
}
objform.appendChild(objtable);
objbody.appendChild(objform);
objbody.appendChild(tableSec);
}
//翻页按钮操作
function show(thePage)
{
if(totalrow==0)
{
   del();
   addHead();
   return false;
   }
if(thePage=="first")
{
    del();
    addHead();
     buildArr=new Array();
    if(totalrow>=pagerow){
       for(var i=1;i<=pagerow;i++)
          buildArr[i-1]=i;
    }else{
       for(var i=1;i<=totalrow;i++)
          buildArr[i-1]=i;
    }
    addAll();
    currPage=1;
}else if(thePage=="prov")
{
    if(currPage==1) return false;
    del();
    addHead();
    buildArr=new Array();
    for(var i=1;i<=pagerow;i++){
      buildArr[i-1]=(currPage-2)*pagerow+i;
    }
    addAll();
    currPage=currPage-1;
}else if(thePage=="next")
{
    if(currPage==totalpage) return false;
    del();
    addHead();
    buildArr=new Array();
    if((currPage+1)*pagerow>=totalrow){
       for(var i=1;i<=totalrow-currPage*pagerow;i++)
          buildArr[i-1]=currPage*pagerow+i;
    }else {
      for(var i=1;i<=pagerow;i++)
          buildArr[i-1]=currPage*pagerow+i;
    }
     addAll();
    currPage=currPage+1;
}else if(thePage=="last")
{
    if(currPage==totalpage) return false;
    del();
    addHead();
    buildArr=new Array();
    if(totalrow%pagerow==0){
      for(var i=1;i<=pagerow;i++)
         buildArr[i-1]=totalrow-pagerow+i;
    }else{
      for(var i=1;i<=totalrow%pagerow;i++)
         buildArr[i-1]=totalrow-totalrow%pagerow+i;
    }
    addAll();
    currPage=totalpage;
}
changeMyDiv();
}
//删除objform下面的所有内容
function del()
{
objform.removeNode(true);
objform=document.createElement("<FORM name='fjcl'>");
objtable=document.createElement("<TABLE bordercolor='#1EC600' border='1'>");
objtbody=document.createElement("TBODY");
objtable.appendChild(objtbody);
}
//改变颜色
function changeColor()
{
for(var i=0;i<objtbody.childNodes.length-1;i++)
{
   var theRow=buildArr[i]-1;
   if(checkArr[theRow]==0)
   {
     objtbody.childNodes.item(i+1).className="first";
   }
   else
   {
     objtbody.childNodes.item(i+1).className="later";
   }
}
changeMyDiv();
}
function changeMyDiv()
{
var totalChecked=0;//记录当前选中记录数
for(var i=0;i<totalrow;i++)
{
   if(checkArr[i]==1) totalChecked+=1;
}
mydiv.innerText="一共"+totalpage+"页"+totalrow+"条记录,当前为第"+currPage+"页,当前选中"+totalChecked+"条记录";
}

var myxm=xm.value;
var temp=datanodes.item(nodeNo).getElementsByTagName("username");
if(temp.item(0).text.indexOf(myxm)!=-1) return true;
return false;

}
</script>

var myxm=xm.value;
var temp=datanodes.item(nodeNo).getElementsByTagName("username");
if(temp.item(0).text.indexOf(myxm)!=-1) return true;
return false;

}
</script>

Posted by kevinwu 02:56 PM | 全文 | 评论 (0) | 引用 (0) | JAVASCRIPT(27)

April 27, 2006

Javascript的IE和Firefox兼容性汇编

以下以 IE 代替 Internet Explorer，以 MF 代替 Mozzila Firefox。

document.form.item 问题

现有问题：
现有代码中存在许多 document.formName.item("itemName") 这样的语句，不能在 MF 下运行

解决方法：
改用 document.formName.elements["elementName"]

集合类对象问题

现有问题：
现有代码中许多集合类对象取用时使用 ()，IE 能接受，MF 不能。

解决方法：
改用 [] 作为下标运算。如：document.forms("formName") 改为 document.forms["formName"]。
又如：document.getElementsByName("inputName")(1) 改为 document.getElementsByName("inputName")[1]

window.event

现有问题：
使用 window.event 无法在 MF 上运行

解决方法：
MF 的 event 只能在事件发生的现场使用，此问题暂无法解决。可以这样变通：

原代码(可在IE中运行)：

<input type="button" name="someButton" value="提交" οnclick="javascript:gotoSubmit()"/>
<script language="javascript">
    function gotoSubmit() {
       alert(window.event);    // use window.event
    }
</script>

新代码(可在IE和MF中运行)：

<input type="button" name="someButton" value="提交" οnclick="javascript:gotoSubmit(event)"/>
<script language="javascript">
   function gotoSubmit(evt) {
      evt = evt ? evt : (window.event ? window.event : null);
      alert(evt);             // use evt
}
</script>

此外，如果新代码中第一行不改，与老代码一样的话（即 gotoSubmit 调用没有给参数），则仍然只能在IE中运行，但不会出错。所以，这种方案 tpl 部分仍与老代码兼容。

HTML 对象的 id 作为对象名的问题

现有问题：
在 IE 中，HTML 对象的 ID 可以作为 document 的下属对象变量名直接使用。在 MF 中不能。

解决方法：
用 getElementById("idName") 代替 idName 作为对象变量使用。

用idName字符串取得对象的问题

现有问题：
在IE中，利用 eval(idName) 可以取得 id 为 idName 的 HTML 对象，在MF 中不能。

解决方法：
用 getElementById(idName) 代替 eval(idName)。

变量名与某 HTML 对象 id 相同的问题

现有问题：
在 MF 中，因为对象 id 不作为 HTML 对象的名称，所以可以使用与 HTML 对象 id 相同的变量名，IE 中不能。

解决方法：
在声明变量时，一律加上 var ，以避免歧义，这样在 IE 中亦可正常运行。
此外，最好不要取与 HTML 对象 id 相同的变量名，以减少错误。

event.x 与 event.y 问题

现有问题：
在IE 中，event 对象有 x, y 属性，MF中没有。

解决方法：
在MF中，与event.x 等效的是 event.pageX。但event.pageX IE中没有。
故采用 event.clientX 代替 event.x。在IE 中也有这个变量。
event.clientX 与 event.pageX 有微妙的差别（当整个页面有滚动条的时候），不过大多数时候是等效的。

如果要完全一样，可以稍麻烦些：
mX = event.x ? event.x : event.pageX;
然后用 mX 代替 event.x

其它：
event.layerX 在 IE 与 MF 中都有，具体意义有无差别尚未试验。

关于frame

现有问题：
在 IE中可以用window.testFrame取得该frame，mf中不行

解决方法：
在frame的使用方面mf和ie的最主要的区别是：
如果在frame标签中书写了以下属性：
<frame xsrc="/xx.htm" id="frameId" name="frameName" />
那么ie可以通过id或者name访问这个frame对应的window对象
而mf只可以通过name来访问这个frame对应的window对象
例如如果上述frame标签写在最上层的window里面的htm里面，那么可以这样访问
ie： window.top.frameId或者window.top.frameName来访问这个window对象
mf：只能这样window.top.frameName来访问这个window对象

另外，在mf和ie中都可以使用window.top.document.getElementById("frameId")来访问frame标签
并且可以通过window.top.document.getElementById("testFrame").src = 'xx.htm'来切换frame的内容
也都可以通过window.top.frameName.location = 'xx.htm'来切换frame的内容

在mf中，自己定义的属性必须getAttribute()取得

父结点的问题

在mf中没有 parentElement parement.children 而用 parentNode parentNode.childNodes
childNodes的下标的含义在IE和MF中不同，MF使用DOM规范，childNodes中会插入空白文本节点。
一般可以通过node.getElementsByTagName()来回避这个问题。当html中节点缺失时，IE和MF对parentNode的解释不同，例如

MF中input.parentNode的值为form, 而IE中input.parentNode的值为空节点
MF中节点没有removeNode方法，必须使用如下方法 node.parentNode.removeChild(node)

const 问题

现有问题：
在 IE 中不能使用 const 关键字。如 const constVar = 32; 在IE中这是语法错误。

解决方法：
不使用 const ，以 var 代替。

body 对象

MF的body在body标签没有被浏览器完全读入之前就存在，而IE则必须在body完全被读入之后才存在

url encoding

在js中如果书写url就直接写&不要写&例如var url = 'xx.jsp?objectName=xx&objectEvent=xxx';
frm.action = url那么很有可能url不会被正常显示以至于参数没有正确的传到服务器
一般会服务器报错参数没有找到
当然如果是在tpl中例外，因为tpl中符合xml规范，要求&书写为&
一般MF无法识别js中的&

nodeName 和 tagName 问题

现有问题：
在MF中，所有节点均有 nodeName 值，但 textNode 没有 tagName 值。在 IE 中，nodeName 的使用好象
有问题（具体情况没有测试，但我的IE已经死了好几次）。

解决方法：
使用 tagName，但应检测其是否为空。

元素属性

IE下 input.type属性为只读，但是MF下可以修改

document.getElementsByName() 和 document.all[name] 的问题

现有问题：
在 IE 中，getElementsByName()、document.all[name] 均不能用来取得 div 元素（是否还有其它不能取的元素还不知道）。

Posted by kevinwu 12:27 PM | 全文 | 评论 (0) | 引用 (0) | JAVASCRIPT(27)

prototype.js开发笔记

1. Prototype是什么?

或许你还没有用过它， prototype.js 是一个由Sam Stephenson写的JavaScript包。这个构思奇妙编写良好的一段兼容标准的一段代码将承担创造胖客户端，高交互性WEB应用程序的重担。轻松加入Web 2.0特性。

如果你最近体验了这个程序包，你很可能会发现文档并不是它的强项之一。像所有在我之前的开发者一样，我只能一头扎进prototype.js的源代码中并且试验其中的每一个部分。我想当我学习他的时候记写笔记然后分享给其他人将会很不错。

我也一起提供了这个包的对象，类，方法和扩展的非官方参考。

2. 通用性方法

这个程序包里面包含了许多预定义的对象和通用性方法。编写这些方法的明显的目的就是为了减少你大量的重复编码和惯用法。

2.1. 使用 $()方法

$() 方法是在DOM中使用过于频繁的 document.getElementById() 方法的一个便利的简写，就像这个DOM方法一样，这个方法返回参数传入的id的那个元素。

比起DOM中的方法，这个更胜一筹。你可以传入多个id作为参数然后 $() 返回一个带有所有要求的元素的一个 Array 对象。下面的例子会向你描述这些。



 Test Page 



    function test1()
    {
        var d = $('myDiv');
        alert(d.innerHTML);
    }

    function test2()
    {
        var divs = $('myDiv','myOtherDiv');
        for(i=0; i
        {
            alert(divs[i].innerHTML);
        }
    }




    
      
      
       
       
        
       
       This is a paragraph
       
       
    
      
      

    
      
      
       
       
        
       
       This is another paragraph

这个方法的另一个好处就是你可以传入id字符串或者元素对象自己，这使得在创建可以传入任何形式参数的方法的时候，它变得非常有用。

2.2. 使用$F()方法

$F()方法是另一个非常受欢迎的简写。它可以返回任何输入表单控件的值，如文本框或下拉框。这个方法可以传入元素的id或者元素自己。


    function test3()
    {
        alert(  $F('userName')  );
    }

2.3. 使用Try.these()方法

Try.these() 方法使得实现当你想调用不同的方法直到其中的一个成功正常的这种需求变得非常容易，他把一系列的方法作为参数并且按顺序的一个一个的执行这些方法直到其中的一个成功执行，返回成功执行的那个方法的返回值。

在下面的例子中， xmlNode.text在一些浏览器中好用，但是xmlNode.textContent在另一些浏览器中正常工作。使用Try.these()方法我们可以得到正常工作的那个方法的返回值。


function getXmlNodeValue(xmlNode){
    return Try.these(
        function() {return xmlNode.text;},
        function() {return xmlNode.textContent;)
        );
}

3. Ajax 对象

上面提到的共通方法非常好，但是面对它吧，它们不是最高级的那类东西。它们是吗？你很可能自己编写了这些甚至在你的脚本里面有类似功能的方法。但是这些方法只是冰山一角。

我很肯定你对prototype.js感兴趣的原因很可能是由于它的AJAX能力。所以让我们解释当你需要完成AJAX逻辑的时候，这个包如何让它更容易。

Ajax 对象是一个预定义对象，由这个包创建，为了封装和简化编写AJAX 功能涉及的狡猾的代码。这个对象包含一系列的封装AJAX逻辑的类。我们来看看它们的一些。

3.1. 使用 Ajax.Request类

如果你不使用任何的帮助程序包，你很可能编写了整个大量的代码来创建XMLHttpRequest对象并且异步的跟踪它的进程，然后解析出响应然后处理它。当你不需要支持多于一种类型的浏览器时你会感到非常的幸运。

为了支持 AJAX 功能。这个包定义了 Ajax.Request 类。

假如你有一个应用程序可以通过url http://yoursever/app/get_sales?empID=1234&year=1998与服务器通信。它返回下面这样的XML 响应。

用 Ajax.Request对象和服务器通信并且得到这段XML是非常简单的。下面的例子演示了它是如何完成的。


    function searchSales()
    {
        var empID = $F('lstEmployees');
        var y = $F('lstYears');
        var url = 'http://yoursever/app/get_sales';
        var pars = 'empID=' + empID + '&year=' + y;
       var myAjax = new Ajax.Request(
                    url,
                    {method: 'get', parameters: pars, onComplete: showResponse}
                    );

    }

    function showResponse(originalRequest)
    {
        //put returned XML in the textarea
        $('result').value = originalRequest.responseText;
    }


    Buchanan, Steven    Callahan, Laura    Davolio, Nancy
    1996    1997    1998

你看到传入 Ajax.Request构造方法的第二个对象了吗？参数{method: 'get', parameters: pars, onComplete: showResponse} 表示一个匿名对象的真实写法。他表示你传入的这个对象有一个名为 method 值为 'get'的属性，另一个属性名为 parameters 包含HTTP请求的查询字符串，和一个onComplete 属性/方法包含函数showResponse。

还有一些其它的属性可以在这个对象里面定义和设置，如 asynchronous，可以为true 或 false 来决定AJAX对服务器的调用是否是异步的（默认值是 true）。

这个参数定义AJAX调用的选项。在我们的例子中，在第一个参数通过HTTP GET命令请求那个url，传入了变量 pars包含的查询字符串， Ajax.Request 对象在它完成接收响应的时候将调用showResponse 方法。

也许你知道， XMLHttpRequest在HTTP请求期间将报告进度情况。这个进度被描述为四个不同阶段：Loading, Loaded, Interactive, 或 Complete。你可以使 Ajax.Request 对象在任何阶段调用自定义方法，Complete 是最常用的一个。想调用自定义的方法只需要简单的在请求的选项参数中的名为 onXXXXX 属性/方法中提供自定义的方法对象。就像我们例子中的 onComplete 。你传入的方法将会被用一个参数调用，这个参数是 XMLHttpRequest 对象自己。你将会用这个对象去得到返回的数据并且或许检查包含有在这次调用中的HTTP结果代码的 status 属性。

还有另外两个有用的选项用来处理结果。我们可以在onSuccess 选项处传入一个方法，当AJAX无误的执行完后调用，相反的，也可以在onFailure选项处传入一个方法，当服务器端出现错误时调用。正如onXXXXX 选项传入的方法一样，这两个在被调用的时候也传入一个带有AJAX请求的XMLHttpRequest对象。

我们的例子没有用任何有趣的方式处理这个 XML响应，我们只是把这段XML放进了一个文本域里面。对这个响应的一个典型的应用很可能就是找到其中的想要的信息，然后更新页面中的某些元素，或者甚至可能做某些XSLT转换而在页面中产生一些HTML。

更完全的解释，请参照 Ajax.Request 参考和 Ajax选项参考。

3.2. 使用 Ajax.Updater 类

如果你的服务器的另一端返回的信息已经是HTML了，那么使用这个程序包中 Ajax.Updater 类将使你的生活变得更加得容易。用它你只需提供哪一个元素需要被AJAX请求返回的HTML填充就可以了，例子比我写说明的更清楚。


    function getHTML()
    {
        var url = 'http://yourserver/app/getSomeHTML';
        var pars = 'someParameter=ABC';

         var myAjax = new Ajax.Updater('placeholder', url, {method: 'get', parameters: pars});

    }

你可以看到，这段代码比前面的例子更加简洁，不包括 onComplete 方法，但是在构造方法中传入了一个元素id。我们来稍稍修改一下代码来描述如何在客户端处理服务器段错误成为可能。

我们将加入更多的选项，指定处理错误的一个方法。这个是用 onFailure 选项来完成的。

我们也指定了一个 placeholder 只有在成功请求之后才会被填充。为了完成这个目的我们修改了第一个参数从一个简单的元素id到一个带有两个属性的对象， success (一切OK的时候被用到) 和 failure (有地方出问题的时候被用到) 在下面的例子中没有用到failure属性，而仅仅在 onFailure 处使用了 reportError 方法。


    function getHTML()
    {
        var url = 'http://yourserver/app/getSomeHTML';
        var pars = 'someParameter=ABC';
        var myAjax = new Ajax.Updater(
                    {success: 'placeholder'},
                    url,
                    {method: 'get', parameters: pars, onFailure: reportError});

    }

    function reportError(request)
    {
        alert('Sorry. There was an error.');
    }

如果你的服务器逻辑是返回JavaScript 代码而不是单纯的 HTML 标记， Ajax.Updater对象可以执行那段JavaScript代码。为了使这个对象对待响应为JavaScript，你只需在最后参数的对象构造方法中简单加入evalScripts: true属性。

更完全的解释，请参照 Ajax.Updater 参考和 Ajax选项参考。

4. prototype.js参考

4.1. JavaScript 类的扩展

prototype.js 包中加入功能的一种途径就是扩展已有的JavaScript 类。

4.2. 对 Object 类的扩展

Table 1. Object 类的扩展

方法	类别	参数	描述
extend(destination, source)	static	destination: 任何对象, source: 任何对象	用从 source 到 destination复制所有属性和方法的方式来提供一种继承机制。
extend(object)	instance	任何对象	用从传入的 object 中复制所有属性和方法的方式来提供一种继承机制。

4.3. 对 Number 类的扩展

Table 2. Number 类的扩展

方法	类别	参数	描述
toColorPart()	instance	(none)	返回数字的十六进制描述，当在HTML中转换为RGB颜色组件到HTML中使用的颜色。

4.4. 对 Function 类的扩展

Table 3. 对 Function 类的扩展

方法	类别	参数	描述
bind(object)	instance	object: 拥有这个方法的对象	返回预先绑定在拥有该函数(=方法)的对象上的函数实例，返回的方法将和原来的方法具有相同的参数。
bindAsEventListener(object)	instance	object: 拥有这个方法的对象	返回预先绑定在拥有该函数(=方法)的对象上的函数实例，返回的方法将把当前的事件对象作为它的参数。

让我们看看这些扩展的具体例子。

 Test?

    //declaring the class
    var CheckboxWatcher = Class.create();

    //defining the rest of the class implmentation
    CheckboxWatcher.prototype = {

       initialize: function(chkBox, message) {
            this.chkBox = $(chkBox);
            this.message = message;
            //assigning our method to the event
            this.chkBox.onclick = this.showMessage.bindAsEventListener(this);
       },

       showMessage: function(evt) {
          alert(this.message + ' (' + evt.type + ')');
       }
    };


    var watcher = new CheckboxWatcher('myChk', 'Changed');

4.5. 对 String 类的扩展

Table 4. String 类的扩展

方法	类别	参数	描述
stripTags()	instance	(none)	返回一个把所有的HTML或XML标记都移除的字符串。
escapeHTML()	instance	(none)	返回一个把所有的HTML标记回避掉的字符串。
unescapeHTML()	instance	(none)	和 escapeHTML()相反。

4.6. 对 document DOM 对象的扩展

Table 5. document DOM 对象的扩展

方法	类别	参数	描述
getElementsByClassName(className)	instance	className: 关联在元素上的CSS类名	返回给定的具有相同的CSS类名的所有元素。

4.7. 对 Event 对象的扩展

Table 6. Event 对象的扩展

属性	类型	描述
KEY_BACKSPACE	Number	8: 常量，退格(Backspace)键的代码。
KEY_TAB	Number	9: 常量，Tab键的代码。
KEY_RETURN	Number	13: 常量，回车键的代码。
KEY_ESC	Number	27: 常量， Esc键的代码。
KEY_LEFT	Number	37: 常量，左箭头键的代码。
KEY_UP	Number	38: 常量，上箭头键的代码。
KEY_RIGHT	Number	39: 常量，右箭头键的代码。
KEY_DOWN	Number	40: 常量，下箭头键的代码。
KEY_DELETE	Number	46: 常量，删除(Delete)键的代码。
observers:	Array	缓存的观察者的列表，这个对象内部具体实现的一部分。

Table 7. Event 对象的扩展

方法	类别	参数	描述
element(event)	static	event: 事件对象	返回引发这个事件的元素。
isLeftClick(event)	static	event: 事件对象	如果鼠标左键单击返回true。
pointerX(event)	static	event: 事件对象	返回在页面上x坐标。
pointerY(event)	static	event: 事件对象	返回在页面上y坐标。
stop(event)	static	event: 事件对象	用这个方法来中止事件的默认行为来使事件的传播停止。
findElement(event, tagName)	static	event: 事件对象, tagName: 指定标记的名字	向 DOM 树的上位查找，找到第一个给定标记名称的元素，从这个元素开始触发事件。
observe(element, name, observer, useCapture)	static	element: 对象或者对象id, name: 事件名 (如 'click', 'load', etc), observer: 处理这个事件的方法, useCapture: 如果true, 在捕捉到事件的阶段处理事件那么如果 false在bubbling 阶段处理。	加入一个处理事件的方法。
stopObserving(element, name, observer, useCapture)	static	element: 对象或者对象id, name: 事件名 (如 'click', 'load', etc), observer: 处理这个事件的方法, useCapture: 如果true, 在捕捉到事件的阶段处理事件那么如果 false在bubbling 阶段处理。	删除一个处理实践的方法。
_observeAndCache( element, name, observer, useCapture)	static		私有方法，不用管它。
unloadCache()	static	(none)	私有方法，不用管它。清除内存中的多有观察着缓存。

让我们看看怎样用这个对象加入处理 window 对象的load事件的处理方法。


    Event.observe(window, 'load', showMessage, false);

    function showMessage() {
      alert('Page loaded.');
    }

4.8. 在 prototype.js中定义的新对象和类

另一个这个程序包帮助你的地方就是提供许多既支持面向对象设计理念又有共通功能的许多对象。

4.9. PeriodicalExecuter 对象

这个对象提供一定间隔时间上重复调用一个方法的逻辑。

Table 8. PeriodicalExecuter 对象

方法	类别	参数	描述
[ctor](callback, interval)	constructor	callback: 没有参数的方法, interval: 秒数	创建这个对象的实例将会重复调用给定的方法。

Table 9. PeriodicalExecuter 对象

属性	类型	描述
callback	Function()	被调用的方法，该方法不会被传入参数。
frequency	Number	以秒为单位的间隔。
currentlyExecuting	Boolean	表示这个方法是否正在执行。

4.10. Prototype 对象

Prototype 没有太重要的作用，只是声明了该程序包的版本。

Table 10. The Prototype object

属性	类型	描述
Version	String	包的版本。
emptyFunction	Function()	空方法对象。

4.11. Class 对象

在这个程序包中 Class 对象在声明其他的类时候被用到。用这个对象声明类使得新类支持 initialize() 方法，他起构造方法的作用。

看下面的例子

//declaring the class
var MySampleClass = Class.create();
//defining the rest of the class implmentation
MySampleClass.prototype = {

   initialize: function(message) {
        this.message = message;
   },

   showMessage: function(ajaxResponse) {
      alert(this.message);
   }
};

//now, let's instantiate and use one object
var myTalker = new MySampleClass('hi there.');
myTalker.showMessage(); //displays alert

Table 11. Class 对象

方法	类别	参数	描述
create(*)	instance	(any)	定义新类的构造方法。

4.12. Ajax 对象

这个对象被用作其他提供AJAX功能的类的根对象。

Table 12. Ajax 对象

方法	类别	参数	描述
getTransport()	instance	(none)	返回新的XMLHttpRequest 对象。

4.13. Ajax.Base 类

这个类是其他在Ajax对象中定义的类的基类。

Table 13. Ajax.Base 类

方法	类别	参数	描述
setOptions(options)	instance	options: AJAX 选项	设定AJAX操作想要的选项。
responseIsSuccess()	instance	(none)	返回 true 如果AJAX操作成功,否则为 false 。
responseIsFailure()	instance	(none)	与 responseIsSuccess() 相反。

4.14. Ajax.Request 类

继承自 Ajax.Base

封装 AJAX 操作

Table 14. Ajax.Request 类

属性	类型	类别	描述
Events	Array	static	在AJAX 操作中所有可能报告的事件/状态的列表。这个列表包括: 'Uninitialized', 'Loading', 'Loaded', 'Interactive', 和 'Complete'。
transport	XMLHttpRequest	instance	携带AJAX操作的 XMLHttpRequest 对象。

Table 15. Ajax.Request 类

方法	类别	参数	描述
[ctor](url, options)	constructor	url: 请求的url, options: AJAX 选项	创建这个对象的一个实例，它将在给定的选项下请求url。重要：如果选择的url受到浏览器的安全设置，他会一点作用也不起。很多情况下，浏览器不会请求与当前页面不同主机(域名)的url。你最好只使用本地url来避免限制用户配置他们的浏览器(谢谢Clay)
request(url)	instance	url: AJAX 请求的url	这个方法通常不会被外部调用。已经在构造方法中调用了。
setRequestHeaders()	instance	(none)	这个方法通常不会被外部调用。被这个对象自己调用来配置在HTTP请求要发送的HTTP报头。
onStateChange()	instance	(none)	这个方法通常不会被外部调用。当AJAX请求状态改变的时候被这个对象自己调用。
respondToReadyState(readyState)	instance	readyState: 状态数字 (1 到 4)	这个方法通常不会被外部调用。当AJAX请求状态改变的时候被这个对象自己调用。

4.15. options 参数对象

AJAX操作中一个重要的部分就是 options 参数。本质上没有options类。任何对象都可以被传入，只要带有需要的属性。通常会只为了AJAX调用创建匿名类。

Table 16. options 参数对象

属性	类型	Default	描述
method	Array	'post'	HTTP 请求方式。
parameters	String	''	在HTTP请求中传入的url格式的值列表。
asynchronous	Boolean	true	指定是否做异步 AJAX 请求。
postBody	String	undefined	在HTTP POST的情况下，传入请求体中的内容。
requestHeaders	Array	undefined	和请求一起被传入的HTTP头部列表，这个列表必须含有偶数个项目，任何奇数项目是自定义的头部的名称，接下来的偶数项目使这个头部项目的字符串值。例子:['my-header1', 'this is the value', 'my-other-header', 'another value']
onXXXXXXXX	Function(XMLHttpRequest)	undefined	在AJAX 请求中，当相应的事件/状态形成的时候调用的自定义方法。例如 var myOpts = {onComplete: showResponse, onLoaded: registerLoaded};. 这个方法将被传入一个参数，这个参数是携带AJAX操作的 XMLHttpRequest对象。
onSuccess	Function(XMLHttpRequest)	undefined	当AJAX请求成功完成的时候调用的自定义方法。这个方法将被传入一个参数，这个参数是携带AJAX操作的 XMLHttpRequest对象。
onFailure	Function(XMLHttpRequest)	undefined	当AJAX请求完成但出现错误的时候调用的自定义方法。这个方法将被传入一个参数，这个参数是携带AJAX操作的 XMLHttpRequest对象。
insertion	Function(Object, String)	null	为了把返回的文本注入到一个元素中而执行的方法。这个方法将被传入两个参数，要被更新的对象并且只应用于 Ajax.Updater的响应文本。
evalScripts	Boolean	undefined, false	决定当响应到达的时候是否执行其中的脚本块，只在 Ajax.Updater 对象中应用。
decay	Number	undefined, 1	决定当最后一次响应和前一次响应相同时在 Ajax.PeriodicalUpdater 对象中的减漫访问的次数，例如，如果设为2，后来的刷新和之前的结果一样，这个对象将等待2个设定的时间间隔进行下一次刷新，如果又一次一样，那么将等待4次，等等。不设定这个只，或者设置为1，将避免访问频率变慢。

4.16. Ajax.Updater 类

继承自 Ajax.Request

当请求的url返回一段HTML而你想把它直接放置到页面中一个特定的元素的时候被用到。如果url的返回的块并且想在接收到时就执行它的时候也可以使用该对象。含有脚本的时候使用 evalScripts 选项。

Table 17. Ajax.Updater 类

属性	类型	类别	描述
ScriptFragment	String	static	可以判断是否为脚本的正则表达式。
containers	Object	instance	这个对象包含两个属性:AJAX请求成功执行的时候用到 containers.success , 否则的话用到 containers.failure 。

Table 18. Ajax.Updater 类

方法	类别	参数	描述
[ctor](container, url, options)	constructor	container:可以是元素的id, 也可以是元素自己, 或者可以是带有2个属性的对象 - object.success AJAX请求成功的时候用到的元素(或者id) 否则用到object.failure 中设定的元素(或id) ,url: 请求的url, options: AJAX 选项	创建一个用给定的选项请求给定的url的一个实例。
updateContent()	instance	(none)	这个方法通常不会被外部调用。当响应到达的时候，被这个对象自己调用。它会用HTML更新适当的元素或者调用在 insertion 选项中传入的方法-这个方法将被传入两个参数，被更新的元素和响应文本。

4.17. Ajax.PeriodicalUpdater 类

继承自 Ajax.Base

这个类重复生成并使用 Ajax.Updater 对象来刷新页面中的一个元素。或者执行 Ajax.Updater 可以执行的其它任务。更多信息参照 Ajax.Updater 参考。

Table 19. Ajax.PeriodicalUpdater 类

属性	类型	类别	描述
container	Object	instance	这个值将直接传入Ajax.Updater的构造方法。
url	String	instance	这个值将直接传入Ajax.Updater的构造方法。
frequency	Number	instance	两次刷新之间的间隔 (不是频率) ，以秒为单位。默认2秒。 This 当调用 Ajax.Updater 对象的时候，这个数将和当前的 decay 相乘。
decay	Number	instance	重负执行任务的时候保持的衰败水平。
updater	Ajax.Updater	instance	最后一次使用的 Ajax.Updater 对象
timer	Object	instance	通知对象该下一次更新时用到的JavaScript 计时器。

Table 20. Ajax.PeriodicalUpdater 类

方法	类别	参数	描述
[ctor](container, url, options)	constructor	container:可以是元素的id, 也可以是元素自己, 或者可以是带有2个属性的对象 - object.success AJAX请求成功的时候用到的元素(或者id) 否则用到object.failure 中设定的元素(或id) ,url: 请求的url, options: AJAX 选项	创建一个用给定的选项请求给定的url的一个实例。
start()	instance	(none)	这个方法通常不会被外部调用。对象为了开始周期性执行任务的时候调用的方法。
stop()	instance	(none)	这个方法通常不会被外部调用。对象为了停止周期性执行任务的时候调用的方法。
updateComplete()	instance	(none)	这个方法通常不会被外部调用。被当前的 Ajax.Updater 使用，当一次请求结束的时候，它被用作计划下一次请求。
onTimerEvent()	instance	(none)	这个方法通常不会被外部调用。当到下一次更新时被内部调用。

4.18. Element 对象

这个对象提供在操作DOM中元素时使用的功能性方法。

Table 21. Element 对象

方法	类别	参数	描述
toggle(elem1 [, elem2 [, elem3 [...]]])	constructor	elemN: 元素对象或id	切换每一个传入元素的可视性。
hide(elem1 [, elem2 [, elem3 [...]]])	instance	elemN: 元素对象或id	用设定它的 style.display 为 'none'来隐藏每个传入的元素。
show(elem1 [, elem2 [, Slem3 [...]]])	instance	elemN: 元素对象或id	用设定它的 style.display 为 ''来显示每个传入的元素。
remove(element)	instance	element: 元素对象或id	从document对象中删除指定的元素。
getHeight(element)	instance	element: 元素对象或id	返回元素的 offsetHeight 。
addClassName( element, className)	instance	element: 元素对象或id, className: CSS类名	向元素的类名中加入给定的类名。
hasClassName( element, className)	instance	element: 元素对象或id, className: CSS类名	返回 true 如果元素的类名中含有给定的类名
removeClassName( element, className)	instance	element: 元素对象或id, className: CSS类名	从元素的类名中删除给定的类名。
cleanWhitespace( element )	instance	element: 元素对象或id	删除该元素的所有只含有空格的子节点。

4.19. Abstract 对象

这个对象是这个程序包中其他类的根。它没有任何属性和方法。在这个对象中定义的类可以被视为传统的抽象类。

4.20. Abstract.Insertion 类

这个类被用作其他提供动态内容插入功能的类的基类，它像一个抽象类一样被使用。

Table 22. Abstract.Insertion 类

方法	类别	参数	描述
[ctor](element, content)	constructor	element: 元素对象或id, content: 被插入的HTML	创建一个可以帮助插入动态内容的对象。

Table 23. Abstract.Insertion 类

属性	类型	类别	描述
adjacency	String	static, parameter	这个参数指定相对于给定元素，内容将被放置的位置。可能的值是: 'beforeBegin', 'afterBegin', 'beforeEnd', 和 'afterEnd'.
element	Object	instance	与插入物做参照元素对象。
content	String	instance	被插入的 HTML 。

4.21. Insertion 对象

这个对象是其他类似功能的根。它没有任何属性和方法。在这个对象中定义的类仍然可以被视为传统的抽象类。

4.22. Insertion.Before 类

继承自 Abstract.Insertion

在给定元素开始标记的前面插入HTML。

Table 24. Insertion.Before 类

方法	类别	参数	描述
[ctor](element, content)	constructor	element: 元素对象或id, content: 被插入的HTML	继承自 Abstract.Insertion. 创建一个可以帮助插入动态内容的对象。

下面的代码

Hello, Wiggum. How's it going?

new Insertion.Before('person', 'Chief ');

将把 HTML 变为


Hello, Chief Wiggum. How's it going?

4.23. Insertion.Top 类

继承自 Abstract.Insertion

在给定元素第一个子节点位置插入 HTML。内容将位于元素的开始标记的紧后面。

Table 25. Insertion.Top 类

方法	类别	参数	描述
[ctor](element, content)	constructor	element: 元素对象或id, content: 被插入的HTML	继承自 Abstract.Insertion. 创建一个可以帮助插入动态内容的对象。

下面的代码


Hello, Wiggum. How's it going?

 new Insertion.Top('person', 'Mr. ');

将把 HTML 变为


Hello, Mr. Wiggum. How's it going?

4.24. Insertion.Bottom 类

继承自 Abstract.Insertion

在给定元素最后一个子节点位置插入 HTML。内容将位于元素的结束标记的紧前面。

Table 26. Insertion.Bottom 类

方法	类别	参数	描述
[ctor](element, content)	constructor	element: 元素对象或id, content: 被插入的HTML	继承自 Abstract.Insertion. 创建一个可以帮助插入动态内容的对象。

下面的代码


Hello, Wiggum. How's it going?

 new Insertion.Bottom('person', " What's up?");

将把 HTML 变为


Hello, Wiggum. How's it going? What's up?

4.25. Insertion.After 类

继承自 Abstract.Insertion

在给定元素结束标记的后面插入HTML。

Table 27. Insertion.After 类

方法	类别	参数	描述
[ctor](element, content)	constructor	element: 元素对象或id, content: 被插入的HTML	继承自 Abstract.Insertion. 创建一个可以帮助插入动态内容的对象。

下面的代码


Hello, Wiggum. How's it going?

 new Insertion.After('person', ' Are you there?');

将把 HTML 变为


Hello, Wiggum. How's it going? Are you there?

4.26. Field 对象

这个对象提供操作表单中的输入项目的功能性方法。

Table 28. Field 对象

方法	类别	参数	描述
clear(field1 [, field2 [, field3 [...]]])	instance	fieldN: 元素对象或id	清除传入表单中项目元素的值。
present(field1 [, field2 [, field3 [...]]])	instance	fieldN: 元素对象或id	只有在所有的表单项目都不为空时返回 true 。
focus(field)	instance	fieldN: 元素对象或id	移动焦点到给定的表单项目。
select(field)	instance	fieldN: 元素对象或id	选择支持项目值选择的表单项目的值。
activate(field)	instance	fieldN: 元素对象或id	移动焦点并且选择支持项目值选择的表单项目的值。

4.27. Form 对象

这个对象提供操作表单和他们的输入项目的功能性方法。

Table 29. Form 对象

方法	类别	参数	描述
serialize(form)	instance	form: 表单元素或id	返回url参数格式的项目名和值的列表，如'field1=value1&field2=value2&field3=value3'。
getElements(form)	instance	form: 表单元素或id	返回包含所有在表单中输入项目的 Array 对象。
getInputs(form [, typeName [, name]])	instance	form: 表单元素或id, typeName: 输入项目的类型, name: 输入项目的名称	返回一个 Array 包含所有在表单中的元素。另外，这个列表可以对元素的类型或名字属性进行过滤。
disable(form)	instance	form: 表单元素或id	使表单中的所有输入项目无效。
enable(form)	instance	form: 表单元素或id	使表单中的所有输入项目有效。
focusFirstElement(form)	instance	form: 表单元素或id	激活第一个表单中可视的，有效的输入项目。
reset(form)	instance	form: 表单元素或id	重置表单。和调用表单对象的 reset() 方法一样。

4.28. Form.Element 对象

这个对象提供表单对象中的可视和非可视元素的功能性方法。

Table 30. Form.Element 对象

方法	类别	参数	描述
serialize(element)	instance	element: 表单元素或id	返回元素的名称=值对, 如 'elementName=elementValue'。
getValue(element)	instance	element: 表单元素或id	返回元素的值。

4.29. Form.Element.Serializers 对象

这个对象提供了内部使用的用来协助解析出表单元素的当前值功能性方法。

Table 31. Form.Element.Serializers 对象

方法	类别	参数	描述
inputSelector(element)	instance	element: 一个带有checked属性的表单元素或id，如 radio 或 checkbox。	返回带有元素名称和值的 Array , 如 ['elementName', 'elementValue']
textarea(element)	instance	element: 一个带有value属性的表单元素或id，如 textbox, button 或 password 项目。	返回带有元素名称和值的 Array , 如 ['elementName', 'elementValue']
select(element)	instance	element: 一个	返回带有元素名称和所有被选择的选项的值或文本的 Array , 如 ['elementName', 'selOpt1 selOpt4 selOpt9']

4.30. Abstract.TimedObserver 类

这个类是用于其它监听一个元素的值(或者任何类中涉及的属性)变化的类的基类，这个类像一个抽象类一样被使用。

子类可以被创建来监听如输入项目值，或style属性，或表格的行数，或者其他任何对跟踪变化相关的东西。

子类必须实现这个方法来决定什么才是被监听的元素的当前值。

Table 32. Abstract.TimedObserver 类

方法	类别	参数	描述
[ctor](element, frequency, callback)	constructor	element: 元素对象或id, frequency: 以秒为单位的间隔, callback: 当元素改变的时候调用的方法。	创建一个监听元素的对象。
registerCallback()	instance	(none)	这个方法通常不会被外部调用。被这个对象自己调用来开始监听那个元素。
onTimerEvent()	instance	(none)	这个方法通常不会被外部调用。被这个对象自己调用来周期性的检查那个元素。

Table 33. Abstract.TimedObserver 类

属性	类型	描述
element	Object	被监听的元素对象。
frequency	Number	每次检查中的以秒为单位的时间间隔。
callback	Function(Object, String)	只要元素改变这个方法就会被调用。会接收到元素对象和新值作为参数。
lastValue	String	元素被核实的最后一个值。

4.31. Form.Element.Observer 类

继承自 Abstract.TimedObserver

Abstract.TimedObserver 的一个实现类用来监听表单输入项目的值的变化。当你想监听一个没有带报告值变化事件的元素的时候使用这个类。否则的话使用 Form.Element.EventObserver 类代替。

Table 34. Form.Element.Observer 类

方法	类别	参数	描述
[ctor](element, frequency, callback)	constructor	element: 元素对象或id, frequency: 以秒为单位的间隔, callback: 当元素改变的时候调用的方法。	继承自 Abstract.TimedObserver. 创建一个监听元素值属性的对象。
getValue()	instance	(none)	返回元素的值。

4.32. Form.Observer 类

继承自 Abstract.TimedObserver

Abstract.TimedObserver 的一个实现类用来监听表单中任何数据项的值的变化。当你想监听一个没有带报告值变化事件的元素的时候使用这个类。否则的话使用类Form.EventObserver 代替。

Table 35. Form.Observer 类

方法	类别	参数	描述
[ctor](form, frequency, callback)	constructor	form: 表单对象或id,	继承自 Abstract.TimedObserver. 创建一个监听表单变化的对象。
getValue()	instance	(none)	返回所有表单数据的一系列值。

4.33. Abstract.EventObserver 类

这个类被用作其他一些类的基类，这些类具有在一个元素的值改变事件发生的时候执行一个回调方法这样的功能。

类 Abstract.EventObserver 的多个对象可以绑定到一个元素上，不是一个帮其他的擦出了，而是按照他们付给元素的顺序执行这些回调方法。

单选按钮和复选框的触发事件是 onclick ，而文本框和下拉列表框/下拉列表框的是 onchange 。

子类必须实现这个方法来决定什么才是被监听的元素的当前值。

Table 36. Abstract.EventObserver 类

方法	类别	参数	描述
[ctor](element, callback)	constructor	element: 元素对象或id, callback: 当事件发生的时候调用的方法。	创建监听元素的对象。
registerCallback()	instance	(none)	这个方法通常不会被外部调用。被对象调用来把自己绑定到元素的事件上。
registerFormCallbacks()	instance	(none)	这个方法通常不会被外部调用。被对象调用来把自己绑定到表单中的每一个数据项元素的事件上。
onElementEvent()	instance	(none)	这个方法通常不会被外部调用。将被绑定到元素的事件上。

Table 37. Abstract.EventObserver 类

属性	类型	描述
element	Object	被监听的元素对象。
callback	Function(Object, String)	只要元素改变就调用的方法。会接收到元素对象和新值作为参数。
lastValue	String	元素被核实的最后一个值。

4.34. Form.Element.EventObserver 类

继承自 Abstract.EventObserver

Abstract.EventObserver 的一个实现类，它在监测到表单中数据项元素的值改变的相应事件时候执行一个回调方法。如果元素没有任何报告变化的事件，那么你可以使用 Form.Element.Observer 类代替。

Table 38. Form.Element.EventObserver 类

方法	类别	参数	描述
[ctor](element, callback)	constructor	element: 元素对象或id, callback: 当事件发生的时候调用的方法。	继承自 Abstract.EventObserver。创建一个监听元素值属性的对象。
getValue()	instance	(none)	返回元素的值。

4.35. Form.EventObserver 类

继承自 Abstract.EventObserver

Abstract.EventObserver 的一个实现类，监听表单对象中包含的任何对象的任何变化，用元素的事件检测值的变化。如果元素没有任何报告变化的事件，那么你可以使用Form.Observer 类代替。

Table 39. Form.Element.EventObserver 类

方法	类别	参数	描述
[ctor](form, callback)	constructor	form: 元素对象或id, callback: 当表单中任何数据项改变的时候调用的方法	继承自 Abstract.EventObserver。创建一个监听元素值属性的对象。
getValue()	instance	(none)	返回所有表单数据的一系列值。

4.36. Position 对象 (预备文档)

这个对象提供许多和元素位置相关的方法。

Table 40. Position 对象 (预备文档)

方法	类别	参数	描述
prepare()	instance	(none)	调整 deltaX 和 deltaY 属性来协调在滚动位置中的变化。记得在页面滚动之后的任何调用的withinIncludingScrolloffset 之前调用这个方法。
realOffset(element)	instance	element: 对象或id	返回这个元素的正确滚动偏差的 Array 对象，包括所有影响元素的滚动偏差。结果数组类似 [total_scroll_left, total_scroll_top]
cumulativeOffset(element)	instance	element: 对象或id	回这个元素的正确滚动偏差的 Array 对象，包含任何被放置的父元素强加偏差。结果数组类似 [total_offset_left, total_offset_top]
within(element, x, y)	instance	element: 对象, x 和 y: 一个点的坐标	测试给定的点的坐标是否在给定的元素的外部矩形范围之内。
withinIncludingScrolloffsets(element, x, y)	instance	element: object, x and y: coordinates of a point
overlap(mode, element)	instance	mode: 'vertical' 或 'horizontal', element: 对象	在调用这个方法之前需要调用within() 。这个方法返回0.0到1.0之间的数字，来表示坐标在元素重叠的分数。举个例子，如果元素是一个边长是100px的正方形的DIV，并且位于(300, 300), 然后 within(divSquare, 330, 330)；overlap('vertical', divSquare); 会返回 0.10，意思是那个点位于DIV顶部边框以下 10% (30px) 的位置上。
clone(source, target)	instance	source: 元素对象或 id, target: 元素对象或id	改变目标元素的大小尺寸和位置与源元素的相同

Posted by kevinwu 12:24 PM | 全文 | 评论 (0) | 引用 (0) | JAVASCRIPT(27)

February 21, 2006

首页图片翻页效果

特点：按规定时间一幅一幅分别显示，并同时显示标题或内容简介，可扩展。
代码如下：

JS：（以最新4幅图片为例）
<script language="JavaScript" type="text/javascript">
var imgUrl=new Array();
var imgLink=new Array();
var imgText=new Array();
var picNum=0;
imgUrl[1]="图片地址1";
imgLink[1]="链接1";
imgText[1]="标题或简介或其它HTML内容1";
imgUrl[2]="图片地址2";
imgLink[2]="链接2";
imgText[2]="标题或简介或其它HTML内容2";
imgUrl[3]="图片地址3";
imgLink[3]="链接3";
imgText[3]="标题或简介或其它HTML内容3";
imgUrl[4]="图片地址4";
imgLink[4]="链接4";
imgText[4]="标题或简介或其它HTML内容4";

function NextPic(){
if(picNum<4) picNum++ ;//显示4个图片
else picNum=1;
if (document.all){
//下面注意，如果存在于FORM表单中，需要使用下面的方法，否则可直接使用name。
document.form1.imgInit.filters.revealTrans.Transition=Math.floor(Math.random()*23);
document.form1.imgInit.filters.revealTrans.apply();
document.form1.imgInit.filters.revealTrans.play();
}
document.images.imgInit.src=imgUrl[picNum];
//如果不是图片，而是SWF等，可做判断，内容可在程序中做好，再放于下面。
focustext.innerHTML=''+imgText[picNum]+'';
//设置翻页时间
theTimer=setTimeout('NextPic()', 3000);
}