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

时间:2020-05-11 人气:0

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

[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> 
<div> </div>

[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> 
<div></div>

[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 += '<div>'; 
             _html += this.content;  
             _html += '</div>'; 
             _html += '<div>'; 
             _html += this.content;                
             _html += '</div>'; 
             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 += '<a href="' + _array[0][i] + '">'; 
                      _html += '<img onerror="javascript:this.src='/skin1/img/error.jpg';" src="' + _array[1][i] + '" alt="' + _array[2][i] + '" border="0" '; 
                      _html += 'onmouseover="window.clearInterval(oInterval);" onmouseout="oInterval = window.setInterval(\'oRotator.doScroll()\', ' + this.delay + ');">'; 
                      _html += '</a></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/imageshttps://img.qb5200.com/download-x/default/profile.gif', 'http://bbs.51js.com/imageshttps://img.qb5200.com/download-x/default/email.gif', 'http://bbs.51js.com/imageshttps://img.qb5200.com/download-x/default/pm.gif', 'http://bbs.51js.com/imageshttps://img.qb5200.com/download-x/default/edit.gif', 'http://bbs.51js.com/imageshttps://img.qb5200.com/download-x/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', '<a href="update.aspx">编辑</a>  <a href="delete.aspx">删除</a>']; 
        _items[_items.length] = ['标题二', '内容二', '2006-6-21 14:20:12', '<a href="update.aspx">编辑</a>  <a href="delete.aspx">删除</a>']; 
        _items[_items.length] = ['标题三', '内容三', '2006-6-21 20:45:36', '<a href="update.aspx">编辑</a>  <a href="delete.aspx">删除</a>']; 
        oListView.addListItem(_items);                                     
    }

attachEvent('onload', initListView); 
</script> 
<center> 
    <div></div> 
</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 & "<div>" 
          sHtml = sHtml & "<center style=""font-size: 15pt;color: red;"">上传表单数据</center>
" 
          sHtml = sHtml & "标题：
" & oUpload.Form("P_title") & "

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

" 
          sHtml = sHtml & "小图：
服务器端路径：<a href=""" & oUpload.Form("P_image_s") & """ target=""_blank"">" & oUpload.Form("P_image_s") & "</a>
<img onerror="javascript:this.src='/skin1/img/error.jpg';" src=""" & oUpload.Form("P_image_s") & """>

" 
          sHtml = sHtml & "中图：
服务器端路径：<a href=""" & oUpload.Form("P_image_m") & """ target=""_blank"">" & oUpload.Form("P_image_m") & "</a>
<img onerror="javascript:this.src='/skin1/img/error.jpg';" src=""" & oUpload.Form("P_image_m") & """>

" 
          sHtml = sHtml & "大图：
服务器端路径：<a href=""" & oUpload.Form("P_image_b") & """ target=""_blank"">" & oUpload.Form("P_image_b") & "</a>
<img onerror="javascript:this.src='/skin1/img/error.jpg';" src=""" & oUpload.Form("P_image_b") & """>

" 
          sHtml = sHtml & "介绍：
" & oUpload.Form("P_content") & "
"                    
          sHtml = sHtml & "</div>" 
          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>

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

8.TabPage类

<comment id="Content1"> 
    标题： <input> 
       
    来源： <input> 
       
</comment> 
<comment id="Content2">       
    分类： <select><option>计算机网络</option><option>计算机软件</option></select>       
</comment>       
<comment id="Content3">       
    测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试       
</comment>

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

加载全部内容