当前位置：Gxlcms > JavaScript > 写了几个类，希望对大家有用。

写了几个类，希望对大家有用。

时间：2021-07-01 10:21:17 帮助过：32人阅读

1.日历

function DateClass(_container) { 
        this.author = '51JS.COM-ZMM'; 
        this.version = 'Web Calendar 1.0'; 
        this.container = _container; 
        this.weekArr = ['日', '一', '二', '三', '四', '五', '六']; 
        this.dateArr = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

this.showTable = function(_year, _month) { 
             this.container.innerHTML = this.getDateTable(_year, _month); 
        }

this.getDateTable = function(_year, _month) { 
             if (this.checkArgs(_year, _month)) { 
                 _year = parseInt(this.checkDate(_year, _month).split('-')[0]); 
                 _month = parseInt(this.checkDate(_year, _month).split('-')[1]); 
                 this.Thead = '<table cellpadding="5" cellspacing="0" class="DateTable">\n'; 
                 this.Thead += '<tr><td align="center" class="MonthTd" onclick="oDate.showTable(' + _year + ', ' + eval(_month-1) + ');">3</td>'; 
                 this.Thead += '<td align="center" colspan="5" class="SelectTd"><select onchange="oDate.showTable(options[selectedIndex].value, ' + _month + ');">'; 
                 for (var i=1900; i<2101; i++) this.Thead += '<option value="' + i + '" ' + ((_year==i) ? 'selected' : '') + '>' + i + '年</option>'; 
                 this.Thead += '</select><select onchange="oDate.showTable(' + _year + ', options[selectedIndex].value);">'; 
                 for (var i=1; i<13; i++) this.Thead += '<option value="' + i + '" ' + ((_month==i) ? 'selected' : '') + '>' + i + '月</option>'; 
                 this.Thead += '</select></td>'; 
                 this.Thead += '<td align="center" class="MonthTd" onclick="oDate.showTable(' + _year + ', ' + eval(_month+1) + ');">4</td></tr>\n'; 
                 this.Thead += '<tr>'; 
                 for (var i=0; i<this.weekArr.length; i++) this.Thead += '<td align="center" class="WeekTd">' + this.weekArr[i] + '</td>'; 
                 this.Thead += '</tr>\n'; 
                 this.Tbody = '<tr>'; 
                 this.dateArr[1] = (!this.checkYear(_year)) ? 28 : 29 ; 
                 for (var i=0; i<this.firstPos(_year, _month); i++) this.Tbody += '<td class="BlankTd"></td>'; 
                 for (var i=1; i<=this.dateArr[_month-1]; i++) { 
                      if (this.firstPos(_year, _month) == 0) { 
                          if (i!=1 && i%7==1) this.Tbody += '</tr>\n<tr>'; 
                      } else { 
                          if ((i+this.firstPos(_year, _month))%7==1) this.Tbody += '</tr>\n<tr>'; 
                      } 
                      if (!this.today(_year, _month, i)) { 
                          this.Tbody += '<td align="center" class="out" onmouseover="className=\'over\';" onmouseout="className=\'out\';" onmousedown="className=\'down\';" onclick="oDate.showDateStr(' + _year + ', ' + _month + ', ' + i + ', \'' + this.weekArr[new Date(_year, _month-1, i).getDay()] + '\');">' + i + '</td>'; 
                      } else { 
                         this.Tbody += '<td align="center" class="Today" onclick="oDate.showDateStr(' + _year + ', ' + _month + ', ' + i + ', \'' + this.weekArr[new Date(_year, _month-1, i).getDay()] + '\');">' + i + '</td>';  
                      }  
                 } 
                 for (var i=0; i<6-this.lastPos(_year, _month); i++) this.Tbody += '<td class="BlankTd"></td>'; 
                 this.Tbody += '</tr>\n';  
                 this.TFoot = '</table>\n'; 
                 this.Table = this.Thead + this.Tbody + this.TFoot; 
                 return this.Table; 
             } else { 
                 return 'Arguments Error!'; 
             }             
         }

this.firstPos = function(_year, _month) { 
              return new Date(_year, _month-1, 1).getDay(); 
         }

this.lastPos = function(_year, _month) { 
              return new Date(_year, _month-1, this.dateArr[_month-1]).getDay(); 
         }

this.checkYear = function(_year) { 
              return ((_year % 4 == 0) && (_year % 100 != 0)) || (_year % 400 == 0); 
         }

this.today = function(_year, _month, _date) { 
              return (new Date().getFullYear() == _year) && (new Date().getMonth() == _month-1) && (new Date().getDate() == _date); 
         } 
  
         this.checkArgs = function(_year, _month) { 
              if (_year<1900 || _year>2100) return false; 
              if (_month<0 || _month>13) return false; 
              return (!isNaN(_year) && !isNaN(_month));            
         }

this.checkDate = function(_year, _month) { 
              if (_month<1) {  
                  _year --; 
                  _month = 12; 
              } 
              if (_month>12) {  
                  _year ++; 
                  _month = 1; 
              } 
              return _year + '-' + _month; 
         }  
         
         this.showDateStr = function(_year, _month, _date, _week) { 
              window.alert(_year + '年' + _month + '月' + _date + '日 星期' + _week);   
         } 
    } 
    
    window.onload = function() { 
         oDate = new DateClass(self.oContainer); 
         oDate.showTable(new Date().getFullYear(), new Date().getMonth()+1); 
    } 
</script>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
2.简单的下拉菜单

this.getPosition = function(_object) { 
             var _top = _left = 0; 
             var _root = document.body; 
             while (_object != _root) { 
                    _top += _object.offsetTop; 
                    _left += _object.offsetLeft; 
                    _object = _object.offsetParent; 
             } 
             return { top: _top, left: _left };               
        };

this.showMenu = function(_number, _offsetX, _offsetY) { 
             if (this.drawMenu(_number, _offsetX, _offsetY)) { 
                 this.panel.style.display = 'inline'; 
             } else { 
                 window.alert('arguments error!'); 
             }              
        };

