IT博客-A JavaScript Fancier-随笔分类-javascript个人作品

JS模仿Flash图片环绕旋转效果

Yemoo'S JS Blog — Fri, 30 May 2008 01:43:00 GMT

摘要: 该作品纯属无聊，看到了这么一个flash于是就突发奇想用js写了一个，代码比较乱。演示地址：http://ajaxbbs.net/test/flashImgRoll.html 阅读全文

Yemoo'S JS Blog 2008-05-30 09:43 发表评论

半个下午写的一个简单横向日期控件[1224更新:兼容IE/FF/Opera]

Yemoo'S JS Blog — Thu, 22 May 2008 02:49:00 GMT

2007-12-24更新：
1、完全兼容IE6+、FF1.5+、opera9+。
2、添加键盘监听，支持键盘左右箭头对日期的选择。
3、除去日期显示（多余），合并周次和星期。

===========================
今天中午，老板找俺说：能不能做个小组件，我过去看了，原来是公司的工作日志系统需要一个日期控件，但是要求又比较特殊，具体要求就是：
1、日期表格横向占满页面。
2、每个月的日期列表横向显示在一排，而不是像网上的很多日期控件显示一个方块。
3、要求只有年月日可选，选择年或月后自动更新对应日期（这个每个日期控件都有的）。
4、默认显示当前年月，高亮当前日期，并显示当前的周次（本年第几周）和星期几。
5、选择某个日期后高亮显示当前日期，并自动更新周次和星期显示。
6、提供接口，可以设定特定日期的显示样式。
6、其他就是一些界面展示的问题了。

想着就是一个日期控件，做着也比较简单，不过比较特别是横向的，第一次听说这种需求的！
偶还是第一次写日历类的东西，不过这次的麻烦还是在于周次的计算上和最后提供的设定特定日期的接口实现上，但经过一番分析也很好的解决了。

演示地址：http://ajaxbbs.net/test/calendar.html

主要几个总结：
1、使用了闭包，隐藏内部函数及变量，防止变量污染。最后只提供一个对外接口：setDateStyle
2、计算每年二月的天数不是通过判断闰年的办法，而是通过判断是否2月29日存在，如果不存在则为28天。
3、计算周次要先计算当前日期是本年的第几天，同时要考虑本年1月1日是星期几，然后计算即可得出。
4、setDateStyle支持单个日期样式的传入，也支持多个日期样式的设定。对于样式的更新主要采用数组合并字符串，并采用字符串的indexOf方法匹配并执行样式的设定。
5、CSS/JS/HTML相分离，便于维护。函数模块化便于重用。
主要源码如下：

//使用闭包隐藏所有变量和函数，防止与外界冲突
var logDateControl=(function(){
  var curSelEl;  //当前选中的日期
  var styleData=[],dataStyle={};
  //获取指定id的元素
  var $=function(id){return document.getElementById(id)}
  //判断浏览器类型
  var isIE=isIE||(function(){
    var browser=function(str){return navigator.userAgent.indexOf(str)>-1}
    return browser("MSIE")&&browser("compatible")&&!browser("Opera");
  })();
  //对于非IE浏览器的处理
  if(!isIE){
    //innerText
    HTMLElement.prototype.__defineSetter__("innerText",function(sText){this.textContent=sText});
    HTMLElement.prototype.__defineGetter__("innerText",function(){return this.textContent})
  }
  //触发click事件
  var doClickEvent=function(obj){
    obj=obj||window;
    if(isIE){return obj.click()}
    var e=document.createEvent("MouseEvents");
        e.initEvent("click",true,true);
        obj.dispatchEvent(e);
  }
  //绑定事件
  var attachEvent=function(evt,handler,obj){
    obj=obj||window;
    if(obj.addEventListener){
      obj.addEventListener(evt,handler,false);
    }else{
      obj.attachEvent("on"+evt,handler);
    }
  }
  //计算指定日期是第几周（默认为当前日期），该计算方法比较严密准确
  var calWeek=function(dt){
    var calDay=dt||new Date();  //当前要计算的时间
    var firstDay=new Date(calDay.getFullYear(),0,1);  //本年第一天
    //计算当前是本年的第几天,00：00为当天开始
    var daysAll=Math.floor((calDay-firstDay)/1000/60/60/24)+1;
    //本年第一天星期几
    var firstDayWeekday=firstDay.getDay();
    //该结果加到第一周的周一，便于后面计算
    var diffDay=firstDayWeekday==0?6:firstDayWeekday-1;
    daysAll=daysAll+diffDay;
    return Math.ceil(daysAll/7);  //返回计算结果
  }
  //计算一个月多少天,年份4位数字，月份1-2位数字（应该是js日期格式如1月传入0）,数据非法返回-1
  var getDaysLen=function(year,month){
    if(!(/^\d{4}$/.test(year)&&/^\d{1,2}$/.test(month))){return -1}
    var monthDays=[31,28,31,30,31,30,31,31,30,31,30,31]
    //存在2月29日
    if(month==1&&new Date(year,1,29).getMonth()==1){monthDays[1]=29}
    return monthDays[month]
  }
  //显示日期列表,传入年、月(按日常月份传入。如二月传入2)、及显示位置
  var displayDayList=function(year,month,pos){
    var daysList=[];
    var cells1=$(pos).rows[0].cells;
    var cells2=$(pos).rows[1].cells;
    var daysArr=['日','一','二','三','四','五','六'];
    //下面的month-1转换为js月份表示
    for(var i=1,l=getDaysLen(year,--month)+1;i<l;i++){
      var wd=new Date(year,month,i).getDay();
      cells1[i-1].className="";
      if(wd==0||wd==6){cells1[i-1].className="weekEnd";}  //为周末添加特殊样式
      //_oldCls保存当前日期的默认样式
      cells1[i-1].innerText=daysArr[wd];
      cells2[i-1].className="unSelectDay";
      cells2[i-1].setAttribute("_oldCls","unSelectDay");
      cells2[i-1].innerText=i>9?i:"0"+i;
      //匹配用户自定义样式
      var dtStr=year+"|"+(month+1)+"|"+i;
      if((","+styleData.join(',')+",").indexOf(","+dtStr+",")>-1){
        cells2[i-1].className="unSelectDay "+dataStyle[dtStr];
        cells2[i-1].setAttribute("_oldCls","unSelectDay "+dataStyle[dtStr]);
      }
    }
    //如果是当前月则选中当日
    if(new Date().getMonth()==month){
      curSelEl=cells2[new Date().getDate()-1];
      curSelEl.className="selectDay";
    }
    for(var j=i-1;j<31;j++){
      cells1[j].className=cells2[j].className="";
      cells1[j].innerHTML=cells2[j].innerHTML="  ";
    }
    $(pos).onclick=function(e){e=e||event;changeInfo(e)}
  }
  //根据选择的值进行周次和周几的调整,函数根据点击位置判断
  var changeInfo=function(e){
    var el=e.target||e.srcElement;  //最后一个e：可能是传入的对象
    var day=el.innerText;
    if(!/^\d{1,2}$/.test(day)) return;  //如果不是日期什么都不做
    //恢复之前选中日期的样式
    if(curSelEl){curSelEl.className=curSelEl.getAttribute("_oldCls")}
    curSelEl=el;  //保存当前处理的元素
    //更新选中日期的样式
    el.className="selectDay";
    var dt=new Date($("year").value,$("month").value-1,day);
    //更新信息
    //$("day").value=day;  //日期
    $("weekday").value=['日','一','二','三','四','五','六'][dt.getDay()];  //星期几
    $("week").value=calWeek(dt);  //第几周
  }
  //键盘事件监听
  var listenKey=function(e){
    var keyCode=(e||event).keyCode;
    var p=curSelEl.parentNode.cells;
    var cellIndex;
    if(keyCode=="37"){  //left
      cellIndex=curSelEl.cellIndex!=0?curSelEl.cellIndex:p.length;
      doClickEvent(p[cellIndex-1])
    }
    if(keyCode=="39"){  //right
      cellIndex=curSelEl.cellIndex!=(p.length-1)?curSelEl.cellIndex:-1;
      doClickEvent(p[cellIndex+1])
    }
  }
  //初始化函数
  var init=function(){
    var curDate=new Date(),curYear=curDate.getFullYear();
    //显示上下十年
    for(var i=-10;i<10;i++){$("year")[$("year").length]=new Option(curYear+i,curYear+i)}
    $("year").selectedIndex=10;  //默认选中当前年份
    $("month").selectedIndex=curDate.getMonth();  //当前月份
    //$("day").value=curDate.getDate();  //当前日期
    $("weekday").value=['日','一','二','三','四','五','六'][curDate.getDay()];  //当前星期几
    $("week").value=calWeek();  //当前第几周
    //改变日期或年份更新日期列表
    $("year").onchange=$("month").onchange=function(){displayDayList($("year").value,$("month").value,"daysList")};
    //显示当月日期列表,并高亮当天的日期
    displayDayList(curDate.getFullYear(),curDate.getMonth()+1,"daysList");
    attachEvent("keydown",listenKey,document);  //添加监听keydown键盘事件
  };
  //初始化
  attachEvent("load",init);
  //对外设定样式的接口。
  //格式：([2007,10,12],"color:#f00") ([[2007,10,20],[2007,11,25]],"color:#00f")
  //如果月份小于10不要带0
  var setDateStyle=function(dateArr,style){
    if(typeof dateArr!="object")return;
    if(dateArr instanceof Array){
      if(dateArr[0] instanceof Array){
        for(var i=0;i<dateArr.length;i++) setDateStyle(dateArr[i],style);
        return;
      }
      var dataStr=dateArr.join('|');
      styleData.push(dataStr);
      dataStyle[dataStr]=style;
      return;
    }
  }
  //对外接口
  return {setDateStyle:setDateStyle}
})();

