草履虫的BLOG

提高javascript的速度系列（序）

caolvchong@gmail.com (草履虫) — Mon, 02 Jun 2008 00:31:21 +0800

倒腾装了一个防SPAM的插件，把评论开了
---------------------------------------
这一段要毕业，得折磨自己两个月....这段时间还是会摆弄了javascript的.大致在下面两个方面: 1.javascript的一些性能方面的注意
2.一些数值分析的javascript的实现这篇是为了后面分析javascript的性能写的一个序,主要是一个计算javascript函数的时间.一个小函数,还是蛮有意思的 code:

function runTimeCount(func) {
	var para =[];
	if(arguments.length >1) {
		para = Array.prototype.slice.apply(arguments, [1, arguments.length]);
	}
	var startTimer = (new Date()).getTime();
	func.apply(null,para);
	var stopTimer = (new Date()).getTime();
	return stopTimer - startTimer;
}

或者看这里:

function runTimeCount(func) {
  var para =[];
  if(arguments.length >1) {
    para = Array.prototype.slice.apply(arguments, [1, arguments.length]);
  }
  var startTimer = (new Date()).getTime();
  func.apply(null,para);
  var stopTimer = (new Date()).getTime();
  return stopTimer - startTimer;
}

拉格朗日插值算法

caolvchong@gmail.com (草履虫) — Sat, 24 May 2008 14:24:10 +0800

拉格朗日插值:根据已知的一些数据,估算一些未知解的一种插值算法
算法介绍:继续找本书看看,比如数值分析...-_-#
有空会继续其他的插值javascript算法实现.评论被关闭,有问题直接email吧
演示::
预览地址:Demo

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>拉格朗日插值</title>
      <script type="text/javascript">
        function getPrecision(x){
          return x.toString().split(".")[1].length;  
        }
        
        Number.prototype.floatFormat = function(n){
          return Math.round(this * Math.pow(10, n)) / Math.pow(10, n);
        }
        /*
         * foregone:一个2维数组,比如:
         *   [
         *     [1,2],
         *     [2,4],
         *     [4,9]
         *   ]
         * 表示已知了三个结果,x=1,y=2;x=2,y=4;x=4,y=9
         * x:目的自变量
         * 
         * 返回值:result,插值估算出的结果
         */
        function Lagrange(foregone,x){
          var xIndex = 0;
          var yIndex = 1;
          var n=foregone.length;
          
          //获取精度
          var percision = 0;
          for(var i =0,j=foregone.length,p;i<j;i++){
            p = getPrecision(foregone[i][yIndex]);
            if(p > percision) {
              percision = p;
            }
          }
          
          for(var i=0,w=1;i<n;i++){
            w *= (x - foregone[i][xIndex]);
          }
          for(var k=0,xk,yk,result=0;k<n;k++){
            xk = foregone[k][xIndex];
            yk = foregone[k][yIndex];
            for(var j=0,wk=1;j<n;j++){
              if(j == k){
                continue;
              }
              wk *= (xk - foregone[j][xIndex]);
            }
            result += yk * w /((x - xk)*wk);
          }
          return result.floatFormat(percision);
        }
        
        /*
         * 已知 sin0.32 = 0.314567; sin0.34 = 0.333487; sin0.36 = 0.352274
         * 求 sin0.3367
         */
        var foregone = [[0.32,0.314567],[0.34,0.333487]];  //线性插值
        var foregone2 = [[0.32,0.314567],[0.34,0.333487],[0.36,0.352274]];  //抛物插值
        var x = 0.3367; 
        alert(Lagrange(foregone,x));
        alert(Lagrange(foregone2,x));
      </script>
    </head>
  <body>
    
  </body>
</html>

提示：您可以先修改部分代码再运行 --------------------------------------------------------------------
核心代码:

/*===========================================================
 * 项目:拉格朗日插值算法实现(javascript)
 * 作者:草履虫
 * 时间:2008.5.24
 * 联系:caolvchong@gmail.com
 * 主页:http://cceer.xmu.edu.cn/blog/
 *===========================================================*/

SOR算法

caolvchong@gmail.com (草履虫) — Mon, 12 May 2008 08:21:43 +0800

SOR算法:用来解大型线性稀疏线性方程组.是高斯-塞得尔算法的一种修正算法
算法介绍:找本书看看,比如数值分析...-_-#
类似的还可以实现高斯-塞得尔迭代算法,雅可比迭代算法等
站点评论被我关闭了,时间太少,无暇管理,垃圾评论懒得删除了.有问题直接email吧
--------------------------------------------------------------------
演示::
预览地址:Demo
--------------------------------------------------------------------
核心代码:

/*===========================================================
 * 项目:SOR算法实现(javascript)
 * 作者:草履虫
 * 时间:2008.5.11
 * 联系:caolvchong@gmail.com
 * 主页:http://cceer.xmu.edu.cn/blog/
 *===========================================================*/

常见排序算法的javascript实现

caolvchong@gmail.com (草履虫) — Mon, 21 Jan 2008 01:33:48 +0800

前段考试,很久没有心思写blog,一些东西扔在了Wiki上,也没怎么打理.考完了,累得狠,典型的教育反面教材......
天亮后就准备回家了,可能blog又要很久没有东西,临走前丢点东西在这里吧.
--------------------------------------------------------------------
常见的几种排序的实现(javascript版本)
说明::
1.代码基本上是自己写的,堆排序和二路归并参考了网上的一些资料
2.转载请注明出处
3.代码以Demo的源代码为准,这里贴出的代码有可能因为高亮插件的一些原因而出现错误
--------------------------------------------------------------------
演示::
1.预览地址:Demo
2.效果图:
--------------------------------------------------------------------
核心代码:

/*===========================================================
 * 项目:常见的几种排序的实现(javascript)
 * 作者:草履虫
 * 时间:2008.1.3 -- 2008.1.4
 * 联系:caolvchong@gmail.com
 * 主页:http://cceer.xmu.edu.cn/blog/
 *===========================================================*/
/*+++++++++++++++++++++++++++++++++++++++++++++++
 *  插入排序
 * 	---直接插入排序
 * 	---折半插入排序
 * 	---shell排序
 *+++++++++++++++++++++++++++++++++++++++++++++++*/
	Array.prototype.direct_insert_sort = function(){//直接插入排序
		var i,j = this.length,k,now;
		for(i=1;i now)&& k>=0;k--){
				this[k+1] = this[k];
			}
			this[k+1] = now;
		}
	}
	Array.prototype.b_insert_sort = function(){//折半插入排序
		var i,j = this.length,k,now,low,high,middle;
		for(i=1;i>1;
				if(now < this[middle]){
					high = middle - 1;
				} else{
					low = middle + 1;
				}
			}
			for(k= i - 1;k >= high + 1;k--){
				this[k + 1] = this[k];
			}
			this[high + 1] = now;
		}
	}
	Array.prototype.shell = function(){//shell排序
		var step,i,j,k,s = this.length,value;
		for (step = s >> 1; step > 0; step >>= 1){
			for (i = 0; i < step; i++){
				for (j = i + step; j < s; j += step){
					k = j;
					value = this[j];
					while (k >= step && this[k - step] > value){//这里做的实际是直接插入排序
						this[k] = this[k - step];
						k -= step;
					}
					this[k] = value;
				}
			}
		}
	}		