this.hideMenu = function() { 
             this.panel.style.display = 'none'; 
        }; 
    }

window.onload = function() { 
        oMenu = new Menu(self.oData, self.oPanel); 
        document.onclick = new Function('oMenu.hideMenu();');  
    } 
</script>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
3. QQ菜单效果

function Tencent(_container) { 
        this.author = '51JS.COM-ZMM'; 
        this.version = 'Tencent 1.0'; 
        this.container = _container; 
        this.box = (function(_object) { 
             var _box = document.createElement('DIV'); 
             _box.id = 'TencentBox'; 
             _box.style.width = _object.offsetWidth; 
             _box.style.height = _object.offsetHeight; 
             return _box; 
        })(this.container); 
        this.container.appendChild(this.box); 
        this.toolRecord = new Object(); 
        this.barCount = 0;

this.drawTencent = function(_barList, _barHeight, _barDelay, _barAmount) { 
             var _bool = true; 
             this.barList = []; 
             this.toolList = []; 
             this.barHeight = _barHeight; 
             this.barDelay = _barDelay; 
             this.barAmount = _barAmount; 
             for (var i in _barList) this.barCount ++; 
             this.toolHeight = parseInt(this.box.style.height) - this.barCount * this.barHeight; 
             for (var i in _barList) { 
                  var _bar = document.createElement('BUTTON'); 
                  _bar.style.width = this.box.style.width; 
                  _bar.style.height = _barHeight; 
                  _bar.style.textAlign = 'center'; 
                  _bar.value = i.toString(); 
                  _bar.hideFocus = true; 
                  _bar.attachEvent('onclick', this.doClick); 
                  this.box.appendChild(_bar);

this.barList[this.barList.length] = _bar; 
                  this.toolList[this.toolList.length] = _tool; 
                  if (_bool) { this.barCurrent = _bar; this.toolCurrent = _tool; _bool = false; } 
             } 
        }

this.doClick = function() { 
             var _eventBar = window.event.srcElement; 
             with (oTencent) { 
                   if (!oTime && (barCurrent != _eventBar)) { 
                       for (var i=0; i<barList.length; i++) { 
                            if (barList[i] == _eventBar) { 
                                barCurrent = barList[i]; 
                                toolRecord = toolCurrent; 
                                toolCurrent = toolList[i]; 
                                toolCurrent.style.display = 'inline'; 
                                changeTool(); 
                                return true; 
                            }                       
                       }         
                   } else { 
                       return false; 
                   } 
             } 
        }

this.changeTool = function() { 
             if (parseInt(this.toolCurrent.style.height) < this.toolHeight) { 
                 with (this.toolRecord.style) { 
                       height = ((parseInt(height) - this.barAmount) > 0) ? (parseInt(height) - this.barAmount) : 1 ; 
                 } 
                 with (this.toolCurrent.style) { 
                       height = ((parseInt(height) + this.barAmount) < this.toolHeight) ? (parseInt(height) + this.barAmount) : this.toolHeight ; 
                 } 
                 oTime = window.setTimeout('oTencent.changeTool()', this.barDelay); 
             } else { 
                 this.toolRecord.style.display = 'none';         
                 oTime = window.clearTimeout(oTime); 
             } 
        } 
    }

window.onload = function() { 
        var _barList = new Object(); 
        _barList['我的同学'] = [3, ['http://www.ctrl.net.cn/zmm/Sample.jpg', 'http://www.ctrl.net.cn/zmm/Sample.jpg', 'http://www.ctrl.net.cn/zmm/Sample.jpg'], ['1.htm', '2.htm', '3.htm'], ['华华', '南南', '振振']]; 
        _barList['我的同事'] = [4, ['http://www.ctrl.net.cn/zmm/Sample.jpg', 'http://www.ctrl.net.cn/zmm/Sample.jpg', 'http://www.ctrl.net.cn/zmm/Sample.jpg', 'http://www.ctrl.net.cn/zmm/Sample.jpg'], ['4.htm', '5.htm', '6.htm', '7.htm'], ['妖妖', '星空网络', '蛋蛋', '冰雪']]; 
        _barList['管理设置'] = [2, ['http://www.ctrl.net.cn/zmm/Sample.jpg', 'http://www.ctrl.net.cn/zmm/Sample.jpg'], ['8.htm', '9.htm'], ['修改密码', '个人资料']]; 
        _barList['黑 名 单'] = [1, 'http://www.ctrl.net.cn/zmm/Sample.jpg', '10.htm', '松松']; 
        var _barHeight = 21; 
        var _barDelay = 10, _barAmount = 50;

oTencent = new Tencent(self.oContainer); 
        oTencent.drawTencent(_barList, _barHeight, _barDelay, _barAmount); 
    } 
</script>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
4.对联效果

function Couplet(_top, _width, _height, _offset, _delay, _amount) { 
        this.author = '51JS.COM-ZMM'; 
        this.version = 'Couplet 1.0'; 
        this.top = _top; 
        this.width = _width; 
        this.height = _height; 
        this.offset = _offset; 
        this.delay = _delay; 
        this.amount = _amount;

this.drawCouplet = function(_content) { 
             this.content = _content; 
             var _client = document.body.clientWidth; 
             var _css = new String(); 
             _css += 'top: ' + this.top + 'px;'; 
             _css += 'width: ' + this.width + 'px;'; 
             _css += 'height: ' + this.height + 'px;'; 
             _css += 'position: absolute;'; 
             _css += 'font-size: 12px;'; 
             _css += 'border: 1px solid menu;'; 
             _css += 'overflow: auto;' 
             var _html = new String(); 
             _html += ''; 
             _html += this.content;  
             _html += ''; 
             _html += ''; 
             _html += this.content;                
             _html += ''; 
             return _html; 
        } 
         
        this.doScroll = function() { 
             var _left = document.getElementById('oCouplet_left'); 
             var _right = document.getElementById('oCouplet_right'); 
             var _oTop = parseInt(_left.style.top); 
             var _nTop = parseInt(document.body.scrollTop) + this.top; 
             if (_oTop < _nTop) { 
                 if ((_nTop - _oTop) > 0) { 
                      _left.style.top = _right.style.top = _oTop + 1 + 'px'; 
                      var oTime = window.setTimeout('oCouplet.doScroll()', this.delay); 
                 } else { 
                      window.clearTimeout(oTime);           
                 } 
             } else { 
                 if ((_oTop - _nTop) > 0) { 
                      _left.style.top = _right.style.top = _oTop - 1 + 'px'; 
                      var oTime = window.setTimeout('oCouplet.doScroll()', this.delay); 
                 } else { 
                      window.clearTimeout(oTime);         
                 } 
             } 
        } 
    }

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
5.图片轮换

