网页功能：加入收藏设为首页网站搜索编程QQ群

2008年10月12日

打印

常用js代码大全

Nothing

管理员

Rank: 9 Rank: 9 Rank: 9 Rank: 9 Rank: 9

1^# 大中小发表于 2008-4-27 19:33 只看该作者

常用js代码大全

一、打开页面自动最大化。

<script>
self.moveTo(0,0)
self.resizeTo(screen.availWidth,screen.availHeight)
</script>

二、显示现在时间

<script language=vbscript>document.write now</script>

三、过长文本的显示限制

<DIV STYLE="width: 120px; height: 50px; border: 1px solid blue;

         overflow: hidden; text-overflow:ellipsis">

<NOBR>就是比如有一行文字很长表格内一行显示不下</NOBR>

</DIV>

四、文本链接渐隐渐显

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

<META NAME="Generator" CONTENT="EditPlus">

<META NAME="Author" CONTENT="">

<META NAME="Keywords" CONTENT="">

<META NAME="Description" CONTENT="">

</HEAD>

<BODY>

<script language="javascript" type="text/javascript">

startColor = "#671700"; // 定义链接颜色

endColor = "#D8D1C5";  // 定义要渐变到最后的颜色

stepIn = 17;

stepOut = 23;

/*

定义是否让所有的文本链接自动渐变，true为是，false为否

*/

autoFade = true;

/*

在这里定义css样式里的类class：fade，如果为true，那么你要将要渐变的链接上加上此fade样式

*/

sloppyClass = false;

hexa = new makearray(16);

for(var i = 0; i < 10; i++)

hexa[i] = i;

hexa[10]="a"; hexa[11]="b"; hexa[12]="c";

hexa[13]="d"; hexa[14]="e"; hexa[15]="f";

document.onmouseover = domouseover;

document.onmouseout = domouseout;

startColor = dehexize(startColor.toLowerCase());

endColor = dehexize(endColor.toLowerCase());

var fadeId = new Array();

function dehexize(Color){

var colorArr = new makearray(3);

for (i=1; i<7; i++){

  for (j=0; j<16; j++){

if (Color.charAt(i) == hexa[j]){

if (i%2 !=0)

   colorArr[Math.floor((i-1)/2)]=eval(j)*16;

else

   colorArr[Math.floor((i-1)/2)]+=eval(j);

}

  }

}

return colorArr;

}

function domouseover() {

  if(document.all){

var srcElement = event.srcElement;

if ((srcElement.tagName == "A" && autoFade) || srcElement.className == "fade" || (sloppyClass && srcElement.className.indexOf("fade") != -1))

      fade(startColor,endColor,srcElement.uniqueID,stepIn);

}

}

function domouseout() {

  if (document.all){

var srcElement = event.srcElement;

if ((srcElement.tagName == "A" && autoFade) || srcElement.className == "fade" || (sloppyClass && srcElement.className.indexOf("fade") != -1))

      fade(endColor,startColor,srcElement.uniqueID,stepOut);

}

}

function makearray(n) {

this.length = n;

for(var i = 1; i <= n; i++)

      this[i] = 0;

return this;

}

function hex(i) {

if (i < 0)

      return "00";

else if (i > 255)

      return "ff";

else

   return "" + hexa[Math.floor(i/16)] + hexa[i%16];}

function setColor(r, g, b, element) {

   var hr = hex(r); var hg = hex(g); var hb = hex(b);

   element.style.color = "#"+hr+hg+hb;

}

function fade(s,e, element,step){

var sr = s[0]; var sg = s[1]; var sb = s[2];

var er = e[0]; var eg = e[1]; var eb = e[2];

if (fadeId[0] != null && fade[0] != element){

  setColor(sr,sg,sb,eval(fadeId[0]));

  var i = 1;

  while(i < fadeId.length){

clearTimeout(fadeId[i]);

i++;

}

  }



for(var i = 0; i <= step; i++) {

   fadeId[i+1] = setTimeout("setColor(Math.floor(" +sr+ " *(( " +step+ " - " +i+ " )/ " +step+ " ) + " +er+ " * (" +i+ "/" +

step+ ")),Math.floor(" +sg+ " * (( " +step+ " - " +i+ " )/ " +step+ " ) + " +eg+ " * (" +i+ "/" +step+

")),Math.floor(" +sb+ " * ((" +step+ "-" +i+ ")/" +step+ ") + " +eb+ " * (" +i+ "/" +step+ ")),"+element+");",i*step);

  }

fadeId[0] = element;

}