/*+++++++++++++++++++++++++++++++++++++++++++++++
 * 快速排序
 * ---冒泡排序
 * ---快速排序
 *+++++++++++++++++++++++++++++++++++++++++++++++*/
	Array.prototype.bubble = function(){//冒泡排序
		var i,j,k=this.length,t;
		for(i=k-1;i>0;i--){
			for(j=0;j this[j+1]){
					t = this[j];
					this[j] = this[j+1];
					this[j+1] = t;
				}
			}
		}
	}
	Array.prototype.ex_bubble = function(){
		var i,j,k=this.length,flag,t;
		for(i=k-1;i>0;i--){
			for(j=0;j this[j+1]){
					t = this[j];
					this[j] = this[j+1];
					this[j+1] = t;
					flag = 1;
				}
			}
			if(flag == 0){
				return;
			}
		}
	}
	Array.prototype.quick_sort = function(left,right){//快速排序
		var i,j,t,key,m;
		if (left == null){
			left = 0;
		}
		if (right == null){
			right = this.length - 1;
		}
		if (left >= right){
			return;
		}
		key = this[left];
		i = left+1;
		j = right;
		do{
			while(this[i] <= key && i<=right){i++;}
			while(this[j] >= key && j > left){j--;}
			if(i < j){
				t = this[i];
				this[i] = this[j];
				this[j] = t;
			}
		}while(i> 1; k >= 0; j = k, k = (k - 1) >> 1){
                if (this[k] >= this[j]) break;
                t = this[j];
				this[j] = this[k];
				this[k] = t;
            }
        }
        for (i = s - 1; i > 0; --i){
            t = this[0];
			this[0] = this[i];
			this[i] = t;
            for (j = 0, k = (j + 1) << 1; k <= i; j = k, k = (k + 1) << 1){
                if (k == i || this[k] < this[k - 1]){
					--k;
				}
                if (this[k] <= this[j]){
					break;
				}
				t = this[j];
				this[j] = this[k];
				this[k] = t;
            }
        }
	}
