js 使用(二)

来源：互联网发布：淘宝双十一活动报名编辑：程序博客网时间：2024/05/22 03:52

6. js文件编写 1）写一个js文件，内有一个函数 function validate(uid,pwd) { if(uid=="") { alert("用户名不能为空"); return false; } if(pwd=="") { alert("密码不能为空"); return false; } return true; } 2) 写一个a.html文件，引用这个js文件 <html> <head> <script language="JavaScript" src="a.js"></script> </head> <body> <form name="form1"> <input type="text" name="uid"/><BR> <input type="text" name="pwd"/><BR> <input type="submit" onClick="return validate(form1.uid.value,form1.pwd.value);"/> </form> </body> </html>

6、js正则表达式及其应用 /: 转译 ^ $：开始和结束 . ：匹配一个字符串中任何单个的打印或非打印字符，除了换行符 (/n) 之外。 *+？：0-n,1-n,0-1 ？：当该字符紧跟在任何一个其他限制符 (*, +, ?, {n}, {n,}, {n,m}) 后面时，匹配模式是非贪婪的。非贪婪模式尽可能少的匹配所搜索的字符串，而默认的贪婪模式则尽可能多的匹配所搜索的字符串。例如，对于字符串 "oooo"，'o+?' 将匹配单个 "o"，而 'o+' 将匹配所有 'o'。 {n},{n,}，{n,m}: n,>=n,n<=x<=m x|y： x或y [xyz],[^xyz] : 包含待匹配的列表与未包含 [a-z], [^a-z]: a到z任一个，相反 /num 匹配 num，其中 num 是一个正整数。对所获取的匹配的引用(即第一个括号)。例如，'(.)/1' 匹配两个连续的相同字符。 /d = [0-9] /D = [^0-9] 匹配一个非数字字符 /n,/r: 换行/回车 /s 匹配任何空白字符，包括空格、制表符、换页符等等。等价于 [ /f/n/r/t/v]。 /S 匹配任何非空白字符。等价于 [^ /f/n/r/t/v]。 /t 匹配一个制表符。等价于 /x09 和 /cI。 /w 匹配包括下划线的任何单词字符。等价于'[A-Za-z0-9_]'。 /W 匹配任何非单词字符。等价于 '[^A-Za-z0-9_]'。 /b 匹配一个单词边界，也就是指单词和空格间的位置。 /B 匹配非单词边界。 /expression/ : 分隔符之间放入表达式模式的各种组件来构造一个正则表达式。 /a/="a" : 匹配所搜索字符串中的该字符本身。 () : 可用来分组，如/^Chapter|Section [1-9]$/ 应为：/^(Chapter|Section) [1-9][0-9]{0,1}$/

escape 方法返回一个包含了 charstring 内容的字符串值（ Unicode 格式）。所有空格、标点、重音符号以及其他非 ASCII 字符都用 %xx 编码代替，其中 xx 等于表示该字符的十六进制数。例如，空格返回的是 "%20" 。 stringObj.replace(rgExp, replaceText) ：返回根据正则表达式进行文字替换后的字符串的复制。 rgexp.test(str) : 返回一个 Boolean 值，它指出在被查找的字符串中是否存在模式。

<body> <form name="form1" method="post"> 用户标识：<input type="text" name="uid"/><BR> 用户年龄：<input type="text" name="age"/><BR> 用户邮箱：<input type="text" name="email"/><BR> 出生日期：<input type="text" name="birth"/><BR> <input type="submit" onclick="return validate();"/> </form> </body> <script> //判断是否包含特殊字符 function validate() { isNull(); isValid(); isNum(); isBetween(); isEmail(); isDate(); } function isNull() { var uid = form1.uid.value; if(uid=="") { alert("用户标识不能为空"); return false; } } function isValid() { var str = ".*/%$#@!~&^)(_+/=-`"; var uid = form1.uid.value; for(var i=0; i<uid.length; i++) { if(str.indexOf(uid.charAt(i))>=0) { alert("用户标识不能包括特殊字符"); return false; } } } function isAge() { var age = form1.age.value; if(age=="") return false; if(isNaN(age)) { alert("testAge年龄必须是数字");return false; } } function isNum() { var age = form1.age.value; var bool = /^/s*(/d*/.?/d*)/s*$/g.test(age); if(!bool) { alert("isnum年龄必须是数字");return false; } } function isBetween() { var age = parseInt(form1.age.value); if(age<18 || age>60) { alert("年龄不能小于是18岁，不能大于60岁");return false; } } function isEmail() { var email = form1.email.value; if(email=="") return false; var bool = /^([a-z]|[A-Z])+/d*@/w+/.([a-z]|[A-Z])+$/g.test(email); if(!bool) { alert("邮箱必须是xxx@yyy.zzz格式");return false; } } //判断日期形如：yyyy-MM-dd function isDate() { var birth = form1.birth.value; if(birth=="") return false; var bool = /^([1-2]/d{3})-((0?[1-9])|(1[0-2]))-((0?[1-9])|([1-2][0-9])|(3[0-1]))$/g.test(birth); if(!bool) { alert("出生日期必须是yyyy-MM-dd格式");return false; } } //将特殊字符替换掉，如+=%2B function URLencode(sStr) { return escape(sStr). replace(//+/g, '%2B'). replace(//"/g,'%22'). replace(//'/g, '%27'). replace(////g,'%2F'); } function isUndef(v) { return typeof(v) == "undefined"; } </script>