function Rotator(_container, _width, _height, _array, _delay) { 
        this.author = '51JS.COM-ZMM'; 
        this.version = 'Rotator 1.0'; 
        this.container = _container; 
        this.width = _width; 
        this.height = _height;

this.box = (function(_container, _width, _height) { 
             var _box = document.createElement('DIV'); 
             _box.id = 'RotatorBox'; 
             _box.align = 'center'; 
             _box.style.width = _width; 
             _box.style.height = _height; 
             _box.style.border = '1px solid menu'; 
             _box.style.overflow = 'hidden'; 
             return _box; 
        })(this.container, this.width, this.height); 
        this.container.appendChild(this.box); 
        this.sAmount = 0;

this.drawRotator = function(_array, _delay) { 
             this.delay = _delay; 
             var _bool = (_array.length == 3); 
             _bool = _bool & (_array[0].length == _array[1].length); 
             _bool = _bool & (_array[0].length == _array[2].length); 
             _bool = _bool & (_array[1].length == _array[2].length); 
             if (_bool) { 
                 this.itemArr = []; 
                 this.panel = (function(_width, _height, _array) { 
                      var _panel = document.createElement('DIV'); 
                      _panel.style.position = 'absolute'; 
                      _panel.style.top = '0px';  
                      _panel.style.left = '0px'; 
                      return _panel; 
                 })(this.width, this.height, _array); 
                 for (var i=0; i<_array[0].length; i++) { 
                      var _html = new String(); 
                      _html += '<table '; 
                      _html += 'width="' + _width + '" height="' + _height + '" '; 
                      _html += 'align="center" valign="middle" '; 
                      _html += 'cellpadding="0" cellspacing="0">'; 
                      _html += '<tr><td align="center">'; 
                      _html += ''; 
                      _html += '<img src="https://img.gxlcms.com/' + _array[1][i] + '" alt="' + _array[2][i] + '" border="0" '; 
                      _html += 'onmouseover="window.clearInterval(oInterval);" onmouseout="oInterval = window.setInterval(\'oRotator.doScroll()\', ' + this.delay + ');">'; 
                      _html += '</td></tr>';  
                      _html += '</table>'; 
                      this.itemArr[this.itemArr.length] = _html; 
                 } 
                 this.box.appendChild(this.panel); 
                 this.setPanelContent(); 
             } else { 
                 window.alert('arguments error!'); 
             } 
        } 
   
        this.setPanelContent = function() { 
             this.panel.innerHTML = this.itemArr.join(''); 
        }

this.doScroll = function() { 
             with (oRotator) { 
                   if (sAmount < height) { 
                       sAmount ++; 
                       panel.style.pixelTop = parseInt(panel.style.pixelTop) - 1; 
                       oTime = window.setTimeout('oRotator.doScroll()', 10); 
                   } else { 
                       sAmount = 0; 
                       itemArr.push(itemArr.shift()); 
                       setPanelContent(); 
                       panel.style.pixelTop = parseInt(panel.style.pixelTop) + height; 
                       window.clearTimeout(oTime);   
                   } 
             }  
        } 
    }

window.onload = function() { 
        var _width = 50, _height = 30, _delay = 3000;  
        var _array = []; 
        _array[_array.length] = ['http://www.51js.com/', 'http://www.iecn.net/', 'http://www.ctrl.com.cn/', 'http://www.163.com/', 'http://www.sina.com.cn/']; 
        _array[_array.length] = ['http://bbs.51js.com/images/default/profile.gif', 'http://bbs.51js.com/images/default/email.gif', 'http://bbs.51js.com/images/default/pm.gif', 'http://bbs.51js.com/images/default/edit.gif', 'http://bbs.51js.com/images/default/quote.gif']; 
        _array[_array.length] = ['无忧脚本', 'Web中文网', '开创互联', '网易', '新浪']; 
        oRotator = new Rotator(self.oContainer, _width, _height); 
        oRotator.drawRotator(_array, _delay); 
        oInterval = window.setInterval('oRotator.doScroll()', _delay); 
    } 
</script>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
6.listView类

