常用脚本代码汇集(3)

jackxia
1.接收键盘指令的脚本:

<SCRIPT language="JavaScript">
<!--
var hotkey=97
var destination="http://www.wyev.com"
if (document.layers)
document.captureEvents(Event.KEYPRESS)
function backhome(e){
if (document.layers){
if (e.which==hotkey)
window.location=destination
}
else if (document.all){
if (event.keyCode==hotkey)
window.location=destination
}
}
document.onkeypress=backhome
//-->
</SCRIPT>


onkeydown="javascript:onenter();"

function onenter(){
if(event.keyCode==13){
alert("回车");
}
}
2.让你的文本链接渐隐渐显:

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


3.类似与QQ的好友/黑名单之类的树型菜单_极品:

<!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>
4.很多的脚本翻页:

<!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">
<!--
/*

showPages v1.1
=================================

Infomation
----------------------
Author : Lapuasi
E-Mail : lapuasi@gmail.com
Web : http://www.lapuasi.com
Date : 2005-11-17


Example
----------------------
var pg = new showPages(\'pg\');
pg.pageCount = 12; //定义总页数(必要)
pg.argName = \'p\';    //定义参数名(可选,缺省为page)
pg.printHtml();        //显示页数


Supported in Internet Explorer, Mozilla Firefox
*/

function showPages(name) { //初始化属性
 this.name = name;      //对象名称
 this.page = 1;         //当前页数
 this.pageCount = 1;    //总页数
 this.argName = \'page\'; //参数名
 this.showTimes = 1;    //打印次数
}