</script>

</BODY>

</HTML>

<A HREF="">让你的文本链接渐隐渐显</A>

五、静态页面的分页

<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>

<html xmlns="http://www.w3.org/1999/xhtml";>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title> JavaScript: showPages v1.0 [by Lapuasi.com]</title>

<script language="JavaScript">



</script>

<style>

/* Pages Main Tyle */

.pages {

   color: #000000;

   cursor: default;

   font-size: 10px;

   font-family: Tahoma, Verdana;

   padding: 3px 0px 3px 0px;

}

.pages .count, .pages .number, .pages .arrow {

   color: #000000;

   font-size: 10px;

   background-color: #F7F7F7;

   border: 1px solid #CCCCCC;

}

/* Page and PageCount Style */

.pages .count {

   font-weight: bold;

   border-right: none;

   padding: 2px 10px 1px 10px;

}

/* Mode 0,1,2 Style (Number) */

.pages .number {

   font-weight: normal;

   padding: 2px 10px 1px 10px;

}

.pages .number a, .pages .number span {

   font-size: 10px;

}

.pages .number span {

   color: #999999;

   margin: 0px 3px 0px 3px;

}

.pages .number a {

   color: #000000;

   text-decoration: none;

}

.pages .number a:hover {

   color: #0000ff;

}

/* Mode 3 Style (Arrow) */

.pages .arrow {

   font-weight: normal;

   padding: 0px 5px 0px 5px;

}

.pages .arrow a, .pages .arrow span {

   font-size: 10px;

   font-family: Webdings;

}

.pages .arrow span {

   color: #999999;

   margin: 0px 5px 0px 5px;

}

.pages .arrow a {

   color: #000000;

   text-decoration: none;

}

.pages .arrow a:hover {

   color: #0000ff;

}

/* Mode 4 Style (Select) */

.pages select, .pages input {

   color: #000000;

   font-size: 10px;

   font-family: Tahoma, Verdana;

}

/* Mode 5 Style (Input) */

.pages .input input.ititle, .pages .input input.itext, .pages .input input.icount {

   color: #666666;

   font-weight: bold;

   background-color: #F7F7F7;

   border: 1px solid #CCCCCC;

}

.pages .input input.ititle {

   width: 70px;

   text-align: right;

   border-right: none;

}

.pages .input input.itext {

   width: 25px;

   color: #000000;

   text-align: right;

   border-left: none;

   border-right: none;

}

.pages .input input.icount {

   width: 35px;

   text-align: left;

   border-left: none;

}

.pages .input input.ibutton {

   height: 17px;

   color: #FFFFFF;

   font-weight: bold;

   font-family: Verdana;

   background-color: #999999;

   border: 1px solid #666666;

   padding: 0px 0px 2px 1px;

   margin-left: 2px;

   cursor: hand;

}

/* body */

body {

   font-size: 12px;

}

</style>

</head>

<body>

<script language="JavaScript">



</script>

</body>

</html>

六、DIV的透明层实现

<body bgcolor="#ff0ddd">