listView.prototype = { 
        boxInit : function() { 
            this.container.innerHTML = new String(); 
            this.box = (function(_object) { 
                 var _box = document.createElement('DIV'); 
                 with (_box) { 
                       id = 'ListViewBox'; 
                       style.width = _object.offsetWidth; 
                       style.height = _object.offsetHeight; 
                       style.margin = '0px'; 
                       style.padding = '0px'; 
                       attachEvent('oncontextmenu', new Function('return false;')); 
                 } 
                 return _box; 
            })(this.container); 
            this.headerPanel = (function(_width, _height) { 
                 var _headerPanel = document.createElement('DIV'); 
                 with (_headerPanel) { 
                       style.width = _width; 
                       style.height = _height; 
                 }            
                 return _headerPanel; 
            })(this.box.style.width, this.headerHeight); 
            this.headerPanel.appendChild(this.textPanel = (function() { 
                 var  _textPanel = document.createElement('NOBR'); 
                 _textPanel.attachEvent('onmousemove', function() { 
                      with (oListView) { 
                            if (event.button == 1) { 
                                textPanel.style.cursor = 'E-resize'; 
                                tempSeparate.style.left = event.clientX - getPosition(box).left; 
                                tempSeparate.style.display = 'inline'; 
                                endPoint = event.clientX; 
                                isResize = true; 
                            } 
                      } 
                 });               
                 return _textPanel; 
            })()); 
            this.rowItemPanel = (function(_width, _height) { 
                 var _itemPanel = document.createElement('DIV'); 
                 with (_itemPanel) { 
                       style.width = _width; 
                       style.height = _height; 
                       style.overflow = 'hidden'; 
                 } 
                 return _itemPanel; 
            })(this.box.style.width, parseInt(this.box.style.height) - this.headerHeight); 
            this.rowItemPanel.appendChild(this.dataPanel = (function() { 
                 var  _dataPanel = document.createElement('NOBR'); 
                 with (_dataPanel) { 
                       style.cursor = 'default'; 
                       attachEvent('onclick', function() { 
                           document.selection.empty(); 
                       }); 
                       attachEvent('onselectstart', function() { 
                           document.selection.empty(); 
                       }); 
                 } 
                 return _dataPanel; 
            })()); 
            this.dataPanel.appendChild(this.tempSeparate = (function(_height) { 
                 var _tempSeparate = document.createElement('SPAN'); 
                 with (_tempSeparate) { 
                       style.width = '1px'; 
                       style.height = _height; 
                       style.border = '0px'; 
                       style.backgroundColor = 'black'; 
                       style.position = 'absolute'; 
                       style.display = 'none';                        
                 } 
                 return _tempSeparate; 
            })(this.rowItemPanel.style.height)); 
            this.box.appendChild(this.headerPanel); 
            this.box.appendChild(this.rowItemPanel); 
            this.container.appendChild(this.box); 
        },

drawListView : function(_headers, _aligns) { 
            this.boxInit(); 
            this.drawHeader(_headers); 
            this.drawRowItem(_headers, _aligns); 
            document.attachEvent('onmouseup', this.finishResize); 
        },

drawHeader : function(_headers) { 
            this.headers = []; 
            this.headerWidth = Math.round((parseInt(this.headerPanel.style.width) - (_headers.length - 1) * 1) / _headers.length) + 1; 
            for (var i = 0; i < _headers.length; i ++) { 
                 var _header = document.createElement('SPAN'); 
                 with (_header) { 
                       style.width = this.headerWidth; 
                       style.height = this.headerHeight; 
                       style.overflow = 'hidden'; 
                       style.backgroundColor = 'buttonface'; 
                       style.borderLeft = '1px solid buttonhighlight';  
                       style.borderTop = '1px solid buttonhighlight';  
                       style.borderRight = '1px solid buttonshadow';  
                       style.borderBottom = '1px solid buttonshadow'; 
                       style.textAlign = 'center'; 
                       style.fontSize = '12px'; 
                       style.fontFamily = 'Sans-Serif, Tahoma'; 
                       style.paddingTop = '1px'; 
                       innerText = _headers[i]; 
                 } 
                 this.textPanel.appendChild(_header); 
                 this.headers[this.headers.length] = _header; 
                 var _separate = this.getSeparate(true); 
                 this.textPanel.appendChild(_separate); 
                 this.headers[this.headers.length] = _separate;                                  
            } 
            var _last = document.createElement('SPAN'); 
            with (_last) { 
                  style.width = this.headerPanel.offsetWidth; 
                  style.height = this.headerHeight; 
                  style.overflow = 'hidden'; 
                  style.backgroundColor = 'buttonface'; 
                  style.borderLeft = '1px solid buttonhighlight';  
                  style.borderTop = '1px solid buttonhighlight';  
                  style.borderRight = '1px solid buttonshadow';  
                  style.borderBottom = '1px solid buttonshadow';  
                  style.textAlign = 'center'; 
                  style.fontSize = '12px'; 
                  style.fontFamily = 'Sans-Serif, Tahoma'; 
                  style.paddingTop = '1px'; 
                  innerText = new String(); 
            } 
            this.textPanel.appendChild(_last);  
            this.headers[this.headers.length] = _last;        
        },

drawRowItem : function(_headers, _aligns) { 
            this.items = []; 
            this.itemWidth = Math.round((parseInt(this.rowItemPanel.style.width) - (_headers.length - 1) * 1) / _headers.length) + 1; 
            this.itemHeight = parseInt(this.rowItemPanel.style.height) - 2; 
            for (var i = 0; i < _headers.length; i ++) { 
                 var _item = document.createElement('SPAN'); 
                 with (_item) { 
                       style.width = this.itemWidth; 
                       style.height = this.itemHeight; 
                       style.overflow = 'hidden'; 
                       style.padding = '0px'; 
                       appendChild((function(_count, _width, _height, _align) { 
                             var _table = document.createElement('TABLE'); 
                             with (_table) { 
                                   cellSpacing = 0; 
                                   cellPadding = 0; 
                                   style.width = _width; 
                                   style.tableLayout = 'fixed'; 
                             } 
                             var _tbody = document.createElement('TBODY'); 
                             for (var i = 0; i < _count; i ++) { 
                                  var _tableTr = document.createElement('TR'); 
                                  var _tableTd = document.createElement('TD'); 
                                  with (_tableTd) { 
                                        align = _align; 
                                        style.height = _height;                             
                                        style.borderBottom = '1px solid #c6c3c6'; 
                                        style.fontSize = '12px'; 
                                        style.paddingLeft = '3px'; 
                                        setAttribute('onclick', function() { 
                                            oListView.selectedRow(this.parentNode.rowIndex);   
                                        }); 
                                        setAttribute('ondblclick', function() { 
                                            oListView.showSelected(this.parentNode.rowIndex);   
                                        }); 
                                        innerHTML = new String(' '); 
                                  } 
                                  _tableTr.appendChild(_tableTd); 
                                  _tbody.appendChild(_tableTr); 
                             } 
                             _table.appendChild(_tbody); 
                             return _table; 
                       })(this.rowsCount, this.itemWidth, Math.round(this.itemHeight / this.rowsCount), _aligns[i])); 
                 } 
                 this.dataPanel.appendChild(_item); 
                 this.items[this.items.length] = _item;  
                 var _separate = this.getSeparate(false); 
                 _separate.style.height = this.itemHeight; 
                 this.dataPanel.appendChild(_separate); 
                 this.items[this.items.length] = _separate;                    
            } 
            var _last = document.createElement('SPAN'); 
            with (_last) { 
                  style.width = this.rowItemPanel.offsetWidth; 
                  style.height = this.itemHeight; 
                  style.overflow = 'hidden'; 
                  style.padding = '0px'; 
                  appendChild((function(_count, _width, _height) { 
                        var _table = document.createElement('TABLE'); 
                        with (_table) { 
                              cellSpacing = 0; 
                              cellPadding = 0; 
                              style.width = '100%'; 
                        } 
                        var _tbody = document.createElement('TBODY'); 
                        for (var i = 0; i < _count; i ++) { 
                             var _tableTr = document.createElement('TR'); 
                             var _tableTd = document.createElement('TD'); 
                             with (_tableTd) { 
                                   style.height = _height;                             
                                   style.borderBottom = '1px solid menu'; 
                                   innerHTML = new String('<nobr style="height: ' + eval(_height-1) + ';overflow: hidden;"> </nobr>'); 
                             } 
                             _tableTr.appendChild(_tableTd); 
                             _tbody.appendChild(_tableTr); 
                        } 
                        _table.appendChild(_tbody); 
                        return _table; 
                  })(this.rowsCount, this.itemWidth, Math.round(this.itemHeight / this.rowsCount))); 
            } 
            this.dataPanel.appendChild(_last);  
            this.items[this.items.length] = _last;  
        },         
                  
        getSeparate : function(_resize) { 
            var _separate = document.createElement('SPAN'); 
            with (_separate) { 
                  style.width = _resize ? '2px' : '1px' ; 
                  style.height = this.headerHeight; 
                  style.border = '1px ' + (_resize ? 'inset white' : 'solid #c6c3c6'); 
                  style.overflow = 'hidden'; 
                  style.position = 'absolute'; 
                  if (_resize) { 
                      attachEvent('onmousedown', function() { 
                          with (oListView) { 
                                separate = event.srcElement; 
                                startPoint = event.clientX; 
                          } 
                      }); 
                      attachEvent('onmouseenter', function() { 
                          event.srcElement.style.cursor = 'E-resize'; 
                      }); 
                  } 
            } 
            return _separate;            
        },

getPosition : function(_object) { 
            var _top = _left = 0; 
            var _root = document.body; 
            while (_object != _root) { 
                   _left += _object.offsetLeft; 
                   _object = _object.offsetParent; 
            } 
            return { left: _left };               
        },

resizeItem : function() { 
            with (this) { 
                  var _width, _movePart = endPoint - startPoint; 
                  for (var i = 0; i < headers.length; i ++) { 
                       if (headers[i] == separate) { 
                           var _bool = true; 
                           _bool = _bool && (_movePart < 0); 
                           _bool = _bool && (parseInt(headers[i - 1].style.width) < Math.abs(_movePart)); 
                           if (_bool) { 
                               headers[i - 1].style.width = 0; 
                               items[i - 1].style.width = 0; 
                           } else { 
                               _width = parseInt(headers[i - 1].style.width); 
                               headers[i - 1].style.width = _width + _movePart; 
                               _width = parseInt(items[i - 1].style.width); 
                               items[i - 1].style.width = _width + _movePart; 
                               _width = parseInt(items[i - 1].firstChild.style.width); 
                               items[i - 1].firstChild.style.width = _width + _movePart; 
                               var _table = items[i - 1].firstChild; 
                               for (var j = 0; j < _table.rows.length; j ++) { 
                                    var _dataPanel = _table.rows[j].cells[0].children[0];                                  
                                    if (typeof _dataPanel != 'undefined') { 
                                        _width = parseInt(_dataPanel.style.width);  
                                        _dataPanel.style.width = _width + _movePart; 
                                    } 
                               } 
                           } 
                       } 
                  } 
            }  
        },

finishResize : function() { 
            with (oListView) { 
                  if (isResize) { 
                      isResize = false; 
                      textPanel.style.cursor = 'default'; 
                      tempSeparate.style.display = 'none'; 
                      resizeItem(); 
                  } 
            }             
        }, 
         
        addListItem : function(_datas) { 
            var _itemNum = _datas.length > this.rowsCount ? this.rowsCount : _datas.length ; 
            for (var i = 0; i < _itemNum; i ++) { 
                 var n = 0; 
                 for (j = 0; j < this.items.length - 2; j ++) { 
                      if (j % 2 == 0) { 
                          var _dataPanel = document.createElement('NOBR'); 
                          var _tableCell = this.items[j].firstChild.rows[i].cells[0]; 
                          with (_dataPanel) { 
                                style.width = this.itemWidth; 
                                style.overflow = 'hidden'; 
                                style.textOverflow = 'ellipsis'; 
                                innerHTML = _datas[i][n]; 
                          } 
                          _tableCell.innerHTML = new String(); 
                          _tableCell.appendChild(_dataPanel); 
                          _tableCell.title = _datas[i][0]; 
                          n ++; 
                      } 
                 } 
            } 
        },

selectedRow : function(n) { 
            for (var i = 0; i < this.items.length; i++) { 
                 if (i % 2 == 0) { 
                     var _table = this.items[i].firstChild; 
                     for (var j = 0; j < _table.rows.length; j ++) { 
                          var _dataPanel = _table.rows[j].cells[0].children[0];                                  
                          if (typeof _dataPanel != 'undefined') { 
                              if (j == n) { 
                                  _table.rows[j].cells[0].style.color = 'highlighttext'; 
                                  _table.rows[j].cells[0].style.backgroundColor = 'highlight'; 
                              } else { 
                                  _table.rows[j].cells[0].style.color = ''; 
                                  _table.rows[j].cells[0].style.backgroundColor = ''; 
                              } 
                              var _children = _table.rows[j].cells[0].firstChild.children; 
                              this.changeChild(_children, j == n); 
                          } 
                     }                 
                 } 
            } 
        },

changeChild : function(_children, _isSelected) { 
            if (typeof _children != 'undefined') { 
                for (var i = 0; i < _children.length; i ++) { 
                     if (_isSelected) { 
                         _children[i].style.color = 'highlighttext'; 
                         _children[i].style.backgroundColor = 'highlight'; 
                     } else { 
                         _children[i].style.color = ''; 
                         _children[i].style.backgroundColor = '';                          
                     } 
                }                 
            } else { 
                return false; 
            } 
        },

showSelected : function(n) { 
            var _text = new String(); 
            for (var i = 0; i < this.items.length - 2; i++) { 
                 if (i % 2 == 0) { 
                     var _table = this.items[i].firstChild; 
                     _text += this.headers[i].innerText + ':\n'; 
                     _text += _table.rows[n].cells[0].firstChild.innerHTML + '\n\n';             
                 } 
            } 
            alert(_text);             
        }       
    } 
    
    function initListView() { 
        var _headers = []; 
        _headers[_headers.length] = '标题'; 
        _headers[_headers.length] = '内容'; 
        _headers[_headers.length] = '时间';     
        _headers[_headers.length] = '管理'; 
        var _aligns = []; 
        _aligns[_aligns.length] = 'left'; 
        _aligns[_aligns.length] = 'left'; 
        _aligns[_aligns.length] = 'center';     
        _aligns[_aligns.length] = 'center';          
        oListView = new listView(self.oContainer); 
        oListView.drawListView(_headers, _aligns);

var _items = []; 
        _items[_items.length] = ['标题一', '内容一', '2006-6-21 10:30:00', '编辑  删除']; 
        _items[_items.length] = ['标题二', '内容二', '2006-6-21 14:20:12', '编辑  删除']; 
        _items[_items.length] = ['标题三', '内容三', '2006-6-21 20:45:36', '编辑  删除']; 
        oListView.addListItem(_items);                                     
    }

