天狼星

js收集

2007年6月3日 | 分类: D/XHTML CSS | 标签:

js之基类

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

分隔条

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”> <HTML> <HEAD> <TITLE> 分隔条 </TITLE> <script language=”javascript”> <!– //———————————— // CopyRight (c) 宝玉 2006 //———————————— var oSplitter, oTdSplitter, oTdLeft, oTdRight, oTable; var posTdSplitter, posTable; var bLoaded = false; var bStart = false; var iPadding = 0; function Position(x, y) { this.x = x; this.y = y; } function GetPosition(obj) { var objThis = obj; var oBody = document.body; var oLeft = oTop = 0; while (objThis!=oBody) { oLeft += objThis.offsetLeft; oTop += objThis.offsetTop; objThis = objThis.offsetParent; } return new Position(oLeft, oTop); } function fnInit() { oSplitter = document.getElementById(“splitter”); oTdSplitter = document.getElementById(“tdSplitter”); oTdLeft = document.getElementById(“tdLeft”); oTdRight = document.getElementById(“tdRight”); oTable = document.getElementById(“table”); posTable = GetPosition(oTable); oSplitter.style.height = oTdSplitter.offsetHeight; oSplitter.style.width = oTdSplitter.offsetWidth; bLoaded = true; } function fnMouseDown(event) { if (bLoaded == false) { alert(“页面加载未完成，请稍候！”); return; } posTdSplitter = GetPosition(oTdSplitter); iPadding = posTdSplitter.x – event.clientX; oSplitter.style.left = posTdSplitter.x; oSplitter.style.top = posTdSplitter.y; oSplitter.style.display = “block”; if (oSplitter.setCapture) oSplitter.setCapture(); bStart = true; } function fnMouseUp(event) { if (bStart == true) { oSplitter.style.display = “none”; if (event.clientX > posTable.x && event.clientX < posTable.x + oTable.offsetWidth – oTdSplitter.offsetWidth) { oTdLeft.style.width = event.clientX – posTable.x; } if (oSplitter.releaseCapture) oSplitter.releaseCapture(); bStart = false; } } function fnMouseMove(event) { if (bStart == true) { oSplitter.style.left = event.clientX + iPadding; } } //–> </script> </HEAD> <BODY onload=”fnInit();” onmouseup=”fnMouseUp(event);” onmousemove=”fnMouseMove(event);” style=”margin:0px;” onselectstart=”return false;”> <div style=”position: absolute;width:4px;height:400px;background-color: black;z-index:9999;display:none;cursor: col-resize;” id=”splitter”></div> <table cellspacing=”0″ cellpadding=”0″ width=”100%” border=”0″ height=”100%” id=”table”> <tr> <td width=”50%” id=”tdLeft”>leftcontent</td> <td style=”width: 8px; overflow:hidden;cursor: col-resize;border-left:1px solid black;border-right:1px solid black;” id=”tdSplitter” onmousedown=”fnMouseDown(event);”>&nbsp;</td> <td id=”tdRight”>rightcontent</td> </tr> </table> </BODY> </HTML>

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

表单非空万能检测:)

