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

2020-11-27 来源：星星旅游

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>

<menu id="item_0"> 
 <li> 命令一 
 <li> 命令二 
 </menu> 
 <menu id="item_1"> 
 <li> 命令三 
 <li> 命令四 
 <li> 命令五 
 <li> 命令六 
 </menu> 
 <menu id="item_2"> 
 <li> 命令七 
 <li> 命令八 
 </menu> 
 
 
 菜单一 
 菜单二 
 菜单三 
 菜单四

[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.对联效果

[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://www.gxlcms.com/Uploads/' + _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;">类型

</mip-showmore>
    </div>
    <div class="qz_prev">
        
        
    </div>
</div>

<script type="text/javascript">
  $(function () {
    //弹窗2
    $('.menu_icon').click(function () {
      $('.tbox').show();
    })
    //关闭
    $('.close').click(function () {
      $('.tbox').hide();
    })
  })
</script>

全部栏目

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