/*+++++++++++++++++++++++++++++++++++++++++++++++
 * 归并排序
 * ---2-路归并排序
 *+++++++++++++++++++++++++++++++++++++++++++++++*/
	Array.prototype.merge_sort = function(left,right,arr_space){//2-路归并排序
		var i,j,k,middle;
		if (left == null){
			left = 0;
		}
		if(right == null){
			right = this.length - 1;
		}
		if(arr_space == null){
			arr_space = new Array(this.length);
		}
		if(left >= right){
			return;
		}
		middle = (left + right) >> 1;	
		this.merge_sort(left,middle,arr_space);
		this.merge_sort(middle+1,right,arr_space);	
		for(i=left,j=left,k=middle+1;i<=right;i++){
			arr_space[i] = this[(k>right || j<=middle && this[j]

求某数以内的所有质数

caolvchong@gmail.com (草履虫) — Thu, 20 Dec 2007 01:39:35 +0800

任意给出一个数,求该数以内的所有质数.(使用筛选法做的)
如果有更好的方法,不妨指教.
核心代码:

//代码请以运行框内为主,这里可能显示有错
 function prime(num){
    var i,k;
    var arr = [];
    for( i=2; i<=num; i++) {
        arr.push(i);
    }
    for( i=0; i


运行:

<script type="text/javascript">
  function prime(num){
    var i,k;
    var arr = [];
    for(i=2; i<=num; i++){
      arr.push(i);
    }
    for(i=0; i<arr.length; i++){
      for(k=i+1; k<arr.length; k++){
        if(arr[k]%arr[i]==0){
          arr.splice(k,1);
        }
      }
    }
    return arr;
  }

  document.write("500以内的所有质数是:"+prime(500));
</script>

   提示：您可以先修改部分代码再运行

使用javascript类实现的可拖动层的z-index设置

caolvchong@gmail.com (草履虫) — Wed, 19 Dec 2007 01:28:52 +0800

给蓝色一会员的回帖,给blog充数^_^

原有功能:拖拽,未实现z-index

补充功能:实现z-index

核心代码:

//代码请以运行框内为主,这里可能显示有错
/* --------------------------------------------------------------
 * 程序名:拖拽区域块
 * 修改者:草履虫
 * email:caolvchong@gmail.com
 * 主页:http://cceer.xmu.edu.cn/blog/
 * 原始来源:http://bbs.blueidea.com/thread-2817125-1-1.html
 * 增加功能:拖拽后的z-index设置
 * Plus:有疑问或者建议请联系email
 * --------------------------------------------------------------
 */
function move(id){
	this.node = document.getElementById(id);
	this.name = id;
	this.node.style.cursor = "move";
	this.zindex =  parseInt(this.node.getAttribute("id").replace(/\D/g,""));
	this.node.style.zIndex = this.zindex;
	this.node.me = this;	
	this.node.onmousedown = this.mouse_down;
}
move.prototype.mouse_down = function(e){
	e = window.event?window.event:e;
	this.me.node.style.zIndex += 10000;// --->被修改了,原来100,现在10000
	this.me.node.sub_x = e.clientX - this.me.node.offsetLeft;
	this.me.node.sub_y = e.clientY - this.me.node.offsetTop;
	this.me.node.onmousemove = this.me.mouse_move;
	this.me.node.onmouseup = this.me.mouse_up;
}
move.prototype.mouse_move = function(e){
	e = window.event?window.event:e;
	this.me.node.style.cursor = "pointer";
	this.me.node.style.left = e.clientX - this.me.node.sub_x + "px";
	this.me.node.style.top = e.clientY - this.me.node.sub_y + "px";
	this.me.node.onmouseup = this.me.mouse_up;
}
move.prototype.mouse_up = function(){
	this.me.node.onmousemove = "";
	this.me.node.style.cursor = "move";
	this.me.node.style.zIndex = this.me.zindex;	//还原被增加的z-index
	var z_index = this.me.zindex ;	//获取当前z-index
	for(var i = 0; i < document.getElementsByTagName("div").length; i++){	//获取最大z-index
		if(z_index < document.getElementsByTagName("div")[i].style.zIndex){
			z_index = parseInt(document.getElementsByTagName("div")[i].style.zIndex);
		}
	}
	this.me.node.style.zIndex = z_index + 1;	//移动后的z-index,而不是还原
}

使用:

window.onload = function(){
	new move("move1"); //你要拖拽的块的id,必须move开头,后面使用数字
	new move("move2");
	new move("move3");
}

运行:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>草履虫 改进版*拖拽效果</title>
    <style type="text/css">
      .box{position:absolute;width:300px;height:300px;border:1px solid #ddd;}
      #move1{background:#f00;}
      #move2{left:100px;top:100px;background:#0f0;}
      #move3{left:200px;top:200px;background:#00f;}
    </style>
    <script type="text/javascript">
      // <![CDATA[
      /*--------------------------------------------------------------
       * 程序名:拖拽区域块
       * 修改者:草履虫
       * email:caolvchong@gmail.com
       * 主页:http://cceer.xmu.edu.cn/blog/
       * 原始来源:http://bbs.blueidea.com/thread-2817125-1-1.html
       * 增加功能:拖拽后的z-index设置
       * Plus:有疑问或者建议请联系email
       * --------------------------------------------------------------
       */
        function move(id){
          this.node = document.getElementById(id);
          this.name = id;
          this.node.style.cursor = "move";
          this.zindex =  parseInt(this.node.getAttribute("id").replace(/\D/g,""));
          this.node.style.zIndex = this.zindex;
          this.node.me = this;  
          this.node.onmousedown = this.mouse_down;
        }
        move.prototype.mouse_down = function(e){
          e = window.event?window.event:e;
          this.me.node.style.zIndex += 10000;// --->被修改了,原来100,现在10000
          this.me.node.sub_x = e.clientX - this.me.node.offsetLeft;
          this.me.node.sub_y = e.clientY - this.me.node.offsetTop;
          this.me.node.onmousemove = this.me.mouse_move;
          this.me.node.onmouseup = this.me.mouse_up;
        }
        move.prototype.mouse_move = function(e){
          e = window.event?window.event:e;
          this.me.node.style.cursor = "pointer";
          this.me.node.style.left = e.clientX - this.me.node.sub_x + "px";
          this.me.node.style.top = e.clientY - this.me.node.sub_y + "px";
          this.me.node.onmouseup = this.me.mouse_up;
        }
        move.prototype.mouse_up = function(){
          this.me.node.onmousemove = "";
          this.me.node.style.cursor = "move";
          this.me.node.style.zIndex = this.me.zindex;  //还原被增加的z-index
          var z_index = this.me.zindex ;  //获取当前z-index
          for(var i = 0; i < document.getElementsByTagName("div").length; i++){  //获取最大z-index
            if(z_index < document.getElementsByTagName("div")[i].style.zIndex){
              z_index = parseInt(document.getElementsByTagName("div")[i].style.zIndex);
            }
          }
          this.me.node.style.zIndex = z_index + 1;  //移动后的z-index,而不是还原
        }
        window.onload = function(){
          new move("move1");
          new move("move2");
          new move("move3");
        }
      // ]]>
    </script>
  </head>
  <body>
    <div id="move1" class="box">1</div>
    <div id="move2" class="box">2</div>
    <div id="move3" class="box">0</div>
  </body>
</html>

提示：您可以先修改部分代码再运行

div背景随机改变(blueidea)

caolvchong@gmail.com (草履虫) — Tue, 18 Dec 2007 01:16:21 +0800

发现自己的blog写的越来越多是javascript的内容了,确实是一门令人着迷的语言.
老久没有发文了,贴些自己在blueidea的回帖,一是做记录,二权当充数了.
功能:让自己设定的div每次载入时背景随机
核心代码:

//代码请以运行框内为主,这里可能显示有错
var chang_img = {
	get_node: function(id){
		return document.getElementById(id);
	},
	prepare_img: function(){
		return ["http://bbs.blueidea.com/images/blue/logo.gif","http://mail.google.com/mail/help/images/logo.gif","http://www.baidu.com/img/logo-yy.gif","http://www.google.cn/intl/zh-CN/images/logo_cn.gif"];
	},
	bg: function(id){
		var img_num = this.prepare_img().length;
		var i = Math.floor(img_num * Math.random(1));
		this.get_node(id).style.backgroundImage = 'url(' + this.prepare_img()[i] +')';
	},
}

具体应用使用:(估计没啥用,权当解闷了)

window.onload = function(){
	chang_img.bg("test");
}

运行:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>草履虫 载入设置区域块随机背景</title>
    <style type="text/css">
      .test{width:400px;height:200px;float:left;margin:10px;border:1px solid #aaa;}
    </style>
    <script type="text/javascript">
      var chang_img = {
        get_node: function(id){
          return document.getElementById(id);
        },
        prepare_img: function(){
          return ["http://bbs.blueidea.com/images/blue/logo.gif","http://mail.google.com/mail/help/images/logo.gif","http://www.baidu.com/img/logo-yy.gif","http://www.google.cn/intl/zh-CN/images/logo_cn.gif"];
        },
        bg: function(id){
          var img_num = this.prepare_img().length;
          var i = Math.floor(img_num * Math.random(1));
          this.get_node(id).style.backgroundImage = 'url(' + this.prepare_img()[i] +')';
        },
        s:function(){
          alert(this.prepare_img[1]);
        }
      }
      window.onload = function(){
        chang_img.bg("test");
      }
    </script>
  </head>
  <body>
    <div class="test" id="test">我背景会随机变</div>
    <div class="test">我不变色</div>
  </body>
</html>

提示：您可以先修改部分代码再运行

区域块伸缩效果实现(toggle效果)

caolvchong@gmail.com (草履虫) — Wed, 12 Dec 2007 12:15:21 +0800

项目:区域块伸缩效果实现(toggle效果,javascript类实现)
作者:草履虫
邮件:caolvchong@gmail.com
开发平台:windows server 2003
测试平台:Firefox 2.0.11,IE6,IE7,基于IE7核心的Maxthon,GreenBrowser
开发工具:Aptana
时间:2007-12-12
首发:http://cceer.xmu.edu.cn/blog/post/toggle.html
版权说明:转载请务必注明上面这段话和出处

项目描述:通过javascript类实现网页区域块伸缩效果的实现.
调用操作:
  引用js文件,加入到你需要的网页.(当然,你完全可以使用jQuery,它也有toggle)
  在页面载入后(使用window.onload),调用类.例子如下:
    id为a的节点要控制id为b的节点.点击a,如果b为关闭则打开,如果b为打开则关闭
    window.onload = function(){
      var t = new _toggle($.id("b"));
      $.id("a").onclick = function(){
        t.toggle();
      }
    }
    对于多个节点类似处理
一些特点:
  1.支持区域块高度未知情况(比如div高度自适应)
  2.支持区域块默认关闭情况(比如div的display开始为none)
  3.速度级别可以自定义
  4.支持外部css(当然包括内部css)
  5.你来帮找找 ^_^
bug汇报:
  请联系我的email:caolvchong@gmail.com

下载:toggle.rar 或者 toggle.rar
演示:http://finish.3322.org/toggle/index.html

核心代码:toggle.js(代码以下载包为准)

/*------------------------------------------------
 * 作者:草履虫
 * email:caolvchong@gmail.com
 * Version:toggle 1.0 ^_^
 * 版权:使用请保留这段信息
 * 时间:2007年12月12日
 * -----------------------------------------------
 */
var $ ={
	style:function(node){
		return node.currentStyle || document.defaultView.getComputedStyle(node,null) || node.style;
	},
	height:function(node){
		return parseInt($.style(node).height) || parseInt(node.clientHeight);
	},
	id:function(node){
		return document.getElementById(node);
	}
}
function _toggle(node,speed){
	this.node = node;
	switch(speed){
		case "fast":
			this.speed = 10;
			break;
		case "normal":
			this.speed = 5;
			break;
		case "slow":
			this.speed = 2;
			break;
		default:
			this.speed =5;
	}
	this.run = 1;
	this.max_height = $.height(this.node);
	this.node.style.height = this.max_height;
	this.display = $.style(this.node).display;
	this.node.style.overflow = "hidden";
	if(this.max_height <=0 || this.display == "none"){
		this.flag = 1;
	}else{
		this.flag = -1;
	}
}
_toggle.prototype.up_down = function(){
	if(this.node.style.display == "none"){
		this.node.style.display = "block";
		this.node.style.height ="0px";
	}
	this.box_height = parseInt($.style(this.node).height);
	this.box_height -= this.speed * this.flag;
	if(this.box_height > this.max_height){
		window.clearInterval(this.t);
		this.box_height = this.max_height;
		this.run =1;
	}
	if(this.box_height <0){
		window.clearInterval(this.t);
		this.box_height = 0;
		this.node.style.display ="none";
		this.run =1;
	}
	this.node.style.height = this.box_height + "px";
}

_toggle.prototype.toggle = function(){
	var temp = this;
	if(this.run == 1){
		this.flag *= -1;
		this.run =0;
		this.t = window.setInterval(function(){temp.up_down();},10);
	}
}

Tooltip效果

caolvchong@gmail.com (草履虫) — Mon, 19 Nov 2007 19:59:31 +0800

网上tooltip效果有不少,简易实用的不多.比如google的,长的可怕,也让人看不懂.还有一些属于IE only.在jQuery中有一个tooltip效果,还算不错.但个人不是很喜欢,而且还要加个jQuery,无疑,代码长了一些.
下面是之前在蓝色上看到的一个tooltip效果,不错,对它做了一些修改(比如之前只是对链接有tooltip效果,现在对图片也可以有这个效果)加了注释,是深入javascript深入UI学习的一个不错的例子.
当然,你可以在tooltip的基础上加入AJAX效果.(如果是文章发布系统,比较好的是文章会有个简介,AJAX把这部分内容放到tooltip中去.
说明:

原作者:不详(如果有人知道,email我,会及时修改)
修改者:草履虫
联系:caolvchong@gmail.com
转贴请说明上面一段

效果图: 预览地址:http://mmchong.3322.org:81/tooltip/tooltip.html 本机上,有时可能访问不了 使用说明:

在需要的页面引用这段js,或者你把它写入js文件调用,并在window.onload中加入enable_tooltip();即可

范例打包下载: tooltip.rar

//===============================tooltip效果函数================================
/*--->enableTooltips()
 * 功能:调用tooltip效果
 * 参数:无
 * 返回:无
 */
	function enable_tooltip(){
		var links,i,h;
		//是否支持DOM
		if(!document.getElementById || !document.getElementsByTagName){
			return;
		}
		//添加样式
		add_css();
		h=document.createElement("span");
		h.setAttribute("id","btc");
		h.style.position="absolute";
		document.getElementsByTagName("body")[0].appendChild(h);
		//遍历链接,添加tooltip事件
		for(i=0;iPrepare(el)
 * 功能:实现tooltip的显示,删除,透明度等功能
 * 参数:
 * 		el:受作用节点
 * 返回:无
 */
	function Prepare(el){
		//变量说明:
			//tooltip:tooltip效果的整体,装载在id为btc的span标签中
			//s:显示链接的title,tooltip的上半部分效果
			//t:title的值
			//b:显示链接的href,tooltip下半部分效果
			//l:链接内容,就是href的值
		var tooltip,t,b,s,l;
		t=el.getAttribute("title");
		if(t==null || t.length==0){
			return;
		}
		//去掉该节点的title属性
		if(el.getAttribute("title")){
			el.removeAttribute("title");
		}
		if(el.getAttribute("alt")){
			el.removeAttribute("alt");
		}
		//创建节点tooltip,标签为span,设置class属性值为tooltip
		tooltip=CreateEl("span","tooltip");
		//创建节点s,标签为span,设置class属性值为top.s节点是用来显示a链接的title内容
		s=CreateEl("span","top");
		s.appendChild(document.createTextNode(t));
		tooltip.appendChild(s);
		
		//创建节点b,标签为span,设置class属性值为bottom.b节点是用来显示a的链接的href内容
		b=CreateEl("b","bottom");
		l=el.getAttribute("href") || el.getAttribute("src");
		if(l.length>30) l=l.substr(0,27)+"...";
		b.appendChild(document.createTextNode(l));
		tooltip.appendChild(b);
		//设置透明度
		setOpacity(tooltip);
		el.tooltip=tooltip;
		//节点的鼠标移到上面事件:显示tooltip
		el.onmouseover=showTooltip;
		//节点的鼠标移出事件:移除tooltip
		el.onmouseout=hideTooltip;
		//节点的鼠标在上面移动事件:只要调整位置
		el.onmousemove=Locate;
	}
/*--->add_css()
 * 功能:动态添加样式
 * 参数:无
 * 返回值:无
 */
	function add_css(){
		var l=CreateEl("link");
		l.setAttribute("type","text/css");
		l.setAttribute("rel","stylesheet");
		l.setAttribute("href","css/tooltip.css");
		l.setAttribute("media","screen");
		document.getElementsByTagName("head")[0].appendChild(l);
	}
/*--->CreateEl(t,c)
 * 功能:创建一个标签节点,并设置它的css属性
 * 参数:
 * 		t:要创建的标签名
 * 		c:要创建的css的class名
 * 返回:创建的节点
 */
	function CreateEl(t,c){
		var x=document.createElement(t);
		x.className=c;
		x.style.display="block";
		return(x);
	}
/*--->setOpacity(el)
 * 功能:设置tooltip的透明度
 * 参数:tooltip当前节点
 * 返回值:无
 */
	function setOpacity(el){
		el.style.filter="alpha(opacity:75)";
		el.style.KHTMLOpacity="0.75";
		el.style.MozOpacity="0.75";
		el.style.opacity="0.75";
	}
/*--->showTooltip(e)
 * 功能:显示tooltip,并设置位置
 * 参数:
 * 		e:事件,这里接受a的onmouseover
 * 返回:无
 * 说明:由于是把tooltip节点做为孩子加入btc节点,所以后面删除只要移除tooltip节点即可.
 * 	    而tooltip是第一个孩子,所以removeChild掉firstChild即可
 */
	function showTooltip(e){
		document.getElementById("btc").appendChild(this.tooltip);
		Locate(e);
	}
/*--->hideTooltip(e)
 * 功能:移除tooltip显示
 * 参数:
 * 		e:事件,这里接受a的onmouseout事件
 * 返回:无
 */
	function hideTooltip(e){
		//获取tooltip节点
		var d=document.getElementById("btc");
		if(d.childNodes.length>0) d.removeChild(d.firstChild);
	}
/*--->Locate(e)
 * 功能:设置tooltip的位置
 * 参数:
 * 		e:事件,,这里接受a的onmousemove
 * 	返回:无
 */
	function Locate(e){
		var posx=0,posy=0;
		if(e==null) e=window.event;
		if(e.pageX || e.pageY){
		    posx=e.pageX; posy=e.pageY;
		}else if(e.clientX || e.clientY){
		    if(document.documentElement.scrollTop){
		        posx=e.clientX+document.documentElement.scrollLeft;
		        posy=e.clientY+document.documentElement.scrollTop;
		    }else{
		        posx=e.clientX+document.body.scrollLeft;
		        posy=e.clientY+document.body.scrollTop;
		    }
		}
		document.getElementById("btc").style.top=(posy+10)+"px";
		document.getElementById("btc").style.left=(posx-20)+"px";
	}

代码请以范例下载包中为准

网站换肤技术

caolvchong@gmail.com (草履虫) — Sat, 10 Nov 2007 21:48:43 +0800

很久没有更新,昨天看了下网站的PR值,由原来的0变成了3,哈哈,找工作烦中获得了一点YY的快感....
前一段有空都在做这样的一个案例:SVN+PHP(PDO+Smarty)+Ajax+一些前台效果(拖拽,Tooltip,换肤)等问题,目前还没有完成.预览可以看这里:http://mmchong.3322.org:81/work_xm_1/index.php(可能访问不了)有空会整理成一个个模块介绍下.最后会把整个案例做出来,相当于一个文章发布系统,这也是当时实习后决定要做的项目. 预览下换肤的图:

今天介绍的是换肤技术.
作者:草履虫
联系:caolvchong@gmail.com
首发:http://cceer.xmu.edu.cn/
换肤技术原理:很简单,动态改变需要的css文件就可以了.如果需要保存,设置cookie即可.
具体的说:
1.CSS设置部分: 通常,你需要写一个网站通用的CSS文件,该文件一般只控制css的位置布局,不设计颜色,背景布局然后有多个换肤方案的css文件,这里就只控制颜色,背景 2.JS部分: 有一个换肤函数,替换link中的需要的css 有cookie读写函数,用于保存设置

换肤函数可以这么写:

//====================换肤效果=====================
/*函数:change_css(css_id,css_document)
 *功能:自定义版面色彩样式,并写入cookie,保存
 *参数:
     css_id:要被替换的css文件在页面中的id
     css_document:要使用的css文件的路径
     cookie_name:要设置的该样式的cookie名称
 *返回值:
     无
 *--------------------------------*/
    function change_css(css_id,css_document,cookie_name){
        document.getElementById(css_id).setAttribute("href",css_document);
        set_cookie(cookie_name,css_document,365);//保存为1年,当然,你也可以把它分离出来,做为参数设置
    }

//====================cookie函数====================
/*--函数名:set_cookie
 *--功能:设置cookie,只能自定义一个cookie的名和值,设置多个时需要多次调用
 *--参数:
      c_name:自定义cookie名
      c_value:自定义cookie值
      可选c_expires:设置该cookie的存活时间,单位:天
      可选c_path:设置该cookie的路径
      可选c_domain:设置该cookie的域
      可选c_secure:设置是否安全cookie,1安全,0或不设置,不安全
 *--返回值:
       无
 *--------------------------------*/
    function set_cookie(c_name,c_value,c_expires,c_path,c_domain,c_secure){
      var cookie_string=c_name + "=" + escape(c_value);
      if(c_expires){
        var expires = new Date();
        expires.setTime(expires.getTime() + c_expires * 24 * 60 * 60 * 1000);
        cookie_string+=";expires="+expires;
      }
      if(c_path){
        cookie_string+=";path="+c_path;
      }
      if(c_domain){
        cookie_string+=";domain="+c_domain;
      }
      if(c_secure){
         cookie_string+=";secure";
      }
      document.cookie=cookie_string;
    }
/*--函数名:get_cookie
 *--功能:读取需要的cookie
 *--参数:
      c_name:要读取的cookie名
 *--返回值:
      value:要读取的cookie的值
 *--------------------------------*/
    function get_cookie(cookie_name){
       var cookie_pos = document.cookie.indexOf(cookie_name);
      // 如果找到了索引，就代表cookie存在，反之，就说明不存在。
      if (cookie_pos != -1){
         // 把cookie_pos放在值的开始，只要给值加1即可。
         cookie_pos += cookie_name.length + 1;
         var cookie_end = document.cookie.indexOf(";", cookie_pos);
         if (cookie_end == -1){
            cookie_end = document.cookie.length;
          }
         var value = unescape(document.cookie.substring(cookie_pos,cookie_end));
       }
      return value;
     }

//===================调用=====================
    window.onload = function() {
        var d_css_document=css_document;//默认的css文件,比如css/green.css
        var cookie = get_cookie(cookie_name);//读取cookie
        var css_document=cookie?cookie:d_css_document;//cookie是否存在
        change_css(css_id,css_document,cookie_name);//修改样式,当然,你要填入你自己的参数
    }

    
    比如:
      //这里的href写一个不存在的css,并设置id
      //换肤

==========================================================

flash(swf)遮住其他网页内容问题的解决

caolvchong@gmail.com (草履虫) — Thu, 25 Oct 2007 14:52:35 +0800

今天中午写了个lightbox的后台程序来管理相册,由于站点上存在flash导航,lightbox展示时总是无法遮住这个导航的swf
解决方法,如下:
------------------------------------------------
<object type="application/x-shockwave-flash" data="flash地址" width="宽" height="高">
<param name="movie" value="flash地址" />
<param name="wmode" value="transparent" />
</object>
------------------------------------------------
在IE FF OP NS下通用

SVN的入门使用

caolvchong@gmail.com (草履虫) — Wed, 17 Oct 2007 17:25:44 +0800

SVN的入门(包括简单的安装,权限设置,修改等等),是上个星期使用SVN时写的一个备忘
需要深入,或者下面看不明白的,可以访问SVN网站:http://iusesvn.com,因为只是备忘,不像教程那样,提供的网站上面倒是有很多教程可以参考
另外,这里可能排版不是很好,可以尝试访问我的WIKI:http://mmchong.3322.org:81/mediawiki/
由于挂在机子上,可能因为网络原因无法访问

作者:草履虫
email:caolvchong@gmail.com

安装
    * 我安装的SVNServe版本:1.4.4
    * 客户端TortoiseSVN版本1.4.4
在windows 2003下,去相关网站下载的exe安装版本

版本库建造
    建立一个版本控制目录
    * 下面我们在"F:\test\version_control\"下建立一个版本库,可以有下面两种办法:
       1. 在cmd中输入 svnadmin create F:\test\version_control\caolvchong.3322.org
       2. 在F:\test\version_control\下新建 caolvchong.3322.org 文件夹,然后右键 caolvchong.3322.org 文件夹,利用TortoiseSVN菜单的 create repository here..,然后在弹出的菜单中选择 FSFS选项
    * 上面操作以后,我们发现 caolvchong.3322.org 文件夹中多了一些文件,就是SVN生成的版本控制文件

    建立一个源代码目录
    * 这个目录是真正的代码目录,这时是第一个版本.我们假设该目录如下:
我们在F:\test\下建立工作拷贝目录 work_backup\,然后在work_backup目录中建立我们的网站目录
caolvchong.3322.org                 网站的目录
├─admin                               管理员目录
│ ├─right                              右边目录
│ ├─left                               左边目录
│ └─top                                顶部目录
├─docs                                帮助文档目录
└─temp                                临时文件目录

权限设置
    人员权限说明
    * 假设参与网站caolvchong.3322.org代码编写的成员有下面这些人:
       1. caolvchong:网站策划以及代码编写者之一,对所有网站目录文件可读写
       2. jinjin:代码编写者,负责admin/right的编写,但对admin/left和admin/top以及docs不可写(也就是对所有目录文件可读,除了admin/left和admin/top以及docs三个目录以及不可写外,对其他目录可写)
       3. maomao:文档编写,对admin不可读,对docs可读写

    具体目录权限分配说明
caolvchong.3322.org                 网站的目录(不允许匿名访问,caolvchong:rw;jinjin:r;maomao:r)
├─admin                               管理员目录(caolvchong:rw;jinjin:r;maomao:没有权限)
│ ├─right                              右边目录(caolvchong:rw;jinjin:rw;maomao:没有权限)
│ ├─left                               左边目录(caolvchong:rw;jinjin:r;maomao:没有权限)
│ └─top                                顶部目录(caolvchong:rw;jinjin:r;maomao:没有权限)
├─docs                                帮助文档目录(caolvchong:rw;jinjin:r;maomao:rw)
└─temp                                临时文件目录(*:rw)

    具体实现

修改版本库(F:\test\version_control\caolvchong.3322.org)的conf\svnserve.conf文件
下面是一份写好的文件,包括帮助文档
---------------------------------------------------
[general]
#匿名用户权限控制:none(不可读),read(只读),write(读写)
anon-access = none
#非匿名用户,同样也是三种权限控制:none(不可读),read(只读,不可写),write(可以访问,是否可写看authz文件中的设置)
auth-access = write
#调用用户---密码文件 passwd
password-db = passwd
#调用用户权限文件 authz
authz-db = authz
---------------------------------------------------
修改版本库(F:\test\version_control\caolvchong.3322.org)的conf\passwd文件

passwd文件的设置和帮助文件的例子如下:
---------------------------------------------------
##控制访问的用户和密码,格式:
##用户名 = 密码
##比如: caolvchong =123456789
[users]
caolvchong = caolvchong123
jinjin = jinjin123
maomao = maomao123
---------------------------------------------------
修改版本库(F:\test\version_control\caolvchong.3322.org)的conf\authz文件

下面是根据上面的权限设置弄的一份标准的带注释的例子
---------------------------------------------------
##[group]定义用户组
##比如下面的:
##g_manager = caolvchong 表示用户caolvchong将用g_manager表示,caolvchong是出现在passwd中的用户名
[groups]
g_manager = caolvchong
g_docs = maomao
g_coder = jinjin

##目录权限控制
##对根目录,所有用户都有读的权限,caolvchong有读写的权利
##使用上面定义的名字前面要加@
[caolvchong.3322.org:/]
@g_manager = rw
* = r

##对admin/top的控制,caolvchong可读写,jinjin可读,其他人不可读
[caolvchong.3322.org:/admin/top]
@g_manager = rw
@g_coder = r
* =

##对admin/left的控制,caolvchong可读写,jinjin可读,其他人不可读
[caolvchong.3322.org:/admin/left]
@g_manager = rw
@g_coder = r
* =

##对admin/right的控制,caolvchong,jinjin可读写,其他人不可读
[caolvchong.3322.org:/diary/shanghai]
@g_manager = rw
@g_coder = rw
* =

##对docs的控制,caolvchong,maomao可读写,jinjin可读,其他人不可读
[caolvchong.3322.org:/docs]
@g_manager = rw
@g_docs = rw
@g_coder = r
* =

##对temp的控制,所有人可读写
[caolvchong.3322.org:/temp]
* = rw
---------------------------------------------------

    把源码提交到版本库(导入最初的库)
目的是让版本库(F:\test\version_control\caolvchong.3322.org)获取到我们的最初的代码库(F:\test\work_backup\caolvchong.3322.org) 的信息

操作如下: 先让svn服务运行,在cmd中输入 svnserve -d -r F:\test\version_control 当然,这样总有一个窗口存在,如果你想不存在窗口而且每次系统启动自动启动,则去下一个辅助软件,把svn注册成服务即可.

右键最初的代码库(F:\test\work_backup\caolvchong.3322.org) ---TortoiseSVN---Import
在弹出的界面中的URL中输入: svn://localhost/caolvchong.3322.org, 点击 ok 就能把我们的代码库信息被版本库获取了

客户端获取版本
在你的任何地方新建一个文件夹,这里是建在 F:\test\work\caolvchong.3322.org 右键 F:\test\work\caolvchong.3322.org ---SVN CheckOut,在弹出的对话框中输入你需要的URL,这里是svn://localhost/caolvchong.3322.org/,目标目录是你刚建的工作目录 F:\test\work\caolvchong.3322.org 然后输入用户名和密码,就能从版本库中获取到你需要的目录和文件了

客户端提交修改
客户第一个获取版本就是上面说的用 SVN checkout 然后你编辑有权限的目录.编辑完右键该文件---SVN commit,输入用户名和密码,原因等等就能提交到SVN服务器的版本库了(当然,需要你有权限,不然将无法成功提交)

一般地,使用时,你需要先在工作目录中右键 SVN Update 获取当前的版本一下

查看修改(可能来自别人的修改)
右键---TortoiseSVN---show log

日子,日子

caolvchong@gmail.com (草履虫) — Fri, 12 Oct 2007 20:40:06 +0800

     这段日子,忙的不行,几个网站的维护,学习上的事,找工作的事,以及其他七七八八的琐事,让自己有点焦头烂额.很久没有写文章,动动键盘,希望发点牢骚后,能够以平和的心态来重新面对.

     昨天一个客户(朋友)要修改程序,原本按照他的要求,设计了一个比较复杂的系统(订购系统),使用了ajax.由于客户开始的定位有问题,当网站挂出去后一段时间,觉得目前不需要这么复杂的过程,需要简化.牵一发动全身,前台页面要修改,ajax过程要修改,javascript的判断条件要修改,后台判断条件要修改,数据库字段要修改,后台数据统计要修改.....快崩溃,后来和客户商量了一下,为了以后扩展,简化了一下过程,但也着实让我头皮发麻.记录下这个网站的历程:
          代码书写(前台+后台+美工),大约用了5天时间(那时还得上课....)
          购买空间和域名,用了3天,这些都是刚接触的,去朋友那里买的空间,域名edong买的,买卖过程中学了点东西还算不错.
          网站维护,这个最TM的烦,一直断断续续搞到现在,现在充当网站的编辑+程序维护+服务器维护.这日子折磨人啊.
      网站是给朋友做的,这些牢骚只能自己在一个角落发发,毕竟是朋友,自己也不怎么会处理朋友和商业合作的问题.这里给路过的看官一个请教:
          如何处理和朋友之间的含不定报酬的合作
     再说今天吧,另一个网站(这个也几乎是全能,网站的前台,后台,美工,服务器维护都是俺一人,还好编辑不是我),要我设计logo和信封.一直认为自己审美不是强项,虽然photoshop还算可以,但谈到设计,确实不顶.虽然是份外的事,但客户要求了,硬着头皮上了.logo设计了,信封设计了.但是觉得烦的不行了.这东西从结果看虽然还不错,但一堆程序要写却要抽时间来搞这东西,而且客户欠了我好几个月工资(合作关系没有合同,比较复杂...),心理上有些阴影....

      昨天就出现了今天晚上这种情绪,然后咬咬牙去学暑假实习时david一开始就叫我接触的SVN,当时一心要切入正题PHP就草草弄了一下SVN.弄了一网上,总算搞明白了怎么架设SVN,权限分配以及客户端操作问题.但还是比较浅显的,然后在wiki上记录了详细的过程,如果谁需要,留言吧.个人认为给初学者看做入门是绰绰有余且通俗易懂的.
     讲到这里不得不提下david,暑假跟了他学了不少东西,尤其是理念上的.这里要感谢他一下,这么久没有向他说谢谢,有点失利.而且答应他抽点时间过去的,拖拖拖,忙忙忙,就给耽搁下来了....而且最近总是整这整那,就算是编写程序代码,也多是和ASP,javascript打交道. LAMP几乎就没去动过,smarty+pdo是暑假的一大收获,现在要用,恐怕还得翻翻当时留下的笔记了.
      借这里向david表示感谢,如果david看到了,领个情收下吧.

     大家保研的在争抢得轰轰烈烈后前几天有了定音,考研的还在早出晚归,还有打算出国的,接着就是找工作的.招聘会接踵而至,自己也没啥准备,只是有个做个简历网站的念头,目前只打算给自己和舍友做一个简单点的简历网站.而找工作的迷茫依旧披在身上.没的选择的难,有的选择的难,自己就介于有的选择和没的选择之间,也难.

      劈劈啪啪打了一通,心情也不见好转....算了,这日子,日子啊.......

AJAX实现4级联动菜单

caolvchong@gmail.com (草履虫) — Thu, 04 Oct 2007 01:27:14 +0800

*项目名称:AJAX打造4级联动菜单
*作者:草履虫
*联系:caolvchong@gmail.com
*时间:2007-10-3
*起因:
应一位网友的请求
*开发平台:Windows2003 IIS6.0 Access数据库
*工具:Emeditor,Access2003(数据库)
*测试平台:Firefox2.0,Opera9.2,IE6.0,IE7.0
*演示地址:http://finish.3322.org/4_select/index.asp(短期有效,在本机上,可能访问不顺畅)
*原文地址:http://cceer.xmu.edu.cn/blog/view.asp?id=83
*:文件结构:
数据库结构:四级联动,用四张表存各级的数据(加个conn.asp连接数据库)
对于数据库结构,其实这4个表可以放到一个表中,而不必要四个表.只要添加一个字段表名等级即可.数据库结构去附件中看看吧,加了注释了.
function.asp:数据处理文件
deal.asp:ajax后台处理文件
ajax.js:ajax交互文件核心
index.asp:表现页面
*和之前写的3级联动区别:
区别是蛮大的,采用了新的算法,代码重用性也高了,一定程度上分离了业务逻辑和表现逻辑等等.这些看代码自己体会吧
如果你要加以改造,或者实现任意级的联动,修改起来应该不难,因为这次实现联动菜单的算法已经考虑到这种情况.

*下载地址:4_select.rar
或者:http://finish.3322.org/4_select.rar

index.asp代码:

<!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=utf-8" />
<title>四级联动菜单</title>
<script type="text/javascript" src="ajax.js"></script>

</head>
<body>
<select name="xiaoqu" onchange="ajax_change(this.value,'yuanxi',$('yuanxi'));">
  <option value="-1">-----请选择校区----</option>
  <%
    xiaoqu=read_xiaoqu()
    if IsArray(xiaoqu) then
      for i=lbound(xiaoqu) to ubound(xiaoqu)
        response.write "<option value="&xiaoqu(i)(0)&">"&(i+1)&"├"&xiaoqu(i)(1)&"</option>"
      next
    end if
  %>
</select>
<span id="yuanxi">
  <select>
    <option value="-1">-----请选择院系-----</option>
  </select>
</span>
<span id="zhuanye">
  <select>
    <option value="-1">-----请选择专业-----</option>
  </select>
</span>
<span id="banji">
  <select>
    <option value="-1">-----请选择班级-----</option>
  </select>
</span>
</body>
</html>

function.asp代码:

<%
'--->函数:read_xiaoqu()
'   功能:返回所有的校区
'   参数:无
'   返回值:
'    返回一个数组,格式为((校区id,校区名称),(校区id,校区名称),....)
'   调用:
'    xiaoqu=read_xiaoqu()  这里,xiaoqu是变量名,可以任意取
'   使用:
'    xiaoqu(0)(0)----对应第一个记录的id
'    xiaoqu(0)(1)----对应第一个记录的name,依此类推
  function read_xiaoqu()
    sql="select id,name from xiaoqu"
    set rs=server.createobject("adodb.recordset")
    on error resume next
    rs.open sql,conn,1,1
    if err<>0 then
      read_xiaoqu=-1
    else
      dim xiaoqu_array()
      dim i:i=0
      while not rs.eof
        redim preserve xiaoqu_array(i)
        xiaoqu_id=rs("id")
        xiaoqu_name=rs("name")
        xiaoqu_array(i)=array(xiaoqu_id,xiaoqu_name)
        i=i+1
        rs.movenext
      wend
      read_xiaoqu=xiaoqu_array
    end if
  end function

'--->函数:read_table_data(id,table_name)
'   功能:返回对应表的数据
'   参数:
'    id,对应的父亲id
'    table_name:对应的表名
'    比如:选择了校区的id=2,table_name选择院系yuanxi.因为要从表院系中读取对应pid为2的数据
'   返回值:
'    返回一个数组,格式为((id,name),(id,name),....)
'   调用:
'    data=read_table_data(id,table_name)    这里,data是变量名,可以任意取
'   使用:
'    data(0)(0)----对应第一个记录的id
'    data(0)(1)----对应第一个记录的name,依此类推
  function read_table_data(id,table_name)
    sql="select id,name from "&table_name&" where pid="&id
    set rs=server.createobject("adodb.recordset")
    on error resume next
    rs.open sql,conn,1,1
    if err<>0 then
      read_table_data=-1
    else
      dim data_array()
      dim i:i=0
      while not rs.eof
        redim preserve data_array(i)
        id=rs("id")
        name=rs("name")
        data_array(i)=array(id,name)
        i=i+1
        rs.movenext
      wend
      read_table_data=data_array
    end if
  end function


'--->函数:option_default(table_name)
'   功能:返回选择框的头部
'   参数:
'    table_name:对应的表名
'   返回值:
'    返回一个字符串
'   调用:
'    str=option_default(table_name)    这里,str是变量名,可以任意取
  function option_default(table_name)
    select case table_name
      case "yuanxi":
        str="请选择院系"
      case "zhuanye":
        str="请选择专业"
      case "banji":
        str="请选择班级"
      case else
        str="出错了"
    end select
    option_default=str
  end function


'--->函数:set_next_node(table_name)
'   功能:返回当前生成节点的下一个节点的名字
'   参数:
'    table_name:对应的表名
'   返回值:
'    返回一个字符串
'   调用:
'    next_node=set_next_node(table_name)    这里,next_node是变量名,可以任意取
  function set_next_node(table_name)
    select case table_name
      case "yuanxiao":
        node="yuanxi"
      case "yuanxi":
        node="zhuanye"
      case "zhuanye":
        node="banji"
    end select
    set_next_node=node
  end function
%>

ajax.js代码:

deal.asp代码:

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>

<%
  id=request.form("id")
  table_name=request.form("type")
  next_node=set_next_node(table_name)
  if table_name <> "banji" then
    response.write "<select name="""&table_name&""" onchange=""ajax_change(this.value,'"&next_node&"',$('"&next_node&"'));"">"
  else
    response.write "<select name="""&table_name&""">"
  end if
  str=option_default(table_name)
  response.write "<option value=""-1"" selected>---请选择"&str&"---</option>"
  data=read_table_data(id,table_name)
  if IsArray(data) then
    for i=lbound(data) to ubound(data)
      response.write "<option value="&data(i)(0)&">"&(i+1)&"├"&data(i)(1)&"</option>"
    next
  end if
  response.write "</select>"
%>

============================================================ 今天补充下昨天晚上最先写的代码.更简洁,思路也清晰符合思维,但是IE不支持(就是option无法innerHTML到select中去) index.asp(注意,前一个select和后一个select必须连在一起,即< select ...>这种格式,否则取不到nextSibling)

<!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=utf-8" />
<title>四级联动菜单</title>
<script type="text/javascript" src="ajax.js"></script>

</head>
<body>
<select name="xiaoqu" onchange="ajax_change(this.value,this.nextSibling);">
  <option value="-1">-----请选择校区----</option>
  <%
    xiaoqu=read_xiaoqu()
    if IsArray(xiaoqu) then
      for i=lbound(xiaoqu) to ubound(xiaoqu)
        response.write "<option value="&xiaoqu(i)(0)&">"&(i+1)&"├"&xiaoqu(i)(1)&"</option>"
      next
    end if
  %>
</select><select name="yuanxi" id="yuanxi" onchange="ajax_change(this.value,this.nextSibling);">
  <option value="-1">-----请选择院系-----</option>
</select><select name="zhuanye" id="zhuanye" onchange="ajax_change(this.value,this.nextSibling);">
  <option value="-1">-----请选择专业-----</option>
</select><select name="banji" id="banji">
  <option value="-1">-----请选择班级-----</option>
</select>
</body>
</html>

ajax.js

//------------------------------------------------------------
//id:接收的id值(用来提供搜索条件)
//node:接收的节点(用来反馈数据插入),通常是指定后面一个select
  function ajax_change(id,node){
  var xmlhttp;
  try{
    xmlhttp=new XMLHttpRequest();
  }catch(e){
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function(){
  if (xmlhttp.readyState==4){
    if (xmlhttp.status==200){
      var data=xmlhttp.responseText;
      alert(data)
      node.innerHTML=data;
    }else{
      node.innerHTML="出现错误";
      }
    }
  }
  xmlhttp.open("post","deal.asp", true);
  xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
  xmlhttp.send("id="+escape(id)+"&type="+escape(node.name));
}

deal.asp

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>

<%
  id=request.form("id")
  table_name=request.form("type")
  str=option_default(table_name)
  response.write "<option value=""-1"" selected>-----请选择"&str&"-----</option>"
  data=read_table_data(id,table_name)
  if IsArray(data) then
    for i=lbound(data) to ubound(data)
      response.write "<option value="&data(i)(0)&">"&(i+1)&"├"&data(i)(1)&"</option>"
    next
  end if
%>

function.asp

<%
'--->函数:read_xiaoqu()
'   功能:返回所有的校区
'   参数:无
'   返回值:
'    返回一个数组,格式为((校区id,校区名称),(校区id,校区名称),....)
'   调用:
'    xiaoqu=read_xiaoqu()  这里,xiaoqu是变量名,可以任意取
'   使用:
'    xiaoqu(0)(0)----对应第一个记录的id
'    xiaoqu(0)(1)----对应第一个记录的name,依此类推
  function read_xiaoqu()
    sql="select id,name from xiaoqu"
    set rs=server.createobject("adodb.recordset")
    on error resume next
    rs.open sql,conn,1,1
    if err<>0 then
      read_xiaoqu=-1
    else
      dim xiaoqu_array()
      dim i:i=0
      while not rs.eof
        redim preserve xiaoqu_array(i)
        xiaoqu_id=rs("id")
        xiaoqu_name=rs("name")
        xiaoqu_array(i)=array(xiaoqu_id,xiaoqu_name)
        i=i+1
        rs.movenext
      wend
      read_xiaoqu=xiaoqu_array
    end if
  end function

'--->函数:read_table_data(id,table_name)
'   功能:返回对应表的数据
'   参数:
'    id,对应的父亲id
'    table_name:对应的表名
'    比如:选择了校区的id=2,table_name选择院系yuanxi.因为要从表院系中读取对应pid为2的数据
'   返回值:
'    返回一个数组,格式为((id,name),(id,name),....)
'   调用:
'    data=read_table_data(id,table_name)    这里,data是变量名,可以任意取
'   使用:
'    data(0)(0)----对应第一个记录的id
'    data(0)(1)----对应第一个记录的name,依此类推
  function read_table_data(id,table_name)
    sql="select id,name from "&table_name&" where pid="&id
    set rs=server.createobject("adodb.recordset")
    on error resume next
    rs.open sql,conn,1,1
    if err<>0 then
      read_table_data=-1
    else
      dim data_array()
      dim i:i=0
      while not rs.eof
        redim preserve data_array(i)
        id=rs("id")
        name=rs("name")
        data_array(i)=array(id,name)
        i=i+1
        rs.movenext
      wend
      read_table_data=data_array
    end if
  end function


'--->函数:option_default(table_name)
'   功能:返回选择框的头部
'   参数:
'    table_name:对应的表名
'   返回值:
'    返回一个字符串
'   调用:
'    str=option_default(table_name)    这里,str是变量名,可以任意取
  function option_default(table_name)
    select case table_name
      case "yuanxi":
        str="院系"
      case "zhuanye":
        str="专业"
      case "banji":
        str="班级"
      case else
        str="出错了"
    end select
    option_default=str
  end function
%>