JS代码杂谈总结.doc_咨信网zixin.com.cn

资源描述

JavaScript杂谈代码总结 QQ:541601368 JS代码杂谈总结序：本书乃是在工作学习中的一些总结，属于杂谈，呵呵，欢迎交流. 书中全部使用例子,通俗易懂. 目录 1,checkbox 的allchose和antichose 4 2,有关div的位置，隐藏显示和移动 5 3,accesskey的使用 6 4,表中表效果 7 5,有关select option 的操作 7 6, 动态增加属性 10 7, 动态改变select中option的次序 11 8,getElementsByTagName的用法 12 9, input 的样式 13 10,xml在html中的使用 14 11, innerText, innerHTML, outerHTML 17 12, button的css属性 17 14, 向下滚屏 18 15, opener 的使用 22 16,一个小游戏 23 17, 固定背景 27 18,glow滤镜的使用 30 19,body.innerHTML 30 21, select options change oeder 31 22, channelmode和 showModalDialog方式 32 22,char2asc 32 23,检验非空(有改进方法) 33 24,event.srcElement 34 25,利用div来模拟next step和forward 35 26, label for=chk1 38 28, clip 40 29, close without query 42 30,一个好玩但是没用的东东 42 32, 日历 44 33, 双击 48 34, delete table的tr 48 35, dhtml insertadjacent 49 36, dhtml的menu 50 37, 一堆属性 52 38, button_换行.html 54 39, can_input_select.html 55 40, 不为空的检测 55 41, 怎么用new Date()构造日期 57 42, argument_length.html 58 43， Cookie 59 44,比较全的计算函数 60 45, hotkey 62 46, 产生这种效果 4545-55-55 62 47,数据岛的运用 63 48,一些window的操作 65 49,HTML在线编辑器 67 50, IE5.5_new_popup.html 74 51, image_size.html 75 52, input_index_to_input.html 76 53,输入一定长度，自动跳入下一行 77 55, js_打印机.html 79 56, js代码生成器.html 79 57, js拼音.html 85 60, loading.html 110 61,local_disk.html 111 62,local_os.html 112 63,javascript到底分不分大小写，一看便知 113 64,DOM演示 115 65, marquee属性编辑器.html 需要壹IE5.5以上 115 66,menu，学习srcElement.sourceIndex的用法 120 67, new_file_value.html 121 68, next_Sibling.html 122 69,no_fresh.html 122 70, obj_constructor.html 123 71，object_exist_or_not.html 124 72，object_fireEvent事件.html 124 73，onPropertyChange事件 125 74，动态改变select的内容 126 75，reverse_html.html 128 76，右键菜单 128 77，这个比较难懂，呵呵，不过弄懂以后会收益非浅 131 78，dom的运用 132 79，scrollbar的位置 137 80，数组和document.createElement的运用，动态改变select 138 81，用div模拟select 的options 139 82,可以修改的select 140 83,看看 select 的innerText是什么样子的 142 84，select_左右移动.html 142 85，没有什么东东，就是一个思路，呵呵，看看就行 144 86，可视化表格生成器 (呵呵，不是我写的) 144 87，动态表格呵呵，也不是我写的 160 87，动态表格操作较全 166 88，textarea 的动态变换row 168 89.判断ctrl键和回车键的按下 168 90，给滚动条上darkshadow颜色 169 91，textarea_调试.html 171 92，小东西，只值得看一下 172 93当前页检索.html 172 94，可编辑的DIV.html，需要 IE5.5以上 174 95，两个控件的相对位置.html 174 97，怎么由名称找到控件.html 177 98，数据重排，这个比较牛 177 -------------------------------------------------------------------------------- 1,checkbox 的allchose和antichose <html> <head> <script> function antichose() { for(i=0;i<form1.checkbox.length;i++) {s="document.form1.checkbox["+i+"].click();"; eval(s);} } function allchose() { for(i=0;i<form1.checkbox.length;i++) {s="document.form1.checkbox["+i+"].checked=true;"; eval(s);} } </script> </head> <body> <form name=form1> <input type=checkbox name=checkbox> <input type=checkbox name=checkbox> <input type=checkbox name=checkbox> <input type=checkbox name=checkbox> <input type=button onclick="allchose();" value="全选"> <input type=button onclick="antichose();" value="反选"> </form> </body> </html> ----------------------------------------------------------------------------------- 2,有关div的位置，隐藏显示和移动 <html> <head> <script> function init() {block=blockdiv.style block.xpos=parseInt(block.left) block.ypos=parseInt(block.top) } function showObject(obj) {obj.visibility="visible" } function hideObject(obj) {obj.visibility="hidden" } function moveto(obj,x,y) {obj.xpos=x obj.left=obj.xpos obj.ypos=y obj.top=obj.ypos } function moveby(obj,x,y) {obj.xpos+=x obj.left=obj.xpos obj.ypos+=y obj.top=obj.ypos } </script> </head> <body onload="init()"> check values: <br><a href="javascript:alert('X:'+block.xpos)">横向位置</a> <br><a href="javascript:alert('Y:'+block.ypos)">竖向位置</a> <br><a href="javascript:showObject(block)">显示</a> <br><a href="javascript:hideObject(block)">隐藏</a> <br>移动moveto: <br><a href="javascript:moveto(block,100,200)">(100,200)</a> <br><a href="javascript:moveto(block,200,260)">(200,260)</a> <br><a href="javascript:moveto(block,300,340)">(300,340)</a> <br>相对移动moveby: <br><a href="javascript:moveby(block,10,0)">(10,0)</a> <br><a href="javascript:moveby(block,-10,0)">(-10,0)</a> <br><a href="javascript:moveby(block,0,10)">(0,10)</a> <br><a href="javascript:moveby(block,0,-10)">(0,-10)</a> <div id="blockdiv" style="position:absolute;left:100;top:200;width:30;visibility:visible;"> sktjyerlwo;ekrw; <IMG SRC="1.jpg" border=0> </div> </body> </html> ----------------------------------------------------------------------------------- 3,accesskey的使用 <html> <body bgcolor="#FFFFFF" text="#000000"> <form id="form1" method="post" action="" enctype="multipart/form-data"> <label for=inpu1 ACCESSKEY='m'></label> <label for=inpu4 ACCESSKEY='C'></label> <label for=inpu2 ACCESSKEY='X'></label> <label for=inpu3 ACCESSKEY='Z'></label> <br>Name <br> <input type="text" id="inpu2"> <br> Sex <br><input type="text" id="inpu3"> <br>School <br><input type="text" id="inpu1" value="123"> <br>Company <br> <input type="text" id="inpu4" value="123"> passowd: <input type=password> </form> <html> ----------------------------------------------------------------------------------- 4,表中表效果 <fieldset style="width:220" align="center"> <legend> 表中表效果Ⅱ </legend> <table frame=hsides border="1" bordercolorlight="#000000" bordercolordark="#ffffff" width="100%" cellspacing="1" cellpadding="0" height="78" > <tr bgcolor="#ffffff"> <td width="100%" height="76"> <p align="center"><font color="#000000">表格教程 SERRON</font><p> <td> </tr> </table> <table frame=hsides border="1" bordercolorlight="#000000" bordercolordark="#ffffff" width="100%" cellspacing="1" cellpadding="0" height="78" > <tr bgcolor="#ffffff"> <td width="100%" height="76"> <p align="center"><font color="#000000">表格教程 SERRON</font><p> <td> </tr> </table> </fieldset> ----------------------------------------------------------------------------------- 5,有关select option 的操作 <script> var seleObj,selObj2; function addall(selObj,selObj2) { for(i=0;i<(selObj.length);i++) { var gr = selObj2; var valOption = new Option; var result=0; if(selObj2.length>0) { for(k=0;k<(selObj2.length);k++) { if(selObj.options[i].value==selObj2.options[k].value) result++; } if(result==0) { valOption.text=selObj.options[i].text; valOption.value=selObj.options[i].value; gr.add(valOption); } } else { valOption.text=selObj.options[i].text; valOption.value=selObj.options[i].value; gr.add(valOption); } } } function add(selObj,selObj2) { doc=selObj; var i,m=0; for(i=0;i<(selObj.length);i++) { if(selObj.options[i].selected) { var gr = selObj2; var valOption = new Option; var result=0; if(selObj2.length>0) { for(k=0;k<(selObj2.length);k++) { if(selObj.options[i].value==selObj2.options[k].value) result++; } if(result==0) { valOption.text=selObj.options[i].text; valOption.value=selObj.options[i].value; gr.add(valOption); } } else { valOption.text=selObj.options[i].text; valOption.value=selObj.options[i].value; gr.add(valOption); } } } } function remove(selObj2) { doc=document; var i,m; for(i=(selObj2.length-1);i>=0;i--) { j=0; if(selObj2.options[i].selected) { selObj2.options[i]=null; } } } function removeall(selObj2) { for(i=(selObj2.length-1);i>=0;i--) { j=0; selObj2.options[i]=null; } } </script> <html> <body> <form name=form1> <table> <select name=select size="10" class=pl style=width:100pt multiple readonly> <option value=1>hg</option> <option value=2>hg</option> <option value=3>b</option> <option value=4>c</option> <option value=5>5</option> </select> <input type='button' name='Button' value='添加' onclick="add(document.form1.select,document.form1.wage_class)"> <input type='button' name='Button2' value='删除' onclick='remove(document.form1.wage_class)'> <input type='button' name='Button1' value='全加' onclick="addall(document.form1.select,document.form1.wage_class)"> <input type='button' name='Button3' value='全删' onclick='removeall(document.form1.wage_class)'> select name=wage_class size='10' style=width:100pt multiple readonly> <option value=6>6</option> <option value=7>7</option> <option value=8>8</option> <option value=9>9</option> <option value=10>10</option> </select> </form> </body> </html> ----------------------------------------------------------------------------------- 6, 动态增加属性 <html> <script> function ck() { var truename; document.form1.sele.options[0].truename="11111"; } function ck1() { alert(document.form1.sele.options[0].truename); } function ck2() { document.form1.sele.value="3"; alert(document.form1.sele.value); alert(document.form1.sele.options[document.form1.sele.selectedIndex].value); } </script> <body > <form name=form1> <select name=sele> <option value=1>1</option> <option value=2>2</option> <option value=3>3</option> </select> <input type=button onclick="ck();" value="给select增加属性"> <input type=button onclick="ck1();" value="检查；"> <input type=button onclick="ck2();" value="检查select的值；"> </form> <script> //ck(); </script> </body> </html> ----------------------------------------------------------------------------------- 7, 动态改变select中option的次序 <script>  </script> <body onload=addOption();> <form name=frm> <button onclick="upOption(select1.selectedIndex);"><font face="Webdings">5</font></button> <select id="select1" name=select1" multiple size="10" width=100 onchange=alert(this.value)></select> <button onclick="downOption(select1.selectedIndex);"><font face="Webdings">6</font></button> </form> ----------------------------------------------------------------------------------- 8,getElementsByTagName的用法 <HTML> <HEAD> <TITLE> New Document </TITLE> <script language=javascript> function ck() { var aa = document.getElementsByTagName("input"); var ss = ""; alert("网页里所有的input集合共有："+aa.length+"个！"); for (var i=0; i<aa.length; i++){ if (aa[i].type=="text")ss=ss+aa[i].value+"■"; } alert(ss); ss.value="sss"; alert(ss.value); var bb = ss.split("■") ; bb.value="wewwew"; alert(bb); alert(bb.length); } </script> </HEAD> <BODY> <FORM name=form1 METHOD=POST ACTION=""> <INPUT TYPE="text" NAME=txt> <INPUT TYPE="text" NAME=txt1> <INPUT TYPE="text" NAME=txt2> <INPUT TYPE="text" NAME=txt3> <INPUT TYPE="text" NAME=txt4> <INPUT TYPE=button onclick="ck();"> </FORM> </BODY> </HTML> ----------------------------------------------------------------------------------- 9, input 的样式 <input type=text style="border:1 solid #ffcc00"> 或 <input type=text style="border-left:none; border-right:none; border-top:none; border-bottom: 1 solid #000000"></textarea> ----------------------------------------------------------------------------------- 10,xml在html中的使用 <HTML><HEAD><TITLE> New Document </TITLE> <script> function ck() { alert(arrSel); document.all(arrSel[1]).options[document.all(arrSel[1]).selectedIndex].text; } </script> <BODY> <form name=form1> <select name=year></select> <select name=month></select> <select name=date></select> <select name=hour> </select> <input type=text name=result> <script> var arrSel=["year","month","date","hour"]; </script> <xml id=xmldata> <xmldata> <year value="2000"> <month value="1"> <date value="1"> <hour value="1"/> <hour value="2"/> </date> <date value="2"> <hour value="1"/> <hour value="2"/> </date> </month> <month value="2"> <date value="1"> <hour value="1"/> <hour value="2"/> </date> <date value="2"> <hour value="1"/> <hour value="2"/> </date> </month> </year> <year value="2001"> <month value="1"> <date value="1"> <hour value="1"/> <hour value="2"/> </date> <date value="2"> <hour value="1"/> <hour value="2"/> </date> </month> <month value="2"> <date value="1"> <hour value="1"/> <hour value="2"/> </date> <date value="2"> <hour value="1"/> <hour value="2"/> </date> </month> </year> <year value="2002"> <month value="1"> <date value="1"> <hour value="1"/> <hour value="2"/> </date> <date value="2"> <hour value="1"/> <hour value="2"/> </date> </month> <month value="2"> <date value="1"> <hour value="1"/> <hour value="2"/> </date> <date value="2"> <hour value="1"/> <hour value="2"/> </date> </month> </year> <year value="2003"> <month value="1"> <date value="1"> <hour value="1"/> <hour value="2"/> </date> <date value=

展开阅读全文