JS代码杂谈总结.doc
JS代码杂谈总结.doc
- 配套讲稿：
如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制：
部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词：
- JS 代码 杂谈 总结
- 资源描述：
-
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> <!-- function addOption() { for(var i=0;i<10;i++) { var sName = "Name" + i; var sValue = "value" + i; var oOption = document.createElement('OPTION'); oOption.text = sName; oOption.value = sValue; document.forms[0].select1.options.add(oOption); } } function upOption(id){ var frm = document.forms[0]; if(id!=0){ var sName = frm.select1.options[id].text; var sValue = frm.select1.options[id].value; var sName2 = frm.select1.options[id-1].text; var sValue2 = frm.select1.options[id-1].value; frm.select1.options[id-1]=new Option(sName,sValue); frm.select1.options[id]=new Option(sName2,sValue2); frm.select1.options.selectedIndex = (id-1); } } function downOption(id){ var frm = document.forms[0]; var s = frm.select1.options.length-1; if(id!=s){ var sName = frm.select1.options[id].text; var sValue = frm.select1.options[id].value; var sName2 = frm.select1.options[parseInt(id+1)].text; var sValue2 = frm.select1.options[parseInt(id+1)].value; frm.select1.options[parseInt(id+1)]=new Option(sName,sValue); frm.select1.options[id]=new Option(sName2,sValue2); frm.select1.options.selectedIndex = (id+1); } } //--> </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=展开阅读全文
咨信网温馨提示：1、咨信平台为文档C2C交易模式，即用户上传的文档直接被用户下载，收益归上传人（含作者）所有；本站仅是提供信息存储空间和展示预览，仅对用户上传内容的表现方式做保护处理，对上载内容不做任何修改或编辑。所展示的作品文档包括内容和图片全部来源于网络用户和作者上传投稿，我们不确定上传用户享有完全著作权，根据《信息网络传播权保护条例》，如果侵犯了您的版权、权益或隐私，请联系我们，核实后会尽快下架及时删除，并可随时和客服了解处理情况，尊重保护知识产权我们共同努力。
2、文档的总页数、文档格式和文档大小以系统显示为准(内容中显示的页数不一定正确)，网站客服只以系统显示的页数、文件格式、文档大小作为仲裁依据，个别因单元格分列造成显示页码不一将协商解决，平台无法对文档的真实性、完整性、权威性、准确性、专业性及其观点立场做任何保证或承诺，下载前须认真查看，确认无误后再购买，务必慎重购买；若有违法违纪将进行移交司法处理，若涉侵权平台将进行基本处罚并下架。
3、本站所有内容均由用户上传，付费前请自行鉴别，如您付费，意味着您已接受本站规则且自行承担风险，本站不进行额外附加服务，虚拟产品一经售出概不退款（未进行购买下载可退充值款），文档一经付费（服务费）、不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
4、如你看到网页展示的文档有www.zixin.com.cn水印，是因预览和防盗链等技术需要对页面进行转换压缩成图而已，我们并不对上传的文档进行任何编辑或修改，文档下载后都不会有水印标识（原文档上传前个别存留的除外），下载后原文更清晰；试题试卷类文档，如果标题没有明确说明有答案则都视为没有答案，请知晓；PPT和DOC文档可被视为“模板”，允许上传人保留章节、目录结构的情况下删减部份的内容；PDF文档不管是原文档转换或图片扫描而得，本站不作要求视为允许，下载前可先查看【教您几个在下载文档中可以更好的避免被坑】。
5、本文档所展示的图片、画像、字体、音乐的版权可能需版权方额外授权，请谨慎使用；网站提供的党政主题相关内容(国旗、国徽、党徽－－等)目的在于配合国家政策宣传，仅限个人学习分享使用，禁止用于任何广告和商用目的。
6、文档遇到问题，请及时联系平台进行协调解决，联系【微信客服】、【QQ客服】，若有其他问题请点击或扫码反馈【服务填表】；文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“【版权申诉】”，意见反馈和侵权处理邮箱：1219186828@qq.com；也可以拔打客服电话：0574-28810668；投诉电话：18658249818。
实名认证
平台协调中心【客服】
自信AI助手
微信客服
客服QQ
发送邮件
意见反馈
链接地址：https://www.zixin.com.cn/doc/7834984.html