attachEvent('onload', initListView); 
</script> 
<center> 
     
</center>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
7.表单多文件上传类 [ASP]

<% 
    Class Upload 
        Public  Form, Finished 
        Private bVBCrlf, bSeparate, formData, cFields, folderPath, itemCount, sErrors, sAuthor, sVersion 
        Private itemStart(), itemLength(), dataStart(), dataLength(), itemName(), itemData(), extenArr()

Private Sub Class_Initialize       
            formData = Request.BinaryRead(Request.TotalBytes) 
            Set Form = Server.CreateObject("Scripting.Dictionary") 
            sAuthor = "51JS.COM-ZMM" 
            sVersion = "Upload Class 1.0" 
        End Sub  
         
        Public Property Get ErrMessage 
            ErrMessage = sErrors 
        End Property 
  
        Public Property Get Author 
            Author = sAuthor 
        End Property

Public Property Get Version 
            Version = sVersion 
        End Property

Public Property Let CheckFields(byVal sCheck) 
            cFields = sCheck 
        End Property

Public Property Let Folder(byVal sFolder) 
            folderPath = sFolder 
        End Property

Public Function Start 
            Finished = False 
            bVBCrlf = StrToByte(vbCrlf & vbCrlf) 
            bSeparate = StrToByte("-----------------------------") 
            itemCount = 0 
            sErrors = "" 
            Call ItemPosition  
        End Function

