window对象代表打开的浏览器窗口，是Web浏览器所有内容的主容器。window对象是整个对象链条结构的最高层，是其他对象的父对象，在调用window对象的方法和属性时，可以省略window对象的引用
一、window对象的属性和方法
1、status属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>status属性的应用</title> </head> <body οnlοad="load()"> <script language="JavaScript"> function load(){ window.status = "这里可以显示状态栏消息！"; } </script> </body> </html> 运行示例，效果如下（IE7+）：
2、prompt()函数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>prompt()函数</title> </head> <body> <script> //prompt第二个参数为文本域里的内容 var answer = prompt("请输入你的名字：");//取消和输入空字符，返回false;非空时返回输入的文本域的文本 if(answer){ alert("欢迎"+answer+"光临本站!"); } </script> </body> </html>
运行示例，效果如下：
3、alert()函数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>settimeout()、cleartimeout()方法</title> </head> <body> <form name="login" method="get" > <p>用户名:<input type="text" name="username" /></p> <p>密 码:<input type="password" name="psw"/></p> <input type="submit" value="登录" οnclick="check()"/> </form> <script> function check() { if(document.login.username.value ==""){ alert("用户名不能为空！"); } if (document.login.psw.value ==""){ alert("密码不能为空！"); } } </script> </body> </html>
运行示例，效果如下：
4、close()方法关闭窗口
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>close()方法关闭窗口</title> </head> <body> <input style="background: lavenderblush" type="submit" value="点击此按钮将关闭窗口" οnclick="JavaScript:self.close()"/> </body> </html>
运行示例，效果如下：
5、settimeout()、cleartimeout()方法
案例：闹钟程序
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>setTimeout()函数、clearTimeout()函数之闹钟程序--javascript</title> </head> <style> *{margin: 0;padding: 0} section{ font-size: 35px; width: 40%; height: auto; margin: 140px auto; color: white; padding: 10px; } section form #set p input { width: 40%; height: 80px; font-size: 35px; text-align: center; } section form #button input{ width: 100px; height: 30px; cursor: pointer; background-color:#666; color:white ; border: none; } section form #button input:active{ border: 1px solid black; font-weight: bold; } section audio{ cursor:pointer; margin-top: 10px; } </style> <body οnlοad="nowclock();" bgcolor="#03a9f4"> <section> <form method="get" name="alarmClock"> <div > <p>当前时间：<input type="text" name="nowTime" /></p><br> <p>设置闹钟：<input type="text" name="setTime"/></p> </div> <div > <p> <input type="button" value="启动闹钟" οnclick="setclock();hint()"/> <input type="button" value="取消所定闹钟" οnclick="closeHint()"/> <input type="button" value="退出闹钟" οnclick="JavaScript:self.close()"/> </p> </div> </form> <audio controls="controls" ></audio> </section> <script> function nowclock() {//上面的name值不能与函数名同，否则提示没有这个函数 var timer = ""; var now = new Date(); var nowHours = now.getHours(); var nowMinutes = now.getMinutes(); var nowSeconds= now.getSeconds(); timer+=nowHours; timer+=((nowMinutes<10)?":0":":")+nowMinutes; timer+=((nowSeconds<10)?":0":":")+nowSeconds; window.document.alarmClock.nowTime.value = timer; setTimeout('nowclock()',0); } function setclock() {//上面的name值不能与函数名同，否则提示没有这个函数 var timer = ""; var now = new Date(); var nowHours = now.getHours(); var nowMinutes = now.getMinutes(); var nowSeconds= now.getSeconds(); timer+=nowHours; timer+=((nowMinutes<10)?":0":":")+nowMinutes; timer+=((nowSeconds<10)?":0":":")+nowSeconds; temp = window.document.alarmClock.setTime.value; if ( temp == timer){ var audio = document.getElementById('audio'); audio.src="music/誓言 - 求佛.mp3"; audio.play(); // alert("起床了"); } time = setTimeout('setclock()',1000); } function closeHint() { clearTimeout(time); } function hint() { alert("已经为您开启闹钟提示~~！") } </script> </body> </html>
案例效果图：
案例源码：JS闹钟程序.zip
本文作者原创，转载请注明出处，谢谢合作！
转载请注明原文地址: https://www.6miu.com/read-40291.html