//测试样式设定
logDateControl.setDateStyle([[2007,12,15],[2007,11,12]],"test");

Yemoo'S JS Blog 2008-05-22 10:49 发表评论

模拟实现Array的sort方法

Yemoo'S JS Blog — Tue, 18 Dec 2007 15:48:00 GMT

JavaScript的Array对象有一个sort方法，用于实现对数组元素的排序，该方法默认按照数组项ASCII 字符顺序升序排列。
如[6,7,9,1,-1].sort();执行后数组变为[-1,1,6,7,9]。

对于需要降序排列或非字符串排序，该方法就不能很好的执行了。

当然，sort有一个可选参数，它能帮我们解决这个问题，通过为sort传入一个函数，sort根据函数返回值进行排序。

数组为该函数默认传入数组中的两个元素，如传入a,b，如果函数返回值大于0，则排序方式为b,a，如果返回值小于0，则排序结果为a,b。

具体含义不好解释，当初我也对这个sort其到底是怎么排序的不理解。

如果知道了其实现过程，就对他的排序原理明了了。

sort的实现其实很像是一个简单的冒泡排序。

偶今日对其进行了模拟，看懂这个函数你一定就明白sort的原理了。

Yemoo'S JS Blog 2007-12-18 23:48 发表评论

写了一个layout，拖动条连贯，内容区可为iframe

Yemoo'S JS Blog — Mon, 25 Jun 2007 01:33:00 GMT

摘要: 写一个layout本来是一个很简单的事情，可这次的一个layout问题确让我为难了许久才做出来，下面来大概讲解一下问题的出现与解决过程。注：本文代码皆基于jquery实现。按照普通的方法写一个layout，一般是用一个table来实现，用中间的td拖动来控制左右两个td的大小，这个问题简单，很快就搞定。代码如下： 1 阅读全文

Yemoo'S JS Blog 2007-06-25 09:33 发表评论

判断输入数据是否货币并自动添加￥符号

Yemoo'S JS Blog — Mon, 07 May 2007 08:02:00 GMT

经典上的一位朋友提出的问题，偶以前正好写过一个股票系统处理过一些货币数据，现在记忆犹在，所以就帮忙解决了。自己也保存再次，以便以后使用。

Yemoo'S JS Blog 2007-05-07 16:02 发表评论

js类中获取外部函数名

Yemoo'S JS Blog — Thu, 19 Apr 2007 04:56:00 GMT

比如我们要在一个类中设定一个方法可以根据调入一个方法保存在类变量中，等需要的时候可以通过访问类变量来得到。
通常如果我们生成一个实例
如：var temp=new TopnetTree();
如果我们通过设定属性的方式来传入一个方法，会发现传入的是一个函数的内容，而非函数名。
如temp.fileAction=fnTest; //fnTest是一个函数

于是偶就写了一个方法来实现此功能。
通过arguments来判断判断传入内容：
实现如下功能：
传入内容为空，不执行任何内容
传入一个参数，则表示是一个无参数的函数
传入多个参数，则表示第一个参数位函数名，后面的为各个参数。

1 TopnetTree.prototype.setFileAction=function(){
2     var fnName,fnArgs="";
3     if(arguments.length==0){
4         return 0;
5     }else if(arguments.length==1){
6         fnName=arguments[0];
7     }else{
8         fnName=arguments[0];
9         for(var i=1;i<arguments.length;i++){
10             fnArgs+=","+arguments[i];
11         }
12         fnArgs=fnArgs.replace(",","");
13     }
14
15     this.fileAction=fnName+"("+fnArgs+")";
16 }

Yemoo'S JS Blog 2007-04-19 12:56 发表评论

花了两个小时才完成的qq菜单效果--失败啊。。

Yemoo'S JS Blog — Wed, 24 Jan 2007 08:18:00 GMT

这么一个简单的效果就花了偶两个多小时，失败。。。
看来还是写的太少，眼高手低！！
以后还要多动手写，不能只知道实现方法就pass了

废话少说，代码如下(这个可是结构，样式，行为相分离哦)：

<!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>
<title> new document </title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
*{margin:0px;padding:0px;}
#menu{
font-size:12px;
list-style-type:none;
width:100px;text-align:center;
}
#m1,#m2,#m3,#m4{
border:1px solid #666;
height:20px;line-height:20px;
background:#ccc;width:98px;
}
#m1_sub,#m2_sub,#m3_sub,#m4_sub{
display:inline-block;
}
ul#menu li ul li{
border:1px solid #999;
height:20px;line-height:20px;
background:#efefef;list-style-type:none;
}
</style>
<script type="text/javascript">
function toggleMenu(){
var aTitle=new Array();
if(arguments.length==0) return false;
//获取对象
var $=function(id){
return document.getElementById?document.getElementById(id):document.all[id];
}
//将获取参数转换为数组
for(var i=0;i<arguments.length;i++){
aTitle[aTitle.length]=arguments[i];
}
for(var i=0;i<aTitle.length;i++){
$(aTitle[i]+"_sub").style.display="none"; //初始化为所有菜单隐藏
//添加事件
$(aTitle[i]).onclick=function(){
toggleIt(); //主处理函数
}
}
var toggleIt=function(){
var evt=window.event||toggleIt.caller.arguments[0];
var evtElm=evt.srcElement||evt.target;
for(var i=0;i<aTitle.length;i++){
if(evtElm&&evtElm.id!=aTitle[i]){
$(aTitle[i]+"_sub").style.display="none";
}else{ //点击对象如果就是当前遍历对象
$(aTitle[i]+"_sub").style.display=($(aTitle[i]+"_sub").style.display=="none"?"":"none");
}
}
}
}
window.onload=function(){
//调用方法，在参数中逐个加入主标题id，注意，对应内容必须为“主标题id+"_sub"”
toggleMenu("m1","m2","m3","m4");
}
</script>
</head>
<body>
<ul id="menu">
<li id="m1">菜单1</li>
<li id="m1_sub">
<ul>
<li>11111111111</li>
<li>11111111111</li>
</ul>
</li>
<li id="m2">菜单2</li>
<li id="m2_sub">
<ul>
<li>22222222222</li>
<li>22222222222</li>
</ul>
</li>
<li id="m3">菜单3</li>
<li id="m3_sub">
<ul>
<li>33333333333</li>
<li>33333333333</li>
</ul>
</li>
<li id="m4">菜单4</li>
<li id="m4_sub">
<ul>
<li>44444444444</li>
<li>44444444444</li>
</ul>
</li>
</ul>
</body>
</html>

