<script language="javascript"> function GetCharCount( textObj ) { if (textObj.length > 10) { alert("请重新输入你的姓名（少于10个字符）"); } else { alert("您输入了"+textObj.length+"个字符"); } } </script> 请输入您的姓名(少于10个字符): Name: <INPUT TYPE="text" NAME="userName" onBlur="GetCharCount(userName.value)">
onLoaded()
<html> <head> <title>装载文档</title> <body onload="onLoaded()"> <!--绑定onload事件处理程序--> <script language="javascript" type="text/javascript"> function onLoaded() // onload事件处理程序 { alert("文档加载完毕！"); // 文档加载完毕时输出提示信息 } </script> </body> </html>
onUnload
<html> <head> <title>卸载文档</title> </head> <body onUnload="alert('欢迎您再来')"> <a href="http://www.baidu.com">百度</a> </body> </html>
onFocus
onBlur
得到焦点与失去焦点
<html> <head> <title>得到焦点与失去焦点</title> <script language="javascript"> function OnFocus() // onFocus事件处理程序 { Body.style.background="red"; // 网页背景设置为红色 } function OnBlur() // onBlur事件处理函数 { Body.style.background="gray"; // 网页背景设为灰色 } </script> </head> <body id="Body" onFocus="OnFocus()" onBlur="OnBlur()"><!--绑定事件处理程序--> <label id="info">失去焦点时窗口背景变为灰色，得到焦点时为红色。 </label> </body> </html>
window.onerror
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> </head> <body> <script language="javascript"> function errmsg(message,url,line) { alert("您的程序有错误:"+message+"url:"+url+" "+"line:"+line+" "); return true; } window.onerror=errmsg; </script> <form id="form1" name="form1" method="post" action=""> <label> <input type="submit" name="Submit" value="提交" onclick="po()" /> </label> </form> </body> </html>
window.onload
window.onunload
<script language="javascript"> //开始javascript程序 function SayHello() //自定义函数 { alert("Hello!"); //弹出一个对话框 } function SayBey() //自定义一个函数 { alert("bye"); //弹出一个对话框，显示bye的信息 } window.onload=SayHello; //页面载入时调用SayHello函数 window.onunload=SayBey; // 页面关闭时调用SayBey函数 </script>
onbeforeunload
<script language="javascript"> function OnClosing() // 关闭前事件处理程序 { if( window.confirm("真的要关闭？") ) // 询问 { return true; // 确定关闭 } else { return false; // 不关闭 } } </script> <body onbeforeunload="return OnClosing()"/> <!--绑定事件处理程序-->
window.prompt
<script language="javascript"> function qustion() { var result result=window.prompt("未来世界哪个国家最强大？", "中国"); if(result=="中国") alert("你真聪明!!!") else alert("请你再思考一下!"); } </script> <input type="submit" name="Submit" value="答题" onclick="qustion()" />
window.defaultStatus
<script language="javascript"> window.defaultStatus="本站提供影片下载、音像素材、电子书籍等服务。" // 状态栏上的广告信息 </script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>范例9-14</title> <script language="javascript"> function SetStatus() { d=new Date(); document.write(d); document.write("</br>"); //alert("1111"); time=d.getHours()+":"+d.getMinutes()+":"+d.getSeconds(); document.write(time); console.log(time); window.status=time; } //setInterval("SetStatus()"，10); </script> <form id="form1" name="form1" method="post" action=""> <label> <input type="submit" name="Submit" value="提交" onclick="SetStatus()" /> </label> </form> </head> <body > 请观察左下角的状态栏 </body> </html>
window.open
<script language="javascript"> function op() { window.open("http://www.baidu.com","baidu","heigth=300,width=200"); } op(); </script>
<script language="javascript"> function name() {//http://www.baidu.com window.open("","myForm","height=300,width=200,scrollbars=yes"); } name(); </script>
关闭窗口
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>关闭当前文档</title> <script language="javascript"> function closeWindow() { if(self.closed) { alert("窗口已经关闭") } else { self.close() } } </script> </head> <body> <label> <input type="submit" name="Submit" onClick="closeWindow()" value="关闭" > </label> </body> </html>
操作新开窗口中的数据
<html> <head> <title>操作新开窗口中的数据</title> </head> <body> <form name="myForm"> <input type="text" name="myText1"><br> <input type="text" name="myText2"><br> <input type="button" value="查看效果" onClick="openWindow(myText1.value,myText2.value)"> </form> <script language="javascript" type="text/javascript"> <!-- myForm.myText1.value = "第1个文本框"; myForm.myText2.value = "第2个文本框"; function openWindow(t1,t2) { var myWin = window.open("new.html","","width=300,height=300"); myWin.myForm.myText1.value = "由父级窗口输入的文字："+t1; myWin.myForm.myText2.value = "由父级窗口输入的文字："+t2; } --> </script> </body> </html>
window.scrollBy
<html> <head> <title>范例9-16</title> <body> <script language="javascript"> var tm = setInterval( "ScroWin()", 100 ); // 设定计时器 function ScroWin() // 定时器函数 { window.scrollBy( 0, 1 ); // 向上滚动1px } </script> 浏览器中的内容大于其显示区域时，<br> 一般会出现滚动条方便查看被遮挡的内容。<br> 用户可以拖动滚动条，也可以通过程序来控制窗口的滚动。<br> 调用window对象的scrollBy或scrollTo方法即可滚动文档，<br> 在一些设计比较人性化的文章阅读页面上就看到这样的应用，<br> 文章自动上滚，方便阅读<br> </body> </html>
window.setTimeout
<script language="javascript"> var ident; ident=window.setTimeout("alert('延时时间到了')",3000) </script>
周期执行
setInterval("setsDate()",1000);
<html> <head> <title>周期执行</title> <script language="javascript" type="text/javascript"> <!-- function myFun() { setInterval("setsDate()",1000); //设置1秒钟调用一次 } function setsDate() { var myDate = new Date(); //创建一个日期对象 myForm.showDate.value = myDate.toLocaleString(); //显示日期和时间 } --> </script> </head> <body onLoad="myFun()"> <form name="myForm"> 当前时间为：<input type="text" id="showDate" name="showDate" size="25"> </form> </body> </html>
<script language="javascript"> var tm = 0; // 计时器 var count = 0; // 计数器 function ReloadPage() // 定时器函数 { if( window.confirm("是否要重新加载？") ) // 询问用户是否要重新加载 { window.location.reload(); // 重新加载 } else { if( ++count==3 ) // 3次尝试后将自动移除计时器 { clearInterval( tm ); // 清除计时器 } } } tm = setInterval("ReloadPage()", 1000); // 设定定时器 </script>
<html> <head> <title>取消延迟执行</title> <script language="javascript"> function showClock() { d=new Date() //document.form1.Time.value=d.toLocaleString() window.status=d.toLocaleString() ident=window.setTimeout("showClock()",1000); } </script> </head> <body> <p> <input type="submit" name="Submit" value="开始" onClick="showClock()"> <input type="submit" name="Submit2" value="取消延迟" onClick="window.clearTimeout(ident);")> </p> </body> </html>
<script language="javascript"> //javascript程序 function OnClick() //按钮事件处理 { for (i=0;i<window.frames.length;i++) //逐一访问框架 { window.frames[i].document.write("向第" + (i+1) + "个子窗口输出内容"); //在子窗口文档中输入 window.frames[i].document.close(); //关闭输出 } } </script> <!--框架1--> <iframe src="#" height="50"></iframe><br/> <!--框架2--> <iframe src="#" height="50"></iframe><br/> <!--框架3--> <iframe src="#" height="50"></iframe><br/> <!--框架4--> <input type="button" value="查看窗口的内容" onClick="OnClick()"> <!--按钮-->
<script language="javascript"> var adrList = new Array(); // 创建一个用于存储地址的数组 function addNewAddressAndStart( ) // 定义函数，实现添加地址和设定间隔时间 { for( ;; ) // 循环要求用户输入网址 { var adr = prompt( "请添加一个新地址，此步骤将连续添加多个地址，要停止添加请按“取消”：", "" ); if( adr == null ) // 用户取消输入时跳出当前循环 break; adrList.push( adr ); // 将用户输入的网址存储到数组的尾部 } var interal = prompt( "请设定打开新窗口的时间间隔，以毫秒为单位：", "1000" ); // 要求用户输入时间间隔 if ( interal == null ) // 如果用户忽略上一步则自动设置为5秒 interal = 5000; setInterval( "start()", interal ); // 使用setInterval设置间隔(interal/1000)秒就运行一次start函数 refreshList(); // 刷新地址列表 } var curAD = 0; // 使用就是curAD以指示当前要打开的页面 var oldWin = null; // 使用变量oldWin引用当前打开的窗口 function start( ) // 定义函数打开新窗口 { if( oldWin != null ) // 定义函数打开新窗口 oldWin.close(); if( adrList.length == 0 ) // 如果地址列表为空，则函数什么也不做，直接返回 { Addresslist.value = "地址列表为空";return; } oldWin = window.open( adrList[curAD], "", "width=400,height=300" ); // 打开新窗口并引用至oldWin变量 curAD ++ ; // 将指示器curAD递增 if( curAD == adrList.length ) // 如果已经超过数组的末端则置0，指向数组首元素 curAD = 0; } function refreshList() // 刷新地址列表 { Addresslist.value = ""; for( index in adrList ) Addresslist.value += adrList[index] + " "; } </script> <!--定义一个文本域用以显示地址列表--> <textarea id="Addresslist" style=" 349px; height: 263px" readonly="readOnly"></textarea><br /> <!--定义一个按钮用以添加新地址--> <input type="button" onclick="addNewAddressAndStart()" value="添加新地址" style=" 349px" />