Private Function ItemPosition 
            Dim iStart, iLength : iStart = 1         
            Do Until InStrB(iStart, formData, bSeparate) = 0 
               iStart = InStrB(iStart, formData, bSeparate) + LenB(bSeparate) + 14 
               iLength = InStrB(iStart, formData, bSeparate) - iStart - 2 
               If Abs(iStart + 2 - LenB(formData)) > 2 Then 
                  ReDim Preserve itemStart(itemCount) 
                  ReDim Preserve itemLength(itemCount) 
                  itemStart(itemCount) = iStart 
                  itemLength(itemCount) = iLength 
                  itemCount = itemCount + 1 
               End If 
            Loop 
            Call FillItemValue 
        End Function

Private Function FillItemValue 
            Dim dataPart, bInfor 
            Dim iStart : iStart = 1 
            Dim iCount : iCount = 0 
            Dim iCheck : iCheck = StrToByte("filename") 
            For i = 0 To itemCount - 1 
                ReDim Preserve itemName(iCount) 
                ReDim Preserve itemData(iCount) 
                ReDim Preserve extenArr(iCount) 
                ReDim Preserve dataStart(iCount) 
                ReDim Preserve dataLength(iCount) 
                dataPart = MidB(formData, itemStart(i), itemLength(i)) 
                iStart = InStrB(1, dataPart, ChrB(34)) + 1 
                iLength = InStrB(iStart, dataPart, ChrB(34)) - iStart 
                itemName(iCount) = FormItemName(MidB(dataPart, iStart, iLength)) 
                iStart = InStrB(1, dataPart, bVBCrlf) + 4 
                iLength = LenB(dataPart) - iStart + 1 
                If InStrB(1, dataPart, iCheck) > 0 Then 
                   bInfor = MidB(dataPart, 1, iStart - 5) 
                   extenArr(iCount) = FileExtenName(bInfor) 
                   If Mid(folderPath, Len(folderPath) - 1) = "/" Then 
                      itemData(iCount) = folderPath & GetRndName(6) & extenArr(iCount) 
                   Else 
                      itemData(iCount) = folderPath & "/" & GetRndName(6) & extenArr(iCount)   
                   End If 
                   dataStart(iCount) = itemStart(i) + iStart - 2 
                   dataLength(iCount) = iLength 
                Else 
                   extenArr(iCount) = "" 
                   itemData(iCount) = ByteToStr(MidB(dataPart, iStart, iLength)) 
                   dataStart(iCount) = "" 
                   dataLength(iCount) = "" 
                End If 
                iCount = iCount + 1 
            Next 
            Call SaveUpload 
        End Function