showPages.prototype.getPage = function(){ //丛url获得当前页数,如果变量重复只获取最后一个
 var args = location.search;
 var reg = new RegExp(\'[\?&]?\' + this.argName + \'=([^&]*)[&$]?\', \'gi\');
 var chk = args.match(reg);
 this.page = RegExp.$1;
}
showPages.prototype.checkPages = function(){ //进行当前页数和总页数的验证
 if (isNaN(parseInt(this.page))) this.page = 1;
 if (isNaN(parseInt(this.pageCount))) this.pageCount = 1;
 if (this.page < 1) this.page = 1;
 if (this.pageCount < 1) this.pageCount = 1;
 if (this.page > this.pageCount) this.page = this.pageCount;
 this.page = parseInt(this.page);
 this.pageCount = parseInt(this.pageCount);
}
showPages.prototype.createHtml = function(mode){ //生成html代码
 var strHtml = \'\', prevPage = this.page - 1, nextPage = this.page + 1;
 if (mode == \'\' || typeof(mode) == \'undefined\') mode = 0;
 switch (mode) {
  case 0 : //模式1 (页数,首页,前页,后页,尾页)
   strHtml += \'<span class="count">Pages: \' + this.page + \' / \' + this.pageCount + \'</span>\';
   strHtml += \'<span class="number">\';
   if (prevPage < 1) {
    strHtml += \'<span title="First Page">«</span>\';
    strHtml += \'<span title="Prev Page">‹</span>\';
   } else {
    strHtml += \'<span title="First Page"><a href="javascript:\' + this.name + \'.toPage(1);">«</a></span>\';
    strHtml += \'<span title="Prev Page"><a href="javascript:\' + this.name + \'.toPage(\' + prevPage + \');">‹</a></span>\';
   }
   for (var i = 1; i <= this.pageCount; i++) {
    if (i > 0) {
     if (i == this.page) {
      strHtml += \'<span title="Page \' + i + \'">[\' + i + \']</span>\';
     } else {
      strHtml += \'<span title="Page \' + i + \'"><a href="javascript:\' + this.name + \'.toPage(\' + i + \');">[\' + i + \']</a></span>\';
     }
    }
   }
   if (nextPage > this.pageCount) {
    strHtml += \'<span title="Next Page">›</span>\';
    strHtml += \'<span title="Last Page">»</span>\';
   } else {
    strHtml += \'<span title="Next Page"><a href="javascript:\' + this.name + \'.toPage(\' + nextPage + \');">›</a></span>\';
    strHtml += \'<span title="Last Page"><a href="javascript:\' + this.name + \'.toPage(\' + this.pageCount + \');">»</a></span>\';
   }
   strHtml += \'</span><br />\';
   break;
  case 1 : //模式1 (10页缩略,首页,前页,后页,尾页)
   strHtml += \'<span class="count">Pages: \' + this.page + \' / \' + this.pageCount + \'</span>\';
   strHtml += \'<span class="number">\';
   if (prevPage < 1) {
    strHtml += \'<span title="First Page">«</span>\';
    strHtml += \'<span title="Prev Page">‹</span>\';
   } else {
    strHtml += \'<span title="First Page"><a href="javascript:\' + this.name + \'.toPage(1);">«</a></span>\';
    strHtml += \'<span title="Prev Page"><a href="javascript:\' + this.name + \'.toPage(\' + prevPage + \');">‹</a></span>\';
   }
   if (this.page % 10 ==0) {
    var startPage = this.page - 9;
   } else {
    var startPage = this.page - this.page % 10 + 1;
   }
   if (startPage > 10) strHtml += \'<span title="Prev 10 Pages"><a href="javascript:\' + this.name + \'.toPage(\' + (startPage - 1) + \');">...</a></span>\';
   for (var i = startPage; i < startPage + 10; i++) {
    if (i > this.pageCount) break;
    if (i == this.page) {
     strHtml += \'<span title="Page \' + i + \'">[\' + i + \']</span>\';
    } else {
     strHtml += \'<span title="Page \' + i + \'"><a href="javascript:\' + this.name + \'.toPage(\' + i + \');">[\' + i + \']</a></span>\';
    }
   }
   if (this.pageCount >= startPage + 10) strHtml += \'<span title="Next 10 Pages"><a href="javascript:\' + this.name + \'.toPage(\' + (startPage + 10) + \');">...</a></span>\';
   if (nextPage > this.pageCount) {
    strHtml += \'<span title="Next Page">›</span>\';
    strHtml += \'<span title="Last Page">»</span>\';
   } else {
    strHtml += \'<span title="Next Page"><a href="javascript:\' + this.name + \'.toPage(\' + nextPage + \');">›</a></span>\';
    strHtml += \'<span title="Last Page"><a href="javascript:\' + this.name + \'.toPage(\' + this.pageCount + \');">»</a></span>\';
   }
   strHtml += \'</span><br />\';
   break;
  case 2 : //模式2 (前后缩略,页数,首页,前页,后页,尾页)
   strHtml += \'<span class="count">Pages: \' + this.page + \' / \' + this.pageCount + \'</span>\';
   strHtml += \'<span class="number">\';
   if (prevPage < 1) {
    strHtml += \'<span title="First Page">«</span>\';
    strHtml += \'<span title="Prev Page">‹</span>\';
   } else {
    strHtml += \'<span title="First Page"><a href="javascript:\' + this.name + \'.toPage(1);">«</a></span>\';
    strHtml += \'<span title="Prev Page"><a href="javascript:\' + this.name + \'.toPage(\' + prevPage + \');">‹</a></span>\';
   }
   if (this.page != 1) strHtml += \'<span title="Page 1"><a href="javascript:\' + this.name + \'.toPage(1);">[1]</a></span>\';
   if (this.page >= 5) strHtml += \'<span>...</span>\';
   if (this.pageCount > this.page + 2) {
    var endPage = this.page + 2;
   } else {
    var endPage = this.pageCount;
   }
   for (var i = this.page - 2; i <= endPage; i++) {
    if (i > 0) {
     if (i == this.page) {
      strHtml += \'<span title="Page \' + i + \'">[\' + i + \']</span>\';
     } else {
      if (i != 1 && i != this.pageCount) {
       strHtml += \'<span title="Page \' + i + \'"><a href="javascript:\' + this.name + \'.toPage(\' + i + \');">[\' + i + \']</a></span>\';
      }
     }
    }
   }
   if (this.page + 3 < this.pageCount) strHtml += \'<span>...</span>\';
   if (this.page != this.pageCount) strHtml += \'<span title="Page \' + this.pageCount + \'"><a href="javascript:\' + this.name + \'.toPage(\' + this.pageCount + \');">[\' + this.pageCount + \']</a></span>\';
   if (nextPage > this.pageCount) {
    strHtml += \'<span title="Next Page">›</span>\';
    strHtml += \'<span title="Last Page">»</span>\';
   } else {
    strHtml += \'<span title="Next Page"><a href="javascript:\' + this.name + \'.toPage(\' + nextPage + \');">›</a></span>\';
    strHtml += \'<span title="Last Page"><a href="javascript:\' + this.name + \'.toPage(\' + this.pageCount + \');">»</a></span>\';
   }
   strHtml += \'</span><br />\';
   break;
  case 3 : //模式3 (箭头样式,首页,前页,后页,尾页) (only IE)
   strHtml += \'<span class="count">Pages: \' + this.page + \' / \' + this.pageCount + \'</span>\';
   strHtml += \'<span class="arrow">\';
   if (prevPage < 1) {
    strHtml += \'<span title="First Page">9</span>\';
    strHtml += \'<span title="Prev Page">7</span>\';
   } else {
    strHtml += \'<span title="First Page"><a href="javascript:\' + this.name + \'.toPage(1);">9</a></span>\';
    strHtml += \'<span title="Prev Page"><a href="javascript:\' + this.name + \'.toPage(\' + prevPage + \');">7</a></span>\';
   }
   if (nextPage > this.pageCount) {
    strHtml += \'<span title="Next Page">8</span>\';
    strHtml += \'<span title="Last Page">:</span>\';
   } else {
    strHtml += \'<span title="Next Page"><a href="javascript:\' + this.name + \'.toPage(\' + nextPage + \');">8</a></span>\';
    strHtml += \'<span title="Last Page"><a href="javascript:\' + this.name + \'.toPage(\' + this.pageCount + \');">:</a></span>\';
   }
   strHtml += \'</span><br />\';
   break;
  case 4 : //模式4 (下拉框)
   if (this.pageCount < 1) {
    strHtml += \'<select name="toPage" disabled>\';
    strHtml += \'<option value="0">No Pages</option>\';
   } else {
    var chkSelect;
    strHtml += \'<select name="toPage" onchange="\' + this.name + \'.toPage(this);">\';
    for (var i = 1; i <= this.pageCount; i++) {
     if (this.page == i) chkSelect=\' selected="selected"\';
     else chkSelect=\'\';
     strHtml += \'<option value="\' + i + \'"\' + chkSelect + \'>Pages: \' + i + \' / \' + this.pageCount + \'</option>\';
    }
   }
   strHtml += \'</select>\';
   break;
  case 5 : //模式5 (输入框)
   strHtml += \'<span class="input">\';
   if (this.pageCount < 1) {
    strHtml += \'<input type="text" name="toPage" value="No Pages" class="itext" disabled="disabled">\';
    strHtml += \'<input type="button" name="go" value="GO" class="ibutton" disabled="disabled"></option>\';
   } else {
    strHtml += \'<input type="text" value="Input Page:" class="ititle" readonly="readonly">\';
    strHtml += \'<input type="text" id="pageInput\' + this.showTimes + \'" value="\' + this.page + \'" class="itext" title="Input page" onkeypress="return \' + this.name + \'.formatInputPage(event);" onfocus="this.select()">\';
    strHtml += \'<input type="text" value=" / \' + this.pageCount + \'" class="icount" readonly="readonly">\';
    strHtml += \'<input type="button" name="go" value="GO" class="ibutton" onclick="\' + this.name + \'.toPage(document.getElementById(\\'pageInput\' + this.showTimes + \'\\').value);"></option>\';
   }
   strHtml += \'</span>\';
   break;
  default :
   strHtml = \'Javascript showPage Error: not find mode \' + mode;
   break;
 }
 return strHtml;
}
showPages.prototype.createUrl = function (page) { //生成页面跳转url
 if (isNaN(parseInt(page))) page = 1;
 if (page < 1) page = 1;
 if (page > this.pageCount) page = this.pageCount;
 var url = location.protocol + \'//\' + location.host + location.pathname;
 var args = location.search;
 var reg = new RegExp(\'([\?&]?)\' + this.argName + \'=[^&]*[&$]?\', \'gi\');
 args = args.replace(reg,\'$1\');
 if (args == \'\' || args == null) {
  args += \'?\' + this.argName + \'=\' + page;
 } else if (args.substr(args.length - 1,1) == \'?\' || args.substr(args.length - 1,1) == \'&\') {
   args += this.argName + \'=\' + page;
 } else {
   args += \'&\' + this.argName + \'=\' + page;
 }
 return url + args;
}
showPages.prototype.toPage = function(page){ //页面跳转
 var turnTo = 1;
 if (typeof(page) == \'object\') {
  turnTo = page.options[page.selectedIndex].value;
 } else {
  turnTo = page;
 }
 self.location.href = this.createUrl(turnTo);
}
showPages.prototype.printHtml = function(mode){ //显示html代码
 this.getPage();
 this.checkPages();
 this.showTimes += 1;
 document.write(\'<div id="pages_\' + this.name + \'_\' + this.showTimes + \'" class="pages"></div>\');
 document.getElementById(\'pages_\' + this.name + \'_\' + this.showTimes).innerHTML = this.createHtml(mode);
 
}
showPages.prototype.formatInputPage = function(e){ //限定输入页数格式
 var ie = navigator.appName=="Microsoft Internet Explorer"?true:false;
 if(!ie) var key = e.which;
 else var key = event.keyCode;
 if (key == 8 || key == 46 || (key >= 48 && key <= 57)) return true;
 return false;
}
//-->
</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">
<!--
var pg = new showPages(\'pg\');
pg.pageCount =12;  // 定义总页数(必要)
//pg.argName = \'p\';  // 定义参数名(可选,默认为page)

document.write(\'<br>Show Times: \' + pg.showTimes + \', Mood Default\');
pg.printHtml();
document.write(\'<br>Show Times: \' + pg.showTimes + \', Mood 0\');
pg.printHtml(0);
document.write(\'<br>Show Times: \' + pg.showTimes + \', Mood 1\');
pg.printHtml(1);
document.write(\'<br>Show Times: \' + pg.showTimes + \', Mood 2\');
pg.printHtml(2);
document.write(\'<br>Show Times: \' + pg.showTimes + \', Mood 3 (only IE)\');
pg.printHtml(3);
document.write(\'<br>Show Times: \' + pg.showTimes + \', Mood 4\');
pg.printHtml(4);
document.write(\'<br>Show Times: \' + pg.showTimes + \', Mood 5\');
pg.printHtml(5);
//-->
</script>
</body>
</html>


5.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>

分类：

技术点：

相关文章：

猜你喜欢
相关资源
相似解决方案
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode