JavaScript对象
数组对象使用实例
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Array数组应用示例</title> <script type="text/javascript"> var fruit=new Array("苹果","梨子","橙子"); var fruit1=new Array("pear1","apple","orange"); with(document){ //push()在数组尾部添加数组元素，splice(m,n)删除在m位置的n个元素 write("<ol>"); write("<li>",fruit); write("<li>",fruit.join()); write("<li>",fruit.join("、"));//将数组内各个元素以分隔符连接成一个字符串，默认按逗号连接 write("<li>",fruit.reverse());//reverse倒序数组对象 write("<li>",fruit.concat(fruit1));//concat()方法用于连接两个或多个数组 write("<li>",fruit1.sort());//sort按字典顺序对数组元素重新排版 write("</ol>"); } </script> </head> <body> </body> </html>
运行结果：
String对象使用实例
<!doctype html> <html> <head> <meta charset="utf-8"> <title>String对象应用示例</title> <script type="text/javascript"> var str=new String("This is a test String"); var firstIndex=str.indexOf("s"); var lastIndex=str.lastIndexOf("s"); var arr=new Array(); arr=str.split(" "); len=str.length; result="第一个's'的位置是："+firstIndex+"<br>最后一个's'的位置是："+lastIndex+"<br>字符串对象的长度是："+len+"<br>数组arr中的各个元素为："+"<br>"+arr[0]+"<br>"+arr[1]+"<br>"+arr[2]+"<br>"+arr[3]+"<br>"+arr[4]; document.write(result); document.write("<br><br>字符串对象的字符颜色显示为'红色':"+str.fontcolor("red")); </script> </head> <body> </body> </html>
运行结果：
Math对象使用实例
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Math对象应用示例-随机排版图片</title> <style type="text/css"> /*以下是自适应屏幕宽度*/ div{float: left;height: 160px;width: 160px;margin: 5px;padding: 0} div img{border: 0;} div a{display: block;padding: 35px 12px} div.vbg a{display: block;padding: 10px 35px 15px;} div.dispcenter{position: relative;margin: 0 auto;width: 700px;padding: 0 50px 0 70px;background: none;float: none} </style> <script type="text/javascript" language="javascript"> document.write("<div class='dispcenter'>"); var picArr=new Array(); var m=0; for(i=1;i<=20;i++){ if(i<10) i="0"+i; picArr.push(i); } while(picArr.length>0){ i=Math.floor(Math.random()*(picArr.length-1)); if(picArr[i]=="03"||picArr[i]=="04"||picArr[i]=="06"||picArr[i]==11||picArr[i]==14||picArr[i]==17||picArr[i]==19||picArr[i]==20){ document.write("<div class='vbg'><ahref='photo/"+picArr[i]+".jpg'><img srt='photo/thumb/"+picArr[i]+".jpg' /></a></div>"); } picArr.splice(i,1); } document.write("</div>"); </script> </head> <body> </body> </html>
运行结果：未插入图片，请看主要代码
Date对象使用实例
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Date对象应用示例</title> <script type="text/javascript"> var today=new Date(); var year=today.getFullYear(); var month=today.getMonth()+1; var date=today.getDate(); var day=today.getDay(); var dayName=new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六"); var hour=today.getHours(); var minute=today.getMinutes(); var second=today.getSeconds(); hour=(hour<10)?"0"+hour:hour; minute=(minute<10)?"0"+minute:minute; second=(second<10)?"0"+second:second; var time=hour+":"+minute+":"+second; document.write("现在的时间是"+year+"年"+month+"月"+date+"日"+time+" "+dayName[day]); </script> </head> <body> </body> </html>
运行结果：
-------------------------------------------------------------------------
以下为浏览器对象:
创建警告对话框
<!doctype html> <html> <head> <meta charset="utf-8"> <title>警告对话框创建示例</title> <script type="text/javascript"> document.title="警告对话框创建示例"; function fun(testObject){ if(testObject.value.length<6) alert("密码长度不得小于6位！"); } </script> </head> <body> <form> 请输入密码： <input type="password" name="pwd" onBlur="fun(this);"> </form> </body> </html>
运行结果：
创建确认对话框
<!doctype html> <html> <head> <meta charset="utf-8"> <title>创建确认对话框示例</title> <script type="text/javascript"> function isConfirm(){ if(confirm("你确认删除此信息吗？")) alert("信息已成功删除！"); else alert("你取消了删除！"); } </script> </head> <body> <form method="post" name="form1"> <input type="button" value="删除" onClick="isConfirm()"> </form> </body> </html>
运行结果：
创建信息提示对话框
<!doctype html> <html> <head> <meta charset="utf-8"> <title>创建信息提示对话框示例</title> <script type="text/javascript"> var name=prompt("请输入你的姓名","刘先生"); document.write("你的名字是："+name); </script> </head> <body> </body> </html>
运行结果：
使用open()打开窗口
<!doctype html> <html> <head> <meta charset="utf-8"> <title>打开指定窗口（使用open()打开窗口示例）</title> <script language="javascript"> var newWin=window.opener("Date对象应用示例.html","temp","left=50,top=120,"+"width=360,heigth=100,resizable=1"); </script> </head> <body> </body> </html>
运行结果：请看主要代码
setInterval定时器应用实例
<!doctype html> <html> <head> <meta charset="utf-8"> <title>setInterval定时器应用示例</title> <script language="javascript"> var sec=0; timerID=setInterval("count()",1000); function count(){ num.innerHTML=sec++; } </script> </head> <body> 停留时间：<font ID="num" face="impact" color="red" size="7">0</font> 秒钟：<input type="button" value="停止" onClick="clearInterval(timerID)"> </body> </html>
运行结果：
setTimeout定时器使用
<!doctype html> <html> <head> <meta charset="utf-8"> <title>setTimeout定时器应用示例</title> <style type="text/css"> div{font-size: 20px;font-weight: bold;font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";} </style> <script type="text/javascript"> msg=new Array();//存放显示文字数组 msg.push("______"); msg.push("你知道吗?"); msg.push("______"); msg.push("金庸写的14本书可以连成一个对联："); msg.push("______"); msg.push("“飞雪连天射白鹿，笑书神侠倚碧鸳”"); msg.push("______"); msg.push("J.K.罗琳写的7本书也可以连成一句话："); msg.push("______"); msg.push("“哈哈哈哈哈哈哈”"); for(i=0;i<msg.length/2;i++){ document.write("<div></div>"); } interval=100;//定时器运行时间 seq=0;//显示文字的位置 i=0;//文字数组下标 j=0;//div数组下标 function Scroll(){ if(i%2==0) document.getElementsByTagName("div").item(j).innerHTML=msg[i].substring(seq,seq+1) else document.getElementsByTagName("div").item(j).innerHTML=msg[i].substring(0,seq+1); seq++; if(seq>=msg[i].length){ seq=0; i++; if(i%2==0) j++;//要显示文字才换行 interval=900; } if(i>=msg.length){ i=0; j=0; setTimeout("clearText()",2000);//文字全部显示后停2s再清空 return;//退出Scroll()函数 } timerScroll=setTimeout("Scroll()",interval); interval=100; } //清空文本 function clearText(){ for(k=0;k<(document.getElementsByTagName("div").length);k++){ document.getElementsByTagName("div").item(k).innerHTML=""; } interval=100; Scroll(); } </script> </head> <body onLoad="Scroll()" style="margin: 0 80px"> </body> </html>
运行结果：
location对象应用实例
<!doctype html> <html> <head> <meta charset="utf-8"> <title>location对象应用实例</title> <script type="text/javascript"> function currLocation(){ alert(window.location); } function newLocation(){ window.location="setInterval定时器应用示例.html"; } </script> </head> <body> <input type="button" onClick="currLocation()" value="显示当前的URL"> <input type="button" onClick="newLocation()" value="改变URL"> </body> </html>
运行结果：
document对象应用实例
<!doctype html> <html> <head> <meta charset="utf-8"> <title>document对象应用实例</title> <script> document.title="document对象应用示例"; var update_date=document.lastModified; document.write("本网页最后更新的时间是："+update_date); </script> </head> <body> </body> </html>
运行结果：
使用image对象实现鼠标移入时更换显示图片
<!doctype html> <html> <head> <meta charset="utf-8"> <title>使用image对象实现鼠标移入移出时更换显示图片</title> </head> <body> <img name="myimage" src="350724200004263015.jpg"; onMouseOver="document.myimage.src='file:///F:/DW/%E7%AB%99%E7%82%B9/350724200004263015.jpg';" onMouseOut="document.myimage.src='file:///F:/DW/%E7%AB%99%E7%82%B9/350724200004263015.jpg';"> </body> </html>
运行结果：请看主要代码
form对象（使用表单对象创建注册页面）
<!doctype html> <html> <head> <meta charset="utf-8"> <title>使用表单对象创建注册页面</title> <style type="text/css"> .inSize{height: 120px;width: 600px;font-size: 36px;font-weight: bold} </style> <script type="text/javascript"> function check(){ obj=document.form1; name=obj.uName.value; if(name=="") return; if(obj.uSex.checked==true){ sex="男"; document.getElementById("textInfo").style.cssText="background-color:#000;color:#FFF;"; } else{ sex="女"; document.getElementById("textInfo").style.cssText="background-color:#FF9900;color:#000;"; } index=obj.city.selectedIndex; selCity=obj.city.options[index].text; ah=new Array(); for(i=4;i<=8;i++){ if(obj.elements[i].checked==true) ah.push(obj.elements[i].value); } if(ah==""){ alert("请选择一项爱好!"); return; } str="您所填写的信息：\n"; str+="您的姓名是："+name; str+=", "+sex; str+=",居住在"+selCity; str+="。您喜欢"+ah+"。"; document.getElementById("textInfo").value=str; } function getElements(){ num=document.forms[0].length; num="一共用了 "+num+" 个表单元素"; alert(num); } function setFocus(){ document.getElementById("uName").focus(); } </script> </head> <body onLoad="setFocus()"> 请填写个人信息：<br /><br /> <div style="border-style: solid;border-color: #f00;border-width: 1px;width: 600px"> <form id="form1" name="form1" method="post" action="javascript:check()"> <label>姓名： <input type="text" name="uName" id="uName" /> <br /><br /> </label> 性别： <label> <input name="radio" type="radio" id="uSex" value="uSex" checked="checked" /> 男 </label> <label> <input type="radio" name="radio" id="uSex2" value="uSex" /> 女 </label> <br /><br /> <label>居住城市： <select name="city" id="city"> <option>北京</option> <option>上海</option> <option selected="selected">广州</option> <option>沈阳</option> <option>长春</option> <option>哈尔滨</option> </select> </label> <br /><br /> 爱好： <label> <input type="checkbox" name="zq" id="zq" value="足球" /> 足球 </label> <label> <input type="checkbox" name="yy" id="yy" value="音乐" /> 音乐 </label> <label> <input type="checkbox" name="ly" id="ly" value="旅游" /> 旅游 </label> <label> <input type="checkbox" name="yx" id="yx" value="游戏" /> 游戏 <input type="checkbox" name="qt" id="qt" value="其他" /> 其他<br /><br /> </label> <input type="submit" name="button" id="button" value="提交" /> <input type="reset" name="button2" id="button2" value="重置" /> </form></div><br /> <textarea name="textInfo" cols="50" rows="4" readonly="readonly" class="inSize" id="textInfo"></textarea> <br /><br /> <input type="button" name="button3" id="button3" value="表单所用的元素个数" onClick="getElements()"/> </body> </html>
运行结果：
致千里！