<form method=”post” action=”" onsubmit=”return fn(this);”> <input type=”text” name=”a1″ /> <input type=”text” name=”a2″ /> <input type=”radio” name=”b2″ /> <input type=”radio” name=”b2″ /> <input type=”radio” name=”b2″ /> <input type=”text” name=”a3″ /> <input type=”radio” name=”b1″ /> <input type=”radio” name=”b1″ /> <input type=”checkbox” name=”c1″ /> <input type=”checkbox” name=”c1″ /> <input type=”submit” /> </form> <form method=”post” action=”" onsubmit=”return fn(this);”> <input type=”text” name=”a1″ /> <input type=”text” name=”a2″ /> <input type=”radio” name=”b2″ /> <input type=”radio” name=”b2″ /> <input type=”radio” name=”b2″ /> <input type=”text” name=”a3″ /> <input type=”radio” name=”b1″ /> <input type=”radio” name=”b1″ /> <input type=”checkbox” name=”c1″ /> <input type=”checkbox” name=”c1″ /> <input type=”submit” /> </form> <script> function fn(myform) { var ipt; var textboxs = new Array(); // text类型的input集合 var radioList = new Object(); // radio类型的input集合，因为Radio比较特殊，要一组一组检测，所以这里用一个Hashtable，根据radio的name作为Key来保存所有的Radio集合 var radioes; // 每一个name对应的Radio集合 var inputs = myform.getElementsByTagName(“INPUT”); // 取form下的所有input // 遍历所有INPUT // for (var i=0; i<inputs.length; i++) { ipt = inputs[i]; if (ipt.type == “text”) { textboxs[textboxs.length] = ipt; } // 本来只要检测radiobox的，后来要增加checkbox， //因为处理方式一样，只要这里修改一下就可以了，但是命名没有同步修改:) // else if (ipt.type == “radio” || ipt.type == “checkbox”) { radioes = radioList[ipt.name]; if (!radioes) { radioes = new Array(); } radioes[radioes.length] = ipt; radioList[ipt.name] = radioes; } } // 非空检测 // for (var i=0; i<textboxs.length; i++) { var txt = textboxs[i]; if (txt && txt.value == “”) { alert(“please fill:” + txt.name); txt.focus(); return false; } } // 遍历所有Radiobox组 // for (var radioboxName in radioList) { radioes = radioList[radioboxName]; var chk = false; // 是否有选中的 var radio; // 检测该组Radio是否都选中了 // for (var j=0; j<radioes.length; j++) { var radio = radioes[j]; if (radio.checked) { chk = true; break; } } if (!chk) // 没有选中的 { alert(“please select: ” + radioboxName); return false; } } return true; } </script>

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

写的一段拖动对象的代码

原文地址：http://bbs.51js.com/viewthread.php?tid=10914

<SCRIPT LANGUAGE=”JavaScript”> <!– var currentMoveObj = null; //当前拖动对象 var relLeft; //鼠标按下位置相对对象位置 var relTop; function f_mdown(obj) { currentMoveObj = obj; //当对象被按下时，记录该对象 currentMoveObj.style.position = “absolute”; relLeft = event.x – currentMoveObj.style.pixelLeft; relTop = event.y – currentMoveObj.style.pixelTop; } window.document.onmouseup = function() { currentMoveObj = null; //当鼠标释放时同时释放拖动对象 } function f_move(obj) { if(currentMoveObj != null) { currentMoveObj.style.pixelLeft=event.x-relLeft; currentMoveObj.style.pixelTop=event.y-relTop; } } //–> </SCRIPT> <BODY> <TABLE width=”100″ border=1 onselectstart=”return false” style=”position:absolute;left:50;top:50″ onmousedown=”f_mdown(this)” onmousemove=”f_move(this)”> <TR> <TD bgcolor=”#CCCCCC” align=”center” style=”cursor:move”>title1</TD> </TR> <TR> <TD align=”center” height=”60″>content</TD> </TR> </TABLE> <TABLE width=”100″ border=1 onselectstart=”return false” style=”position:absolute;left:350;top:250″ onmousedown=”f_mdown(this)” onmousemove=”f_move(this)”> <TR> <TD bgcolor=”#CCCCCC” align=”center” style=”cursor:move”>title2</TD> </TR> <TR> <TD align=”center” height=”60″>content</TD> </TR> </TABLE> </BODY>

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

表格斜线

原贴地址：http://bbs.51js.com/viewthread.php?tid=1086

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME=”Generator” CONTENT=”EditPlus”> <META NAME=”Author” CONTENT=”"> <META NAME=”Keywords” CONTENT=”"> <META NAME=”Description” CONTENT=”"> </HEAD> <script Language=”javascript”> function a(x,y,color) {document.write(“<img border=’0′ style=’position: absolute; left: “+(x+20)+”; top: “+(y+20)+”;background-color: “+color+”‘ src=’px.gif’ width=1 height=1>”)} </script> <body leftmargin=20 topmargin=20> <TABLE border=0 bgcolor=”000000″ cellspacing=”1″ width=400> <TR bgcolor=”FFFFFF”> <TD id=”td1″> </TD> <TD>张三</TD> <TD>李四</TD> <TD>王五</TD> </TR> <TR bgcolor=”FFFFFF”> <TD>数学</TD> <TD>55</TD> <TD>66</TD> <TD>77</TD> </TR> <TR bgcolor=”FFFFFF”> <TD>英语</TD> <TD>99</TD> <TD>68</TD> <TD>71</TD> </TR> <TR bgcolor=”FFFFFF”> <TD>语文</TD> <TD>33</TD> <TD>44</TD> <TD>55</TD> </TR> </TABLE> <script> function line(x1,y1,x2,y2,color) { var tmp if(x1>=x2) { tmp=x1; x1=x2; x2=tmp; tmp=y1; y1=y2; y2=tmp; } for(var i=x1;i<=x2;i++) { x = i; y = (y2 – y1) / (x2 – x1) * (x – x1) + y1; a(x,y,color); } } //line(1,1,100,100,”000000″); line(td1.offsetLeft,td1.offsetTop,td1.offsetLeft+td1.offsetWidth,td1.offsetTop+td1.offsetHeight,’#000000′) </script> </BODY> </HTML>

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

取得鼠标所在位置的对象

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”> <HTML> <HEAD> <TITLE> 取得鼠标所在位置的对象 </TITLE> <META NAME=”Author” CONTENT=”宝玉 [url]http://www.nwpubbs.net[/url]“> </HEAD> <script language=”javascript”> <!– function fnGetTable( oEl ) { try{ while( null != oEl && oEl.tagName!=”TABLE” ) { oEl = oEl.parentElement; } return oEl; } catch(e) { return null; } } function pos() { try{ oElement = document.elementFromPoint(event.x,event.y); oElement = fnGetTable(oElement); if(oElement.tagName==”TABLE”) show.innerText=oElement.id; } catch(e) {} } // –> </script> <BODY onmousemove=”pos()”> <table border=”1″ cellpadding=”" cellspacing=”" width=”" id=”table1″> <tr> <td>table1</td> </tr> </table> <table border=”1″ cellpadding=”" cellspacing=”" width=”" id=”table2″> <tr> <td>table2</td> </tr> </table> <table border=”1″ cellpadding=”" cellspacing=”" width=”" id=”table3″> <tr> <td>table3</td> </tr> </table> <table border=”1″ cellpadding=”" cellspacing=”" width=”" id=”table4″> <tr> <td>table4</td> </tr> </table> <table border=”1″ cellpadding=”" cellspacing=”" width=”" id=”table5″> <tr> <td>table5</td> </tr> </table> <table border=”1″ cellpadding=”" cellspacing=”" width=”" id=”table6″> <tr> <td>table6</td> </tr> </table> 鼠标当前在： </BODY> </HTML>

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

如何在一段文字里点一下就可以在里面插入一段文字？

如何在一段文字里点一下就可以在里面插入一段文字？ 如题，不要用编辑器之类的来实现。高手们帮忙呀。 <SCRIPT LANGUAGE=”JavaScript”> <!– document.onclick =function(){ var sel = document.selection; if (sel!=null) { var rng = sel.createRange(); if (rng!=null) rng.pasteHTML(“插入的文字”); } } //–> </SCRIPT>

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

记录滚动条位置

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”> <HTML> <HEAD> <META NAME=”Author” CONTENT=”宝玉（[url]http://www.nwpubbs.net[/url] [url]http://www.webuc.net[/url]）”> <TITLE> 记录滚动条位置 </TITLE> <script language=”javascript”> <!– function SetCookie(sName, sValue) { date = new Date(); s = date.getDate(); date.setDate(s+1);			//expire time is one month late!, and can’t be current date! document.cookie = sName + “=” + escape(sValue) + “; expires=” + date.toGMTString(); } function GetCookie(sName) { // cookies are separated by semicolons var aCookie = document.cookie.split(“; “); for (var i=0; i < aCookie.length; i++) { // a name/value pair (a crumb) is separated by an equal sign var aCrumb = aCookie[i].split(“=”); if (sName == aCrumb[0]) { return unescape(aCrumb[1]);} } // a cookie with the requested name does not exist return null; } function fnLoad() { document.body.scrollLeft = GetCookie(“scrollLeft”); document.body.scrollTop = GetCookie(“scrollTop”); } function fnUnload() { SetCookie(“scrollLeft”, document.body.scrollLeft) SetCookie(“scrollTop”, document.body.scrollTop) } window.onload = fnLoad; window.onunload = fnUnload; // –> </script> </HEAD> <BODY> dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd </BODY> </HTML>

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

记录滚动条位置（使用userdate）

<!– Created by 宝玉 , 2004-2-21 [url]http://www.webuc.net[/url] [url]http://www.nwpubbs.net[/url] Description: 记录页面上次的滚动条位置 –> <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”> <HTML> <HEAD> <TITLE> 记录滚动条位置 </TITLE> <script language=”javascript”> <!– // 获取当前文件名 function getFileName() { var url = this.location.href var pos = url.lastIndexOf(“/”); if(pos == -1) pos = url.lastIndexOf(“\\”) var filename = url.substr(pos +1) return filename; } function fnLoad() { with(window.document.body) { addBehavior (“#default#userData”);	// 使得body元素可以支持userdate load(“scrollState” + getFileName());	// 获取以前保存在userdate中的状态 scrollLeft = getAttribute(“scrollLeft”);	// 滚动条左位置 scrollTop = getAttribute(“scrollTop”); } } function fnUnload() { with(window.document.body) { setAttribute(“scrollLeft”,scrollLeft); setAttribute(“scrollTop”,scrollTop); save(“scrollState” + getFileName()); // 防止受其他文件的userdate数据影响，所以将文件名加上了 // userdate里的数据是不能跨目录访问的 } } window.onload = fnLoad; window.onunload = fnUnload; // –> </script> </HEAD> <BODY> dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd </BODY> </HTML>

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

获取当前系统字体

<!– 宝玉 2004-2-26 [url]http://www.webuc.net[/url] [url]http://www.nwpubbs.net[/url] –> <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”> <HTML> <HEAD> <TITLE> 获取当前系统字体和排版样式 </TITLE> <SCRIPT LANGUAGE=”JavaScript”> <!– function getSystemFonts(){ var a=dlgHelper.fonts.count; var fArray = new Array(); var oDropDown = document.all.fonts; for (i = 1;i < dlgHelper.fonts.count;i++){ fArray[i] = dlgHelper.fonts(i); var aOptions = oDropDown.options; var oOption = document.createElement(“OPTION”); aOptions.add(oOption); oOption.text = fArray[i]; oOption.Value = i; } } function getBlockFormats(){ var a=dlgHelper.blockFormats.count; var fArray = new Array(); var oDropDown = document.all.formats; oDropDown.setAttribute(“id”,”FormatList”); for (i = 1;i < dlgHelper.blockFormats.count;i++) { fArray[i] = dlgHelper.blockFormats(i); var aOptions = oDropDown.options; var oOption = document.createElement(“OPTION”); aOptions.add(oOption); oOption.text = fArray[i]; oOption.Value = i; } } //–> </SCRIPT> </HEAD> <BODY onload=”getSystemFonts();getBlockFormats()”> 系统字体和排版样式 SystemFont and BlockFormats <Select NAME=”fonts” onchange=”document.body.style.fontFamily = this.options[this.selectedIndex].text”> </Select> <Select NAME=”formats” onchange=”document.body.style.fontFamily = this.options[this.selectedIndex].text”> </Select> <OBJECT ID=dlgHelper CLASSID=”clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b” WIDTH=”0px” HEIGHT=”0px”></OBJECT> </BODY> </HTML>

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

发表评论 | Trackback

目前还没有任何评论.

您必须在登录后才能发布评论.

2012 年二月

一二三四五六日

« 六

1 2 3 4 5

6 7 8 9 10 11 12

13 14 15 16 17 18 19

20 21 22 23 24 25 26

27 28 29
分类目录
- AJAX JS
- Android
- ARTICLE
- ASP
- COMPUTER
- D/XHTML CSS
- DB
- DESIGN
- FLASH
- JAVA
- network
- PHP
- SYSTEM
- 未分类
功能
- 注册
- 登录
- 文章 RSS
- 评论 RSS
- WordPress.org
标签
北京纪事对白开源程序房地产经济正则男人必读编码老婆股市经济项目管理 mingle ajax apache AVAYA cisco pix515e css CTI flex HTTP JAVA javascript memcached php Mysql PHP php qq sns Server Server Monitor sns flash 多图上传 VDN

2012 年二月
一	二	三	四	五	六	日
« 六
	1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29

« 国际上十四个优秀网页设计审核站网页中各度量单位的比较 »

置顶

js收集

分类目录

功能

标签