（提示：运行看不到效果请刷新一下）

Yemoo'S JS Blog 2007-01-24 16:18 发表评论

写了一个还原html代码的正则

Yemoo'S JS Blog — Wed, 24 Jan 2007 07:25:00 GMT

今天看到蓝色有人问这个问题，偶就试着写了一个，感觉正则的replace+function方式挺方便简洁，代码如下：

Yemoo'S JS Blog 2007-01-24 15:25 发表评论

写了js过滤重复字符的函数

Yemoo'S JS Blog — Sat, 20 Jan 2007 13:10:00 GMT

比较简单，主要使用数组和字符串的indexOf来逐个查询对比。

Yemoo'S JS Blog 2007-01-20 21:10 发表评论

JS实现网页元素阴影效果的研究总结

Yemoo'S JS Blog — Fri, 19 Jan 2007 18:49:00 GMT

前两天由于一个小项目想为一元素添加一个阴影效果,但是记得看过某高人写的"用Div/CSS模拟阴影效果"文章，现在还有一点印象，其思路很简单，主要是利用几个层的定位偏移来实现的阴影特效，于是偶就想能不能封装成一个js函数，方便在每个html对象上调用．
　　开始偶以为很简单，但实现过程中确遇到了很多问题，其中最严重的就是浏览器的兼容问题，整整耗了偶整个晚上加半个通宵的时间才搞定，汗呢！不过从这个小东西让我对js及一些浏览器之间的差异及解决办法有了更多更深刻的认识．
总结于此，以备以后查看方便！
代码如下：

<!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></title>
<style type="text/css">
*{
margin:0px;
}
#msgdiv{
border:1px solid #d3d3d3;
text-align:center;font-size:12px;
width:150px;line-height:50px;
background:#f7f7f7;color:#f00;
}
.content{
border:1px solid #999;
background:#f0f0f0;
width:150px;height:50px;
}
</style>
<script type="text/javascript">
function addShadow(){
var obj;
if(arguments.length==1){
obj=document.getElementById?document.getElementById(arguments[0]):document.all[arguments[0]];
}
else if(arguments.length>1){
for(var i=0;i<arguments.length;i++){
addShadow(arguments[i]);
}
}else{
return false;
}
if(!obj) return false;
//浏览器检测
var userAgent=navigator.userAgent.toLowerCase();
var isOpera=userAgent.indexOf('opera')>-1;
var isIE=userAgent.indexOf('msie')>-1&&!isOpera;
//var isKHTML=userAgent.indexOf('khtml')>-1||userAgent.indexOf('konqueror')>-1||userAgent.indexOf('AppleWebKit')>-1;
//var isMoz=userAgent.indexOf('gecko')>-1&&!isKHTML; // FF||Netscape
var isNS=userAgent.indexOf("netscape")>-1;
//获取对象的所占的总宽和高（包括边框）
var objWidth=obj.offsetWidth;
var objHeight=obj.offsetHeight;
//对象的绝对位置（元素相对浏览器的像素值）
var objL=0;
var objT=0;
//获取元素的Left和Top值的函数
var getLT=function(tempObj){
if(!tempObj) return false;
var LL=0,TT=0;
if(isIE||isOpera){ // IE||Opera
while(tempObj!=null&&tempObj.nodeName!="#document"){
LL+=tempObj.offsetLeft;
TT+=tempObj.offsetTop;
tempObj=tempObj.parentNode;
}
}else{ // FF||Netscape
TT=tempObj.offsetTop;
LL=tempObj.offsetLeft;
}
return {T:TT,L:LL};
}
//读取元素的Top和Left值
var temp=getLT(obj);
objL=temp.L;
objT=temp.T;
//创建三个阴影层及内部一个与元素大小相同的白色背景层 （从外层到内层）
var div1=document.createElement("div");
var div2=document.createElement("div");
var div3=document.createElement("div");
var div4=document.createElement("div");
var addCssText=function(obj,cssText,append){ //append:0覆盖原来的style值(默认)，1追加到原style值后
if(!obj) return false;
if(!isOpera){ //Opear不支持cssText属性设置
if(!append){
obj.style.cssText=cssText;
}else{
obj.style.cssText+=cssText
}
}else{
if(!append){
obj.setAttribute("style",cssText);
}else{
obj.setAttribute("style",obj.getAttribute("style")+";"+cssText);
}
}
}
//定义阴影部分通用样式
var sCssText="width:100%;height:100%;position:absolute;margin:0px;padding:0px;top:-1px;left:-1px";
//定义三个阴影层的颜色及最外层位置（因为阴影向坐上偏移3个像素，所以要加上3）和高宽
addCssText(div1,"position:absolute;left:"+(objL+3)+"px;top:"+(objT+3)+"px;width:"+objWidth+"px;height:"+objHeight+"px;background:#eee");
addCssText(div2,sCssText+";background:#ddd");
addCssText(div3,sCssText+";background:#ccc");
addCssText(div4,sCssText+";background:#fff"); //白色背景层
if(isIE||isNS){ //IE||NS
addCssText(div1,";z-index:-1",1);
}else{  //FF||Netscape
//创建一个与原对象内容完全相同的对象并写入原位置
var newNode=obj.cloneNode(true);
newNode.removeAttribute("id"); //删除id属性，防止id冲突
addCssText(newNode,"visibility:hidden",1);
obj.parentNode.insertBefore(newNode,obj);
//在非IE/NS中的Bug的解决办法（P标记默认在body范围内偏移，而body有时有margin）
if(newNode.tagName=="P"){
var BodyMargin=(document.documentElement.offsetHeight-document.body.offsetHeight)/2;
objT=objT-BodyMargin;
}
//设定层的索引大于层默认值0
addCssText(obj,"position:absolute;z-index:2;left:+"+objL+"px;top:"+objT+"px",1);
}
//创建阴影及内容
div1.appendChild(div2);
div2.appendChild(div3);
div3.appendChild(div4);
document.body.appendChild(div1);
}
window.onload=window.onresize=function(){
addShadow("test","add","go","ddd","img","newp")
};
</script>
</head>
<body>
<p id="ddd" onclick="alert(document.body.innerHTML);">kkkkk</p>
<br />
<div style="position:absolute;left:200px;top:250px;width:150px;height:150px;border:1px solid #f00" id="go">safasdf</div>
<br />
<div class="content" id="test">dsfgsdfg</div>
<br />
<div id="add" style="border:1px solid #000;background:#fff">aaaaaaaaaaaaaaaaaaa</div>
<br>
      </img>
<p id="newp" style="width:300px;height:50px;border:1px solid #00f">aaaaaaaaaaa</p>
</body>
</html>

(打开请如没有效果请先刷新一下)

设计的主题思路是：
对于需要添加阴影的元素:
IE/NS:创建一个与元素大小相同位置相同的层，并利用偏移的方法使该层实现阴影，然后根据对元素的绝对位置判断将层定位到相同的位置并设置z-index=-1；从而实现阴影效果．
FF/Opear：思路同上，但因为FF/Opear不支持z-index:-1，所以必须通过将原来元素的z-index设为大于０的值（需要将元素设为绝对定位）从而达到覆盖阴影层的效果，因为要设置z-index，必须将元素设为绝对定位，因此这里就比较麻烦了，偶的解决办法是先克隆一个元素完全相同的内容，并将其设为隐藏（使用visibility:hidden）但仍然占位，然后放到原元素的位置，而把原元素设为绝对定位并设定z-index的值大于０．

在制作过程中遇到很多问题，其中主要问题有：
１，style.cssText属性只有除opera外的浏览器才支持，
２，offsetleft和offsetTop在IE/Opear和FF及NS中解释不同．
（还包括一些不同浏览器出现的小bug，解决办法见上篇日志）