var v2 = document.createElement("input");v2.type="button";v2.value="提交";v2.onclick=function() { alert(v1.value); var bool = /^[1-2]/d{3}-((0?[1-9])|(1[0-2]))-((0?[1-9])|([1-2][1-9])|(3[0-1]))$/g.test(v1.value); if(bool) alert("yes"); else alert("no");}

document.body.appendChild(v1);document.body.appendChild(v2);

</script>

7. 使用window对象弹出各种样式的窗口 function opening() { window.open('第一章 js.html','_blank','height=200,width=300,scrollbars=yes,resizable=yes,toolbar=no,menubar=no,location=no,status=yes'); } function modal() { window.showModalDialog('a.html',"",'center:yes;dialogHeight:268px;dialogWidth:216px;unadorned:yes;scroll:off;help: No; status:no;resize:no'); } function modeless() { window.showModelessDialog('a.html',"",'center:yes;dialogHeight:268px;dialogWidth:216px;unadorned:yes;scroll:off;help: No; status:no;resize:no'); }

8. 制动浮动的DIV广告层 <input id="btn" type="button" value="弹出层" onclick="showdiv();">

function showdiv(){ var old = document.getElementById("my"); if(old != undefined){ return; }

//产生一个背景层 var bodyheight = document.body.scrollHeight < document.body.clientHeight ? document.body.clientHeight : document.body.scrollHeight; var bodywidth = document.body.scrollWidth < document.body.clientWidth ? document.body.clientWidth : document.body.scrollWidth;

var backdiv = document.createElement("div"); backdiv.style.position = "absolute"; backdiv.style.left = 0; backdiv.style.top = 0; backdiv.style.width = bodywidth; backdiv.style.height = bodyheight; backdiv.style.backgroundColor = "black"; backdiv.className = "op1";

document.body.appendChild(backdiv);

///////////////////////////////////////////////

var div = document.createElement("div"); div.id="my"; div.style.position = "absolute"; //设置成对位置

//关联事件 div.onmousedown = down; div.onmouseup = up;

var closeBtn = document.createElement("input"); closeBtn.type = "button"; closeBtn.value = "X"; closeBtn.onclick = function(){ div.removeNode(true); backdiv.removeNode(true); }

div.appendChild(closeBtn);

var hr = document.createElement("hr"); div.appendChild(hr);

var txt = document.createTextNode( " 书山有路勤为径，学海无涯苦作舟"); div.appendChild(txt);

//div.style.overflow = "scroll"; div.style.backgroundColor = "yellow"; div.style.width = 300; div.style.height = 200;

//计算出按钮的绝对位置 var btn = document.getElementById("btn"); var l = btn.offsetLeft; var t = btn.offsetTop;

var newobj = btn; while(newobj = newobj.offsetParent){ l += newobj.offsetLeft; t += newobj.offsetTop; }

div.style.top = t + btn.offsetHeight; div.style.left = l;

document.body.appendChild(div); } //--> </script>

9. 复选框全选/全不选效果 <body> <input type="checkbox" name="c"><br> <input type="checkbox" name="c"><br> <input type="checkbox" name="c"><br> <input type="checkbox" name="c"><br> <input type="checkbox" name="c"><br> <input type="button" value="全" onclick="selectAll(true)"> <input type="button" value="反" onclick="selectIns();"> <input type="button" value="不" onclick="selectAll(false)"> </body> <script language="JavaScript">  </script>

10、制作下拉框的省市级联效果 <BODY onload = "chg()"> 专业： <select onchange="zy()" name="zy" id="zy"> <option value="0">ACCP软件部</option> <option value="1">BENET网络部</option> </select> 课程： <select name="kc" id="kc"></select> </BODY> <SCRIPT LANGUAGE="JavaScript"> <!-- var arr = new Array(2); arr[0] = new Array("C语言","JAVA","MYSql"); arr[1] = new Array("SQLServer数据库","企业建筑"); function zyselect(){ //var zy = document.getElementById("zy"); //var kc = document.getElementById("kc"); //getElementsByName不行 var zy = document.all.zy; var kc = document.all("kc");

var idx = zy.options[zy.selectedIndex].value; for(var i = kc.options.length - 1; i >= 0; i --){ kc.remove(i); } for(var i = 0; i < arr[idx].length; i ++){ var opt = document.createElement("option"); kc.add(opt); opt.innerText = arr[idx][i]; opt.value = arr[idx][i]; } } //--> </SCRIPT>