Private Function FormItemName(byVal bName) 
            FormItemName = ByteToStr(bName) 
        End Function

Private Function FileExtenName(byVal bInfor) 
            Dim pStart, pLength, pContent, regEx 
            pStart = InStr(1, ByteToStr(bInfor), "filename=" & Chr(34)) + 10 
            pLength = InStr(pStart, ByteToStr(bInfor), Chr(34)) - pStart 
            pContent = Mid(ByteToStr(bInfor), pStart, pLength) 
            If pContent = "" Then 
               FileExtenName = "" 
            Else 
               Set regEx = New RegExp 
               regEx.Pattern = "^.*(\.[^\.]*)$" 
               regEx.Global = False 
               regEx.IgnoreCase = True 
               FileExtenName = regEx.Replace(pContent, "$1") 
               Set regEx = Nothing                 
            End If         
        End Function

Private Function GetRndName(byVal sLen) 
            Dim regEx, sTemp, arrFields, n : n = 0 
            Set regEx = New RegExp 
            regEx.Pattern = "[^\d]*" 
            regEx.Global = True 
            regEx.IgnoreCase = True 
            sTemp = regEx.Replace(Now, "") & "-" 
            Set regEx = Nothing          
            arrFields = Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", _  
                              "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", _  
                              "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", _ 
                              "u", "v", "w", "x", "y", "z", "A", "B", "C", "D", _ 
                              "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", _ 
                              "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", _ 
                              "Y", "Z") 
            Randomize 
            Do While n < sLen 
               sTemp = sTemp & CStr(arrFields(61 * Rnd)) 
               n = n + 1 
            Loop 
            GetRndName = sTemp 
        End Function

Private Function SaveUpload 
            Dim isValidate 
            Dim filePath, oStreamGet, oStreamPut 
            isValidate = CheckFile 
            If isValidate Then 
               For i = 0 To itemCount - 1 
                   If (dataStart(i) <> "") And (dataLength(i) <> "") Then 
                       If dataLength(i) = 0 Then 
                          itemData(i) = ""  
                       Else 
                          filePath = Server.MapPath(itemData(i)) 
                          If CreateFolder("|", ParentFolder(filePath)) Then                           
                             Set oStreamGet = Server.CreateObject("ADODB.Stream") 
                             oStreamGet.Type = 1 
                             oStreamGet.Mode = 3 
                             oStreamGet.Open 
                             oStreamGet.Write formData 
                             oStreamGet.Position = dataStart(i) 
                             Set oStreamPut = Server.CreateObject("ADODB.Stream") 
                             oStreamPut.Type = 1 
                             oStreamPut.Mode = 3 
                             oStreamPut.Open 
                             oStreamPut.Write oStreamGet.Read(dataLength(i)) 
                             oStreamPut.SaveToFile(filePath) 
                             oStreamGet.Close 
                             Set oStreamGet = Nothing 
                             oStreamPut.Close 
                             Set oStreamPut = Nothing 
                          End If   
                       End If                    
                   End If 
               Next 
               Finished = True 
               Call ItemToColl 
            Else                
               Finished = False 
            End If 
        End Function

Private Function CheckFile 
            Dim oBoolean : oBoolean = True 
            If cFields = "" Then 
               oBoolean = oBoolean And True 
            Else 
               For i = 0 To itemCount - 1 
                   If extenArr(i) <> "" Then 
                      If InStr(1, Ucase(cFields), "|" & Ucase(Mid(extenArr(i), 2)) & "|") > 0 Then 
                         oBoolean = oBoolean And True 
                      Else 
                         sErrors = sErrors & "表单[ " & itemName(i) & " ]的文件格式错误！\n" & _ 
                                             "支持的格式为：" & Replace(Mid(cFields, 2, Len(cFields) - 1), "|", " ") & "\n\n" 
                         oBoolean = oBoolean And False      
                      End If 
                   End If  
               Next 
            End If 
            CheckFile = oBoolean 
        End Function

Private Function CreateFolder(byVal sLine, byVal sPath) 
            Dim oFso 
            Set oFso = Server.CreateObject("Scripting.FileSystemObject") 
            If Not oFso.FolderExists(sPath) Then 
               Dim regEx 
               Set regEx = New RegExp 
               regEx.Pattern = "^(.*)\\([^\\]*)$" 
               regEx.Global = False 
               regEx.IgnoreCase = True    
               sLine = sLine & regEx.Replace(sPath, "$2") & "|" 
               sPath = regEx.Replace(sPath, "$1")      
               If CreateFolder(sLine, sPath) Then CreateFolder = True  
               Set regEx = Nothing 
            Else 
               If sLine = "|" Then 
                  CreateFolder = True 
               Else 
                  Dim sTemp : sTemp = Mid(sLine, 2, Len(sLine) - 2) 
                  If InStrRev(sTemp, "|") = 0 Then 
                     sLine = "|" 
                     sPath = sPath & "\" & sTemp              
                  Else 
                     Dim Folder : Folder = Mid(sTemp, InStrRev(sTemp, "|") + 1) 
                     sLine = "|" & Mid(sTemp, 1, InStrRev(sTemp, "|") - 1) & "|" 
                     sPath = sPath & "\" & Folder 
                  End If 
                  oFso.CreateFolder sPath 
                  If CreateFolder(sLine, sPath) Then CreateFolder = True              
               End if 
            End If 
            Set oFso = Nothing   
        End Function

Function ParentFolder(byVal sPath) 
            Dim regEx 
            Set regEx = New RegExp 
            regEx.Pattern = "^(.*)\\[^\\]*$" 
            regEx.Global = True 
            regEx.IgnoreCase = True 
            ParentFolder = regEx.Replace(sPath, "$1") 
            Set regEx = Nothing              
        End Function

Private Function StrToByte(byVal sText)  
            For i = 1 To Len(sText)               
                StrToByte = StrToByte & ChrB(Asc(Mid(sText, i, 1)))    
            Next 
        End Function