不过好在都一一解决了！现在能兼容大多数浏览器的新版本．偶在IE6.0,FF2.0,NS8.1,Opear9.0下测试通过．

Yemoo'S JS Blog 2007-01-20 02:49 发表评论

写了一个自定义长度的文本自动换行的函数。

Yemoo'S JS Blog — Wed, 03 Jan 2007 14:25:00 GMT

很多朋友在制作网页过程中总是发现某些时候一些英文会把原来好好的表格撑开而导致变形，虽然可以使用style="table-layout:fixed;word-wrap:break-word;word-break:break-all" 来解决这个问题，但有些时候会导致内容显示不完整而被隐藏了起来，并没有做到自动换行的效果。

于是偶就想写一个这样的函数来修补这个缺陷，这个函数很简单，但这里只是提供一种思路来解决这个问题。

function fnAddBr(id, iPerLineLen){.....}

id为要修改的文本块的id，iPerLineLen为每行的长度

代码如下：

<!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=gb2312" />
  <title>Untitled Document</title>
 </head>
 <body>
 <script type="text/javascript">    
 //函数功能：在指定长度处自动添加换行符，以英文长度为准，及8代表8个英文或4个汉字
     function fnAddBr(id, iPerLineLen){
        var sStr=document.getElementById(id).innerHTML;
        if(sStr.replace(/[^\x00-\xff]/g,"xx").length <= iPerLineLen){
            return -1;
        }
    
        var str="";
        var l=0;
        var schar;
        for(var i=0;schar=sStr.charAt(i);i++){
            str+=schar;
            l+=(schar.match(/[^\x00-\xff]/)!=null?2:1);
            if(l>= iPerLineLen){
                str+="<br />\n";
                l=0;
            }
        }
        document.getElementById(id).innerHTML=str;
    }
     </script>
 <div id="content" style="border:1px solid #ccc">
我在做网页的时候添加的内容在生成网页后总是横向把表格撑的很宽，很难看； 
我在加了 
style="table-layout:fixed;word-wrap:break-word;word-break:break-all"

这个代码后，表格倒是不会撑宽了，可是内容又显示不完全了，只是显示表格一样的宽度的内容，其他的被遮挡或是过滤掉了。 
我的是汉字，这个有关系吗？

请问有什么方法可以让在表格中的文字到多少字的时候就自动换一行？或是能换行又不撑大表格，而且不略去内容！

我的内容是在动易中调用的{$ArticleContent}这个标签！
 </div>
 
 <div id="content1" style="border:1px solid #ccc">
我在做网页的时候添加的内容在生成网页后总是横向把表格撑的很宽，很难看； 
我在加了 
style="table-layout:fixed;word-wrap:break-word;word-break:break-all"

请问有什么方法可以让在表格中的文字到多少字的时候就自动换一行？或是能换行又不撑大表格，而且不略去内容！

我的内容是在动易中调用的{$ArticleContent}这个标签！
 </div>

Yemoo'S JS Blog 2007-01-03 22:25 发表评论

模仿百万格子小的一小段代码

Yemoo'S JS Blog — Tue, 02 Jan 2007 16:41:00 GMT

关键是得出每个图片的坐标位置，这只是一个简单的实现，更百万格子的功能还相差甚远。

<!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=iso-8859-1" />
  <title>Untitled Document</title>
  <style type="text/css">
   *{margin:0px;padding:0px}
   table#tab{
    border:solid #ccc;
    border-width:1px 0px 0px 1px;
   }
   table#tab tr td{
    border:solid #ccc;
    border-width:0px 1px 1px 0px;
   }
  </style>
  <script type="text/javascript">
   function fnMakeTb(){ //生成表格100行50列，实际宽度为20（边框1+宽19）
   var sTabStr="<table cellpadding=\"0\" cellspacing=\"0\" id=\"tab\">";
   for(var i=0;i<100;i++){
    var tempStr="<tr>";
    for(var j=0;j<50;j++){
     tempStr+="<td style=\"width:19px;height:19px\"> </td>";
 
    }
    tempStr+="</tr>"
    sTabStr+=tempStr;
 
   }
   document.getElementById("aa").innerHTML=sTabStr;  //输出表格
 
   }
   
   var iCurX=0; //当前可用x坐标
   var iCurY=0; //当前可用y坐标
   var iMaxY=0; //当前最大y值
   function fnLocatePic(url){
   var obj=document.createElement("IMG");
   obj.src=url;
   //获取图片的宽高
   var w=obj.width;
   var h=obj.height;
   //计算占用格子的宽高，必须是20的倍数
   var divW=(w%20>1?(Math.floor(w/20)*20+20):w);
   var divH=(h%20>1?(Math.floor(h/20)*20+20):h);
   
   var x,y; //当前元素（图片）的坐标
   if(iCurX+divW>1000){ //当前行的格子使用完，换行显示，x重新从0开始计，更新当前y值为最大y值
    x=0;
    y=iCurY=iMaxY;
 
   }else{
    x=iCurX;
    y=iCurY;
 
   }
   iCurX=x+divW; //计算下一个元素（图片）x坐标
   if(y+divH>iMaxY){
    iMaxY=y+divH; //将当前最大y值赋予iMaxY
 
   }
   document.write("<div style=\"position:absolute;width:"+divW+"px;height:"+divH+"px;top:"+y+"px;left:"+x+"px;\"></div>");
 
   }
  </script>
 </head>
 <body>
  <div id="aa">
  <script type="text/javascript">
  fnMakeTb(50,50,1);
  fnLocatePic("http://gg.blueidea.com/2006/chinaok/208x32.gif");
  fnLocatePic("http://bbs.blueidea.com/images/blue/newtopic.gif");
  fnLocatePic("http://bbs.blueidea.com/images/blue/smilies/biggrin.gif");
  fnLocatePic("http://bbs.blueidea.com/images/blue/reply.gif");
  fnLocatePic("http://bbs.blueidea.com/images/blue/discuz_icon.gif");
  fnLocatePic("http://bbs.blueidea.com/images/blue/logo.gif");
  fnLocatePic("http://gg.blueidea.com/logo/netfriends/logo.gif");
  fnLocatePic("http://gg.blueidea.com/logo/computerarts/logo.gif");
  fnLocatePic("http://pages.blueidea.com/articleimg/2007/01/1403/preview_s01.jpg");
  fnLocatePic("http://gg.blueidea.com/2006/qihoo/blueidea.gif");
  fnLocatePic("http://gg.blueidea.com/2006/chinaok/468x60.gif");
  fnLocatePic("http://pages.blueidea.com/articleimg/2006/12/1399/preview_s01.jpg");
  fnLocatePic("http://gg.blueidea.com/desk/2006/002.jpg");
  fnLocatePic("http://www.blueidea.com/articleimg/2006/09/4088/00.gif");
  fnLocatePic("http://gg.blueidea.com/logo/netfriends/logo.gif");
  fnLocatePic("http://gg.blueidea.com/logo/computerarts/logo.gif");
  fnLocatePic("http://bbs.blueidea.com/customavatars/hutia.gif");
  fnLocatePic("http://bbs.blueidea.com/images/blue/smilies/frown.gif");
  fnLocatePic("http://bbs.blueidea.com/images/blue/smilies/cool.gif");
  fnLocatePic("http://bbs.blueidea.com/images/blue/alipay_icon.gif");
  fnLocatePic("http://www.blueidea.com/gg/blueidea/2004/painter.jpg");
  fnLocatePic("http://www.blueidea.com/articleimg/2003/07/425/2003.gif");
  </script>
  </div>
 </body>
</html>

Yemoo'S JS Blog 2007-01-03 00:41 发表评论

无聊用js写了一个画图函数--兼容FireFox

Yemoo'S JS Blog — Sun, 03 Dec 2006 06:22:00 GMT

早晨醒来突然想写一个画图函数，以前在网上看到有人做过，但都是用VML做的，只有ie支持。
偶这个是用