11. 只能输入数字 <a href="http://www.baidu.com" onclick="return go();">百度</a><hr> 请输入数字:<input onkeypress="return onlyNum();">

function go(){ var v = window.confirm("真的要去百度吗?"); return v; } function onlyNum(){ if(event.keyCode > 57 || event.keyCode < 48 && event.keyCode != 46) return false; return true; }

12. 预览图片 <html> <head> <script language="JavaScript">  </script> </head> <body> 请选择图片:<input type="file" name="f" onchange="pre();"> <div id="img"></div> </body> </html>

13. 像GOOGLE一样的实时提示 <html> <script type="text/javascript"> var values = new Array("Aptech", "Abcdeft", "A", "b"); //点击文档的任何一个地方,提示都会消失 document.onclick = function(){ deleteDiv(); } //删除层 function deleteDiv(){ var kv = document.getElementById("google"); if(kv) kv.removeNode(true); } //查找匹配的关键字 function search(){ //防止产生N多个DIV,所以先判断是否存在,如果存在,则删除. deleteDiv(); //创建一个层，用于显示实时提示 var div = document.createElement("div"); div.id = "google"; div.style.position = "absolute";//设置位置为绝对位置 //控制层的位置和大小 //位置 var top = document.all.key.offsetTop; var left = document.all.key.offsetLeft; //大小 var width = document.all.key.offsetWidth; var height = 0;

//设置 div.style.top = top + document.all.key.offsetHeight - 1; div.style.left = left; div.style.width = width - 2;

//效果:边框样式框和背景色 div.style.backgroundColor = "white"; div.style.borderTopStyle = "solid"; div.style.borderBottomStyle = "solid"; div.style.borderLeftStyle = "solid"; div.style.borderRightStyle = "solid";

//注意,边框是加在区域外围的,所以在设置宽度的时候减掉了1 + 1 = 2个像素 div.style.borderTopWidth = 1; div.style.borderBottomWidth = 1; div.style.borderLeftWidth = 1; div.style.borderRightWidth = 1;

//填充数据 var value = document.all.key.value; var f = false; for(var i = 0; i < values.length; i ++){ if(values[i].substr(0, value.length).toLowerCase() == value.toLowerCase()){ f = true;

//每个选项填充到div中 var span = document.createElement("<div>"); span.innerText = values[i]; span.style.fontSize = 14; span.style.padding = "2px"; div.appendChild(span);

//触发每个项目的鼠标移入移出事件 span.onmouseover = function(){ event.srcElement.style.cursor = "hand"; event.srcElement.style.backgroundColor = "blue"; event.srcElement.style.color = "white"; } span.onmouseleave = function(){ event.srcElement.style.cursor = "default"; event.srcElement.style.backgroundColor = "white"; event.srcElement.style.color = "black"; } //单击选项时将该选项的值填充到文本框. span.onclick = function(){ document.all.key.value = event.srcElement.innerText; //填充完毕后删除DIV deleteDiv(); } } }

//将层追加到页面 if(f){ document.body.appendChild(div); }

//如果文本框中没有内容,则删掉DIV if(document.all.key.value.length == 0){ deleteDiv(); } } </script> </head> <body style="font-size:14px"> 关键字：<input name="key" size="50" onpropertychange = "search()"> <div id="d"></div> </body> </html>

14. 动态销毁元素 <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </HEAD> <BODY> <input type="button" value="销毁" onclick="kill();"><br> <img id="img" src = "Creek.jpg"> </BODY> </HTML>

15. 选中行 <html> <script language="JavaScript"> <!-- function newColor(tr){ tr.style.backgroundColor = "blue"; tr.style.color = "white"; }

function oldColor(tr){ tr.style.backgroundColor = "white"; tr.style.color = "black"; } //--> </script> <body> <table border="1" width="100%"> <tr onmouseover="newColor(this);" onmouseout="oldColor(this);"> <td>aaaa</td> <td>bbbb</td> <td>cccc</td> </tr> <tr onmouseover="newColor(this);" onmouseout="oldColor(this);"> <td>dddd</td> <td>eeee</td> <td>ffff</td> </tr> </table> <input onfocus="this.select()" value="中华人民共和国"> </body> </html>

16. 块的展开 <html> <script language="JavaScript">  </script> <body> <div onclick="ex('id1');" style="cursor:hand; font-weight:bold">沁园春·雪</div> <div id="id1" style="display:none">     北国风光，<BR>     千里冰封，<BR>     万里雪飘。<BR> </div> </body> </html>