Private Function ByteToStr(byVal sByte) 
            Dim oStream 
            Set oStream = Server.CreateObject("ADODB.Stream") 
            oStream.Type = 2 
            oStream.Mode = 3 
            oStream.Open 
            oStream.WriteText sByte 
            oStream.Position = 0 
            oStream.CharSet = "gb2312" 
            oStream.Position = 2 
            ByteToStr = oStream.ReadText 
            oStream.Close  
            Set oStream = Nothing          
        End Function

Private Function ItemToColl 
            For i = 0 To itemCount - 1 
                If Not Form.Exists(itemName(i)) Then 
                   Form.Add itemName(i), itemData(i) 
                End If 
            Next 
        End Function

Private Sub Class_Terminate 
            Form.RemoveAll 
            Set Form = Nothing 
        End Sub 
    End Class

If Request.ServerVariables("REQUEST_METHOD") = "POST" Then 
       Rem 建立上传类实例        
       Set oUpload = New Upload 
       Rem 指定允许上传文件的类型 
       oUpload.CheckFields = "|GIF|BMP|JPG|" 
       Rem 指定上传文件所存储的相对路径 
       oUpload.Folder = "51JS.COM-ZMM/UploadFile" 
       Rem 开始上传处理 
       oUpload.Start 
       If oUpload.Finished Then 
          Rem 上传成功，显示上传信息 
          Dim sHtml : sHtml = "" 
          sHtml = sHtml & "<center>" 
          sHtml = sHtml & "" 
          sHtml = sHtml & "<center style=""font-size: 15pt;color: red;"">上传表单数据</center>
" 
          sHtml = sHtml & "标题：
" & oUpload.Form("P_title") & "

" 
          sHtml = sHtml & "类型：
" & oUpload.Form("P_assort") & "

" 
          sHtml = sHtml & "小图：
服务器端路径：" & oUpload.Form("P_image_s") & "
<img src=""" & oUpload.Form("P_image_s") & """>

" 
          sHtml = sHtml & "中图：
服务器端路径：" & oUpload.Form("P_image_m") & "
<img src=""" & oUpload.Form("P_image_m") & """>

" 
          sHtml = sHtml & "大图：
服务器端路径：" & oUpload.Form("P_image_b") & "
<img src=""" & oUpload.Form("P_image_b") & """>

" 
          sHtml = sHtml & "介绍：
" & oUpload.Form("P_content") & "
"                    
          sHtml = sHtml & "" 
          sHtml = sHtml & "</center>" 
          Response.Write sHtml 
          Response.End 
       Else 
          Rem 上传失败，显示错误信息 
          Call ShowMsg(oUpload.ErrMessage, Request.ServerVariables("SCRIPT_NAME")) 
       End If 
       Rem 对话框提示函数 
       Function ShowMsg(byVal sText, byVal sTarget) 
           Dim sScript : sScript = "" 
           sScript = sScript & "<script language=""javascript"">" & vbCrlf & _ 
                               "window.alert('" & sText & "');" & vbCrlf & _ 
                               "window.location.replace('" & sTarget & "');" & vbCrlf & _ 
                               "</script>" 
           Response.Write sScript 
           Response.End 
       End Function           
    End If 
%>

<html> 
<head> 
<title>多文件、表单混合上传类</title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<style type="text/css"> 
    body { 
           margin: 0px; 
           border: 0px; 
           font-size: 10pt; 
    } 
    table { 
           border-collapse: collapse; 
           font-size: 10pt; 
    } 
    td { 
           font-size: 10pt; 
    } 
</style> 
<script language="javascript"> 
    function formCheck(_form) { 
         for (var i = 0; i < _form.elements.length; i ++) { 
              if (_form.elements[i].value == '') { 
                  window.alert('请将表单填写完整，提交失败！'); 
                  return false; 
              } 
         } 
         return true; 
    } 
</script> 
</head> 
<body>

<form action="<%=Request.ServerVariables("SCRIPT_NAME")%>" method="post" enctype="multipart/form-data" onsubmit="return formCheck(this);"> 
   <table width="400" align="center" cellpadding="2" cellspacing="0" border="1" rules="box"> 
      <tr height="26"> 
         <td colspan="2" align="center" style="font: 12pt;color: red;">上传功能测试

</td> 
      </tr> 
      <tr valign="top"> 
         <td height="30" style="padding-top:3px;">标题：</td> 
         <td><input type="text" name="P_title" size="20" autocomplete="off"></td> 
      </tr>                
      <tr valign="top"> 
         <td height="30" style="padding-top:3px;">类型：</td> 
         <td> 
             <select name="P_assort"> 
                 <option value="电子">电子</option> 
                 <option value="医疗">医疗</option> 
             </select> 
         </td> 
      </tr>     
      <tr valign="top"> 
         <td height="30" style="padding-top:3px;">小图：</td> 
         <td><input type="file" name="P_image_s" onkeydown="return false;" oncontextmenu="return false;" onpaste="return false;" ondragenter="return false;"></td> 
      </tr>                   
      <tr valign="top"> 
         <td height="30" style="padding-top:3px;">中图：</td> 
         <td><input type="file" name="P_image_m" onkeydown="return false;" oncontextmenu="return false;" onpaste="return false;" ondragenter="return false;"></td> 
      </tr>  
      <tr valign="top"> 
         <td height="30" style="padding-top:3px;">大图：</td> 
         <td><input type="file" name="P_image_b" onkeydown="return false;" oncontextmenu="return false;" onpaste="return false;" ondragenter="return false;"></td> 
      </tr>        
      <tr> 
         <td height="30" colspan="2" style="padding-top:3px;">介绍：</td> 
      </tr>  
      <tr> 
         <td height="30" colspan="2" valign="top"> 
            <textarea name="P_content" cols="50" rows="5"></textarea> 
         </td> 
      </tr> 
      <tr> 
         <td colspan="2" valign="top" align="center"> 
            
<input type="submit" value="提交"> <input type="reset" value="重置">

</td> 
      </tr>     
   </table> 
   </form> 
</body> 
</html>

写了几个类，希望对大家有用。

人气教程排行