形成的绝对定位的点画出来的，兼容各种浏览器。

<!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>Untitled 1</title>
<style type="text/css">
.style1 {
    font-size: x-small;
}
</style>
</head>

<body>
<span class="style1">
<script type="text/javascript">
function makedot(x,y){ //画点函数
 document.write("<div style='height:1px;position:absolute;left:"+x+"px;top:"+y+"px;width:1px;background:#f00;overflow:hidden'></div>")
}

/**
 函数功能：根据给定的圆心和半径画圆
 函数思路：根据半径及圆心坐标利用数学方法计算从0°到360°的每点的坐标，并画出来。
*/
function circle(x,y,r){ //(x,y)圆心，r半径
 var dotx,doty,radio;
 var Pi=Math.PI;
 makedot(x,y);
 for(var i=0;i<360;i+=0.5){
  radio=i*Pi/180;
  dotx=r*Math.cos(radio)+x;
  doty=r*Math.sin(radio)+y
  makedot(dotx,doty);
 }
}

/**
 函数功能：根据指点矩形左上角坐标及长宽绘制矩形。
 函数思路：根据左上坐标及长宽，计算横纵向边每点的坐标
*/
function rect(x,y,w,h){ //(x,y)左上角坐标,w,h 宽与高
 for(var i=0;i<w;i++){
  makedot(x+i,y);
  makedot(x+i,y+h);
 }
 for(var i=0;i<h;i++){
  makedot(x,y+i);
  makedot(x+w,y+i);
 }
}

/**
 函数功能：根据两点坐标画直线。
 函数思路：根据两点的坐标计算机斜率，然后根据第一个点坐标及斜率计算直线上所有点然后画线。垂直线特殊处理
*/
function line(x1,y1,x2,y2){
 var slope=(y2-y1)/(x2-x1); //斜率
 var diff=x2-x1;
 if(x1<x2){
  for(var i=0;i<diff;i++){
   makedot(x1+i,y1+slope*i);
  }
 }else if(x1>x2){
  for(var i=0;i>diff;i--){
   makedot(x1+i,y1+slope*i);
  }
 }else{ //画垂直线
  var temp=y2-y1;
  if(temp>0){
   for(var i=0;i<temp;i++){
    makedot(x1,y1+i);
   }
  }else{
   for(var i=0;i>temp;i--){
    makedot(x1,y1+i);
   }
  }
 }
}

/**
 函数功能：根据给定的三点坐标画三角形
 函数思路：直接利用画线函数画三条线即可
*/
function triangle(x1,y1,x2,y2,x3,y3){
 line(x1,y1,x2,y2);
 line(x2,y2,x3,y3);
 line(x1,y1,x3,y3);
}

/**
 函数功能：根据给定的一系列坐标点画多边形
 函数思路：循环读取坐标点，在当前坐标点与下一坐标点之间连线
*/
function polygon(){
 var args=arguments.length;
 if(args%2!=0) return -1;
 var realargs=args/2; //坐标个数
 for(var i=0;i<realargs-1;i++){
  line(arguments[i*2],arguments[i*2+1],arguments[i*2+2],arguments[i*2+3]);
 }
 line(arguments[i*2],arguments[i*2+1],arguments[0],arguments[1]);
}
circle(500,500,200);
rect(100,100,200,100);
triangle(200,200,100,400,300,400);
polygon(300,300,400,100,600,100,700,300,600,500,400,500);
</script>
</span>
</body>

</html>

Yemoo'S JS Blog 2006-12-03 14:22 发表评论

写了一个根据内容自动生成表格的函数

Yemoo'S JS Blog — Sat, 02 Dec 2006 18:18:00 GMT

晚上突然看到以前做asp时写的一个根据数据库数据自动生成表格的程序。
要求是：
1，对于空内容，应该写为" ",否则在ie会显示的很变态（ie当作该单元格不存在）。
2，当输出数据条数不等于表格的“长X宽”时，用" "自动填补最后一行空余的地方。

其实也很简单，当时做asp时用了一个较复杂的算法（下面代码中MakeTable2），今天又想到一个更容易理解的算法（MakeTable1）,今天用js实现了下，不过郁闷的是感觉效率上都一样，这样还是用第一个比较好（容易理解，代码少）。
代码如下：

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>Untitled 1title>
<style type="text/css">
.style1 {
    font-size: x-small;
}
style>
head>