<div id="Layer1" style="position:absolute; width:260px; height:115px; z-index:1; left: 50px; top: 77px; filter:Alpha(opacity=30)">

      <table width="96%" border="1" cellpadding="1" cellspacing="1" bordercolor="#FFFFFF" bgcolor="#999999">

      <tr>



         <td height="25" bgcolor="#f5f5f5" class="13">你也可以在这里插入图片</td>

                           </tr>

                           <tr>



         <td height="20" bgcolor="#f5f5f5" class="12">你想注册地图名片吗</td>

                           </tr>

                           <tr>



         <td height="20" bgcolor="#f5f5f5" class="12">http://mc.mapabc.com</td>

                           </tr>

                           <tr>



         <td height="20" bgcolor="#f5f5f5" class="12">EMAIL:lipeng@mapabc.com</td>

                           </tr>

                           <tr>



         <td height="20" bgcolor="#f5f5f5" class="12">地址</td>

                           </tr>

                           <tr>



         <td height="20" bgcolor="#f5f5f5" class="12">邮编</td>

                           </tr>

                        </table>

            </div>

换个头像，看见广告就眼红，直接封ID。

TOP

Nothing

管理员

Rank: 9 Rank: 9 Rank: 9 Rank: 9 Rank: 9

2^# 大中小发表于 2008-4-27 19:34 只看该作者

七、强大的表单验证

<title>表单验证类 Validator v1.01</title>

<style>

body,td{font:normal 12px Verdana;color:#333333}

input,textarea,select,td{font:normal 12px Verdana;color:#333333;border:1px solid #999999;background:#ffffff}

table{border-collapse:collapse;}

td{padding:3px}

input{height:20;}

textarea{width:80%;height:50px;overfmin:auto;}

form{display:inline}

</style>

<table align="center">

  <form name="theForm" id="demo" action="" method="get" onSubmit="return Validator.Validate(this,2)">

<tr>

<td>真实姓名：</td><td><input name="Name" dataType="Chinese" msg="真实姓名只允许中文"></td>

  </tr>

  <tr>

<td>英文名：</td><td><input name="Nick" dataType="English" require="false" msg="英文名只允许英文字母"></td>

  </tr>

<tr>

<td>主页：</td><td><input name="Homepage" require="false" dataType="Url" msg="非法的Url"></td>

  </tr>

  <tr>

<td>密码：</td><td><input name="Password" dataType="SafeString" msg="密码不符合安全规则" type="password"></td>

  </tr>

  <tr>

<td>重复：</td><td><input name="Repeat" dataType="Repeat" to="Password" msg="两次输入的密码不一致" type="password"></td>

  </tr>

  <tr>

<td>信箱：</td><td><input name="Email" dataType="Email" msg="信箱格式不正确"></td>

  </tr>

<tr>

<td>信箱：</td><td><input name="Email" dataType="Repeat" to="Email" msg="两次输入的信箱不一致"></td>

  </tr>

  <tr>

<td>QQ：</td><td><input name="QQ" require="false" dataType="QQ" msg="QQ号码不存在"></td>

  </tr>

<tr>

<td>身份证：</td><td><input name="Card" dataType="IdCard" msg="身份证号码不正确"></td>

  </tr>

  <tr>

<td>年龄：</td><td><input name="Year" dataType="Range" msg="年龄必须在18~28之间" min="18" max="28"></td>

  </tr>

<tr>

<td>年龄1：</td><td><input name="Year1" require="false" dataType="Compare" msg="年龄必须在18以上" to="18" operator="GreaterThanEqual"></td>

  </tr>

<tr>

<td>电话：</td><td><input name="Phone" require="false" dataType="Phone" msg="电话号码不正确"></td>

  </tr>

<tr>

<td>手机：</td><td><input name="Mobile" require="false" dataType="Mobile" msg="手机号码不正确"></td>

  </tr>

   <tr>

<td>生日：</td><td><input name="Birthday" dataType="Date" format="ymd" msg="生日日期不存在"></td>

  </tr>

<tr>

<td>邮政编码：</td><td><input name="Zip" dataType="Custom" regexp="^[1-9]\d{5}$" msg="邮政编码不存在"></td>

  </tr>

  <tr>

<td>邮政编码：</td><td><input name="Zip1" dataType="Zip" msg="邮政编码不存在"></td>

  </tr>

  <tr>

<td>操作系统：</td><td><select name="Operation" dataType="Require"  msg="未选择所用操作系统" ><option value="">选择您所用的操作系统</option><option value="Win98">Win98</option><option