<body>
<span class="style1">
<script type="text/javascript">
/*
    函数作用：根据数组内容自动调整表格大小,对于空内容写入占位符，对于最后不足整行的用空单元格补足。
    函数思路：首先计算数组长度，并根据要显示列数计算实际需要行数，然后循环输出行列并根据索引输出数组元素，
             如果当前数组索引不小于数组长度或当前数组值为空则写入占位符单元格。
*/
function makeTable1(cols,a){    //cols为列数，a应该是一个用逗号分开的字符串
    //alert(a.split(',').length);
    var t1=new Date().getTime();
    a=a.split(',');    //显式转换为数组,否则ie不能识别为数组
    var l=a.length;    //得到数组的长度
    var rows=parseInt(l/cols)+(l%cols==0?0:1);    //计算出行数

    var outStr=""1\" align=\"center\">";
    for(var i=0;i<rows;i++){
        outStr+="";
        for(var j=0;j<cols;j++){
            var temp=cols*i+j;    //计算当前索引
            outStr+=(""80\" align=\"center\" height=\"80\">"+( (temp<l&&a[temp]!='') ? a[temp]:" ")+"");
        }
        outStr+=""
    }
    outStr+="";
    document.write(outStr+"
执行时间："+(new Date().getTime()-t1)+"
");
    //alert(rows);
}
/*
    函数作用：同上
    函数思路：计算数组长度，然后根据长度循环输出元素值，如果当前循环变量值是列数的整数倍（余数为0），
             则输出行结束标记。否则输出列信息。然后计算当前循环变量值是否是列数的整数倍，如果不是，利用循环补足。直至补齐。
*/
function makeTable2(cols,a){
    var t2=new Date().getTime();
    a=a.split(',');
    var l=a.length;
    var outStr=""1\" align=\"center\">";
    for(var i=0;i<l;i++){
        var temp=(i+1)%cols;
        if(i==0||temp==1){
            outStr+="";
        }

        outStr+=(""80\" height=\"80\" align=\"center\">"+a[i]+"");

        if(temp==0){
            outStr+="";
        }
    }

    var x=i%cols;
    if(x!=0){
        for(var i=0;i<(cols-x);i++){
            outStr+=" ";
        }
        outStr+=""
    }
    outStr+=""
    document.write(outStr+"
执行时间："+(new Date().getTime()-t2)+"
");
}
var str="a,b,c,d,e,v,f,s,e,d,s,d,e,d,a,b,c,d,e,v,f,s,e,d,s,d,e,a,b,c,d,e,v,f,s,e,d,s,b,c,d,e,v,f,s,e,d,s,d,e,d,a,b,c,d,e,v,f,s,e,d,s,d,e,a,b,c,d,e,v,f,s,e,d,s,b,c,d,e,v,f,s,e,d,s,d,e,d,a,b,c,d,e,v,f,s,e,d,s,d,e,a,b,c,d,e,v,f,s,e,d,s,s,e,d,s,d,e,a,b,c,d,e,v,f,s,e,d,s,b,c,d,e,v,f,s,e,d,s,d,e,d,a,b,c,d,e,v,f,s,e,d,s,d,e,a,b,c,d,e,v,f,s,e,d,s";
str+=str;
str+=str;
makeTable1(5,str);
makeTable2(5,str);
script>
span>
body>

html>

Yemoo'S JS Blog 2006-12-03 02:18 发表评论

在password表单内显示提示信息的解决办法

Yemoo'S JS Blog — Thu, 28 Sep 2006 06:00:00 GMT

经典有人要这个代码，考虑到password中输入的内容会显示为*号，所以要想办法解决*的问题。当初想用setAttribute动态修改type属性达到效果，再ff下测试成功，但没想到setAttribute对type属性的修改在ie中无效。最终采用背景图片的方式解决了这个。即为password设定一个背景图片，图片文字为提示信息
如：

，当鼠标放上时不显示背景图片。
代码如下：

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

<head>
  <title></title>
  <style type="text/css">
  *{
  margin:0px;padding:0px;font-size:12px;
  }
    input{
      width:150px;height:20px;line-height:20px;border:1px solid #ccc;
    }

</style>
</head>

<body>
<script language="javascript">
function chgForm(id){
    if(document.getElementById(id).value=="密码长度必须在3-18位之间")
        document.getElementById(id).value="";
    document.getElementById(id).setAttribute("type","password");

}
function chkForm(id){
    if(document.getElementById(id).value.length==0){
        document.getElementById(id).setAttribute("type","text");
        document.getElementById(id).value="密码长度必须在3-18位之间";
    }
}
function chkFormpic(id){
    if(document.getElementById(id).value.length==0){
        document.getElementById(id).style.background='url(tips.gif) no-repeat';
    }
}
</script>
<br />
姓名：<input type="text" id="username" value="姓名长度最多16个字符" onfocus="this.select()" />
<br /><br />
动态修改input的type属性（仅在ff下有效）：
<br />
密码：<input type="text" id="password" onmouseover="chgForm('password')" value="密码长度必须在3-18位之间" onmouseout="chkForm('password')" />

<br /><br />图片提示(在ff/ie下均有效）：<br />
密码：<input type="password" id="p1" onmouseover="this.style.background=''" style='background:url(tips.gif) no-repeat'  onmouseout="chkFormpic('p1')" />
</body>
</html>

演示效果可以看：http://bbs.blueidea.com/thread-2679362-1-1.html

Yemoo'S JS Blog 2006-09-28 14:00 发表评论

回蓝色经典一网友提的问题，偶写了一个表单动态输入提示

Yemoo'S JS Blog — Thu, 28 Sep 2006 03:17:00 GMT

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

<head>
  <title></title>
  <style type="text/css">
  *{
  margin:0px;padding:0px;font-size:12px;
  }
    input{
      width:100px;height:20px;border:1px solid #ccc;
    }

</style>
</head>

<body>
<script language="javascript">
function tips(id,str){
var l=document.getElementById(id).offsetLeft+120;
var t=document.getElementById(id).offsetTop;
document.getElementById("tips").innerHTML="提示："+str;
document.getElementById("tips").style.left=l+"px";
document.getElementById("tips").style.top=t+"px";
document.getElementById("tips").style.display="";
}
function outtips(){
    document.getElementById("tips").style.display='none';
}
</script>
<div id="tips" style="position:absolute;border:1px solid #ccc;padding:0px 3px;color:#f00;display:none;height:20px;line-height:20px;background:#fcfcfc"></div>
<br />
姓名：<input type="text" id="username" onfocus="tips('username','姓名长度最多16个字符')" onblur="outtips()" />
<br />
密码：<input type="password" id="password" onfocus="tips('password','密码长度必须在3-18位之间')" onblur="outtips()" />
</body>
</html>

比较简单，自己闲着无聊写的，很久没有写过代码了。。。。

Yemoo'S JS Blog 2006-09-28 11:17 发表评论

用resizeTo和moveTo两个函数实现窗口的“打乒乓球”效果

Yemoo'S JS Blog — Sun, 02 Jul 2006 11:18:00 GMT

看js事件时看到了resizeTo和moveTo两个函数及window.screen.height/window.screen.width等几个属性突然想到的这个效果，花了偶一点功夫终于写出来了，感觉挺好玩，呵呵。。。

Yemoo'S JS Blog 2006-07-02 19:18 发表评论

关于复选框的实用效果

Yemoo'S JS Blog — Fri, 30 Jun 2006 14:08:00 GMT

在很多网站里这都是一个很常见的效果，就是点击总分类的复选框，自动选择所有子分类的复选框，或者如果子分类的所有复选框全部被选中则总分类复选框也自动被选中。
这次偶时再msn的网站上偶然看到的，于是自己也试着写了下，代码如下：

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" xml:lang="en" lang="en">

<head>
  <title>title>
  <script type="text/javascript">
    function checkAll(str){
        var a=document.getElementById("t"+str).getElementsByTagName("input");
        var b=document.getElementById("d"+str);
        for(var i=0;i<a.length;i++){
            a[i].checked=b.checked;
        }
    }

    function fixChk(str){
        var a=document.getElementById("t1").getElementsByTagName("input");
        var b=document.getElementById("d1");
        for(var i=0;i<a.length;i++){
            if(a[i].checked==false){
                b.checked=false;
                return ;
            }
        }
        b.checked=true;
    }
  script>
head>

<body>
<center>
<div style="width:90%;text-align:left;border:1px solid #ccc;height:25px;line-height:25px"><input type="checkbox" id="d1" onclick="checkAll('1')"/>休闲娱乐div>
<div style="width:90%;text-align:left;border:1px solid #ccc;" id="t1">
  <input type="checkbox" onclick="fixChk('1')" />书籍及杂志
  <input type="checkbox" onclick="fixChk('1')" />音乐及影碟
<br />  <input type="checkbox" onclick="fixChk('1')" />旅游
div>
center>
body>

html>

Yemoo'S JS Blog 2006-06-30 22:08 发表评论

使用Dom改变超链接前面文本框的值

Yemoo'S JS Blog — Fri, 30 Jun 2006 10:46:00 GMT

利用dom的树可以不用id就可以修改相关内容，如修改每个超链接前面的文本框的值。

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" xml:lang="en" lang="en">
<head>
<title>title>
head>
<body>
<table>
<tr>
<td>
<input id="hehe" type="text" value="1"><a href="#" onclick="this.previousSibling.value++">+a>
td>
<td>
<input id="hehe" type="text" value="1"><a href="#" onclick="this.previousSibling.value++">+a>
td>
<td>
<input id="hehe" type="text" value="1"><a href="#" onclick="this.previousSibling.value++">+a>
td>
tr>
table>
body>
html>

这里主要使用previousSibling属性访问前一个节点，从而达到改变前一个文本框值的效果。

Yemoo'S JS Blog 2006-06-30 18:46 发表评论

select列表内容按字母倒序排序与按列表倒序排列

Yemoo'S JS Blog — Fri, 30 Jun 2006 10:28:00 GMT

今天51js上有网友贴出了这个问题，原本以为是把内容按字母顺序倒序排列，因为以前看过一篇正序排列的文章，偶就想倒序也应该不难，查看了下资料便很快搞定了问题.

但看回帖后原来楼主没有吧问题描述清楚，他本意是想把列表内容倒序排列，即abcef变成fecba。
开始一位不好解决，突然想起数组有一reverse()函数（将数组内容倒序排列），问题一下子就变的很简单了。

Yemoo'S JS Blog 2006-06-30 18:28 发表评论

td点击背景变色特效（兼容ff/ie）

Yemoo'S JS Blog — Wed, 28 Jun 2006 15:30:00 GMT

代码如下:

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" xml:lang="en" lang="en">

<head>
  <title>title>
  <style type="text/css">
    .class1{
      background:#efefef;
      text-align:center;
      width:80px;
    }
    .class2{
      background: #ffcc00;
      text-align:center;
      width: 80px;
    }
    .class3{
      background: #ffffff;
    }
    .class4{
      background: #ffff00;
    }
  style>
  <script type="text/javascript">
    function addEvent(elm, evType, fn, useCapture){
        if (elm.addEventListener){
            elm.addEventListener(evType, fn, useCapture);
            return true;
        } else if (elm.attachEvent){
            var r = elm.attachEvent("on"+evType, fn);
            return r;
        } else {
            alert("Handler could not be removed");
        }
    }

    function initTd(){
        var sections=document.getElementsByTagName("td");
        for(var i=0;i<sections.length;i++){
            var section=sections[i];
            if(section.getAttribute("t")=="yes"){
                section.className="class1";
                section.nextSibling.className="class3";
                addEvent(section,"click",changeTd);
            }
        }
    }

    function changeTd(ev){
        var ev=ev||window.event;
        var evt=ev.srcElement||ev.target;
        if(evt.tagName=="TD"&&evt.getAttribute("t")=="yes"){
            var sections=document.getElementsByTagName("td");
            for(var i=0;i<sections.length;i++){
                var section=sections[i];
                if(section.getAttribute("t")=="yes"){
                    section.className="class1";
                    section.nextSibling.className="class3";
                    evt.className="class2";
                    evt.nextSibling.className="class4";
                }
            }
        }
    }
  script>
head>
<body>
<table cellpadding="0" cellspacing="0" border="1" bordercolor="#cccccc" style="border-collapse:collapse" align="center" width="300">
<tr><td t="yes">atd><td>this is section atd>tr>
<tr><td t="yes">btd><td>this is section btd>tr>
<tr><td t="yes">ctd><td>this is section ctd>tr>
<tr><td t="yes">dtd><td>this is section dtd>tr>
table>
<script type="text/javascript">
initTd();
script>
body>
html>

Yemoo'S JS Blog 2006-06-28 23:30 发表评论

JS正则表达式提取字符串中所有汉字

Yemoo'S JS Blog — Wed, 28 Jun 2006 10:14:00 GMT

再网上发现有人用vbscript正则表达式实现了这个功能，但代码很厂，偶改成js的了，很短的一段代码：

这里的关键是汉字escape后的编码范围是\u4e00-\u9fa5，知道这个问题就好解决了。

Yemoo'S JS Blog 2006-06-28 18:14 发表评论

跟随滚动条滚动的层(浮动AD效果)

Yemoo'S JS Blog — Wed, 28 Jun 2006 09:22:00 GMT

其实这个效果在很多网站中都能见到，其主要表现为网页两侧的浮动广告。看起来感觉很难做，但其实原理是很简单的，使用定时器没0.1秒检测层的位置并将其置在指定的位置（相对于窗口）。写了一个简单的代码：

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" xml:lang="en" lang="en">
<head>
  <title>title>
head>
<body>
<script type="text/javascript">
function scrollImg(){
    var posX,posY;
    if (window.innerHeight) {
        posX = window.pageXOffset;
        posY = window.pageYOffset;
    }
    else if (document.documentElement && document.documentElement.scrollTop) {
        posX = document.documentElement.scrollLeft;
        posY = document.documentElement.scrollTop;
    }
    else if (document.body) {
        posX = document.body.scrollLeft;
        posY = document.body.scrollTop;
    }

    var ad=document.getElementById("ad");
    ad.style.top=(posY+100)+"px";
    ad.style.left=(posX+50)+"px";
    setTimeout("scrollImg()",100);
}
script>
<p> p>
<p> p>
<p> p>
<p> p>
<p> p>
<p> p>
<p> p>
<p> p>
<p> p>
<p> p>
<p> p>
<p> p>
<p> p>
<p> p>
<p> p>
<p> p>
<p> p>
<p> p>
<p> p>
<p> p>
<p> p>
<p> p>
<p> p>
<p> p>
<div id="ad" style="position:absolute;background:#eeeeee;width:100px;height:100px;border:1px dotted #000;line-height:100px;text-align:center">此广告位招租div>
<script type="text/javascript">
scrollImg();
script>
body>
html>

注意：
if (window.innerHeight) {
        posX = window.pageXOffset;
        posY = window.pageYOffset;
    }
    else if (document.documentElement && document.documentElement.scrollTop) {
        posX = document.documentElement.scrollLeft;
        posY = document.documentElement.scrollTop;
    }
    else if (document.body) {
        posX = document.body.scrollLeft;
        posY = document.body.scrollTop;
    }
这段代码是为了兼容标准，在xhtml页面中，document.body.scrollTop始终为0，即该属性无效，因此必须用其他的属性来判断，为兼容新旧标准，应该对属性的可用性进行判断。

引用网上的一段文字：

应用WEB标准会使ScrollTop属性失效！！！
Transitional//EN"
"" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
" target="_blank">http://www.w3.org/1999/xhtml">

加上这段后，document.body.scrollTop永远等于0

body onscroll = "alert(document.body.scrollTop);"永远也不会引发。

解决办法：

使用：

document.documentElement.scrollTop

示例一：

var scrollPos;
if (typeof window.pageYOffset != 'undefined') {
   scrollPos = window.pageYOffset;
}
else if (typeof document.compatMode != 'undefined' &&
     document.compatMode != 'BackCompat') {
   scrollPos = document.documentElement.scrollTop;
}
else if (typeof document.body != 'undefined') {
   scrollPos = document.body.scrollTop;
}
alert(scrollPos);

示例二：

function WebForm_GetScrollX()
{
    if (__nonMSDOMBrowser)
    {
        return window.pageXOffset;
    }
    else
    {
        if (document.documentElement && document.documentElement.scrollLeft)
        {
            return document.documentElement.scrollLeft;
        }
        else if (document.body)
        {
            return document.body.scrollLeft;
        }
    }
    return 0;
}

-------------------------------------
pageYOffset是netscape的
document.body.scrollTop和document.documentElement.scrollTop是ie的，但我不知道他们的真正区别，只知道documentElement.scrollTop是xhtml兼容的（我用的是strict）

Yemoo'S JS Blog 2006-06-28 17:22 发表评论

按指定格式输出文件最后更新时间

Yemoo'S JS Blog — Wed, 28 Jun 2006 08:46:00 GMT

这个功能主要是根据document.lastModified来获取的，然后做简单的处理即可。

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" xml:lang="en" lang="en">
<head>
<title>title>
head>
<body>
<script type="text/javascript">
var lastMod=new Date(document.lastModified);
var strLast=""red\">最后更新："+(lastMod.getYear()<200?(lastMod.getYear()+1900):lastMod.getYear())+"-"+(lastMod.getMonth()+1)+"-"+lastMod.getDate();
strLast+=" "+lastMod.getHours()+":"+lastMod.getMinutes()+":"+lastMod.getSeconds();
document.write(strLast);
script>
body>
html>

注意：lastMod.getYear()<200?(lastMod.getYear()+1900，这段代码是为兼容ff而写的，如果不写则2006年会显示为106。

显示效果如下：

最后更新：2006-6-28 16:43:25

Yemoo'S JS Blog 2006-06-28 16:46 发表评论

用js写的模拟blink效果的代码

Yemoo'S JS Blog — Wed, 28 Jun 2006 08:36:00 GMT

在pconline网站首页发现这个代码，偶自己也写了一个，很简单。

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" xml:lang="en" lang="en">

<head>
  <title>title>
<script type="text/javascript">
    var j,color=new Array("#ff0000","#0000ff");
    j=0;
    function blinkText(){
        var sections=document.getElementsByTagName("font");
        for(var i=0;i<sections.length;i++){
            var section=sections[i];
            if(section.getAttribute("blink")=="yes"){
                section.style.color=color[j];
                if(j==0)
                    j=1;
                else
                    j=0;
            }
        }
        setTimeout("blinkText()",300);
    }
    blinkText();
script>
head>
<body>
<font blink="yes">blink testfont>
body>
html>

这里又一次用到了自定义属性。
自定义属性便于处理某类标记的部分内容。

Yemoo'S JS Blog 2006-06-28 16:36 发表评论

写的一个跟随鼠标的层的效果（兼容FF/IE）

Yemoo'S JS Blog — Mon, 26 Jun 2006 09:05:00 GMT

以前只是看别人写的鼠标跟随效果，感觉挺好玩，今天自己来了一个，兼容FF/IE哦！！
Copy请用下面textarea中的代码。

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" xml:lang ="en" lang ="en" >
< head >
   < title > title >
   < style type ="text/css" >
    #level {
      border : 1px solid #ccc ;
      background : #CCFFCC ;
      width : 100px ; height : 30px ;
      position : absolute ;
     }

   style >
   < script type ="text/javascript" >
     function addEvent(elm, evType, fn, useCapture)
    {
           if (elm.addEventListener){
            elm.addEventListener(evType, fn, useCapture);
             return true ;
          } else if (elm.attachEvent){
             var r = elm.attachEvent( " on " + evType, fn);
             return r;
          } else {
            alert( " Handler could not be removed " );
          }
    }
     var x,y,t;
     function doit(evt){
         var event = evt || window.event;
         var level = document.getElementById( " level " );
         /* 如果是第一次调用该函数level.style.left和level.style.top都为空，所以要初始化 */
         if ( ! level.style.left)level.style.left = " 1px " ;
         if ( ! level.style.top)level.style.top = " 1px " ;
         // 用setTimeout函数调用该函数时event对象不存在，只有移动事件触发时event才存在
         if (event){x = (event.x || event.pageX)};
         if (event){y = (event.y || event.pageY)};
         var theLeft = parseInt(level.style.left);
         var theTop = parseInt(level.style.top);
         if (x != theLeft){
             if (theLeft < x){
                level.style.left = (theLeft + 1 ) + " px " ;
            } else {
                level.style.left = (theLeft - 1 ) + " px " ;
            }
        }

         if (theTop != y){
             if (theTop < y){
                level.style.top = (theTop + 1 ) + " px " ;
            } else {
                level.style.top = (theTop - 1 ) + " px " ;
            }
        }
         if (x != theLeft || y != theTop)
            setTimeout( " doit() " , 100 );
    }
    addEvent(document, " mousemove " ,doit);
   script >
head >
< body >
< div id ="level" >
content
div >
body >
html >

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

<head>
  <title></title>
  <style type="text/css">
    #level{
      border: 1px solid #ccc;
      background: #CCFFCC;
      width:100px;height:30px;
      position:absolute;
    }

</style>
  <script type="text/javascript">
    function addEvent(elm, evType, fn, useCapture)
    {
          if (elm.addEventListener){
            elm.addEventListener(evType, fn, useCapture);
            return true;
          } else if (elm.attachEvent){
            var r = elm.attachEvent("on"+evType, fn);
            return r;
          } else {
            alert("Handler could not be removed");
          }
    }
    var x,y,t;
    function doit(evt){
        var event=evt||window.event;
        var level=document.getElementById("level");
        /*如果是第一次调用该函数level.style.left和level.style.top都为空，所以要初始化*/
        if(!level.style.left)level.style.left="1px";
        if(!level.style.top)level.style.top="1px";
        //用setTimeout函数调用该函数时event对象不存在，只有移动事件触发时event才存在
        if(event){x=(event.x||event.pageX)};
        if(event){y=(event.y||event.pageY)};
        var theLeft=parseInt(level.style.left);
        var theTop=parseInt(level.style.top);
        if(x!=theLeft){
            if(theLeft<x){
                level.style.left=(theLeft+1)+"px";
            }else{
                level.style.left=(theLeft-1)+"px";
            }
        }

if(theTop!=y){
            if(theTop<y){
                level.style.top=(theTop+1)+"px";
            }else{
                level.style.top=(theTop-1)+"px";
            }
        }
        if(x!=theLeft||y!=theTop)
            setTimeout("doit()",100);
    }
    addEvent(document,"mousemove",doit);
  </script>
</head>
<body>
<div id="level">
content
</div>
</body>
</html>

Yemoo'S JS Blog 2006-06-26 17:05 发表评论

兼容IE/FF的类title提示效果

Yemoo'S JS Blog — Mon, 26 Jun 2006 08:21:00 GMT

摘要: 昨天帮经典一位朋友解决了一个js的问题，但今天看一位网友回帖让偶郁闷了半天。“ 3楼的在Firefox里啥也没有”，偶打开ff测试了下，果然是没有任何反映，看来标准上的问题以后要多多注意了。出现了好几次这样的问题了。原来楼主的问题时实现一种模拟title的一种很漂亮的效果，昨天下午偶花了半天功夫搞定了，代码如下： &... 阅读全文

Yemoo'S JS Blog 2006-06-26 16:21 发表评论

用外部Javascript修正特定网页内容

Yemoo'S JS Blog — Sun, 25 Jun 2006 17:51:00 GMT

这段代码算是自己练手帮助别人解决的一个问题写的。
要求是这样的：

test，这个不能变，只可以在外面做事情，那要如何呢？

要求点击上面的连接，打开一新页面，并在原页面进行其他操作。

分析可知：上面打开新页面的写法本身就是错误的，根本无法打开新页面。正确的写法应该是：
test

于是解决办法就是用外部js修改连接的内容。首先要判断那个链接内部的href属性包含“window.open”，然后为其增加onclick属性，并将href内容赋给它。然后修改href属性内容。
但解决过程中发现一个问题，读取href属性内容时不能得到其实际内容，而是网页的url路径（去除最后的页面文件名）＋href内容，还要把前面的url路径去掉。这个可以用substring()结合indexOf()解决。
至于在原页面些内容就简单多了。
根据分析写了如下测试代码，实现了上面的要求：
<!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" xml:lang ="en" lang ="en"> <head> <title></title> <script type ="text/javascript"> function addEvent(elm,evType,fn,useCapture){ if(elm.addEventListener){ elm.addEventListener(evType,fn,useCapture); return true; }else if(elm.attachEvent){ var r=elm.attachEvent("on"+evType,fn); return r; }else{ alert("Handler could not be removed"); } } function doOther(){ if(event.srcElement.tagName=="A"&& event.srcElement.getAttribute("href").indexOf("window.open")!=-1){ event.srcElement.setAttribute("onclick",eval(event.srcElement.href.substring(event.srcElement.href.lastIndexOf("/")+1,event.srcElement.href.length))); event.srcElement.setAttribute("href","javascript:void(0)"); document.getElementById("test").innerHTML="<font color=#ff0000><b>是不是这样子？</b></font>" } } addEvent(document,"click",doOther); </script> </head> <body> <a href="window.open('','')"> test </a> ，这个不能变，只可以在外面做事情，那要如何呢？ <div id="test"></div> </body> </html>

Yemoo'S JS Blog 2006-06-26 01:51 发表评论

带控制按钮的文本框时钟

Yemoo'S JS Blog — Fri, 23 Jun 2006 15:19:00 GMT

比较简单，直接贴上代码：

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" xml:lang="en" lang="en">
<head>
  <title>clocktitle>
  <script type="text/javascript">
    var enable=0,tm;
    function setTime(){
        var now=new Date();
        var time=now.toLocaleString();
        document.getElementById("time").value=time;
        tm=setTimeout("setTime()",1000);
        enable=1;
    }
  script>
head>
<body>
<input type="text" id="time" style="overflow:visible" value="" />
<input type="button" value="开" onclick="if(enable==0){setTime();}"/>
<input type="button" value="关" onclick="if(enable==1){time.value='';clearTimeout(tm);enable=0}" />
body>
html>

Yemoo'S JS Blog 2006-06-23 23:19 发表评论

一个最简单的动态显示时间的JS代码

Yemoo'S JS Blog — Fri, 23 Jun 2006 14:43:00 GMT

一个很简单的代码，不过也是偶练习的作品，顺便贴出来纪念下：

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" xml:lang="en" lang="en">
<head>
  <title>title>
  <script type="text/javascript">
    function clock(){
        var nowtime=new Date();
        var flag="AM";
        var hours=nowtime.getHours();
        if(hours>12){
            hours-=12;
            flag="PM";
        }
        hours=hours>9?hours:"0"+hours;
        var minutes=nowtime.getMinutes();
        minutes=minutes>9?minutes:"0"+minutes;
        var seconds=nowtime.getSeconds();
        seconds=seconds>9?seconds:"0"+seconds;
        var disptime=hours+":"+minutes+":"+seconds+" "+flag;
        document.getElementById("clock").innerHTML=disptime;
        setTimeout("clock()",1000);
    }
  script>
head>
<body>
<div id="clock">div>
<script type="text/javascript">
clock();
script>
body>
html>

Yemoo'S JS Blog 2006-06-23 22:43 发表评论