js学习手册--Window 对象

来源：互联网发布：ubuntu 回到根目录编辑：程序博客网时间：2024/05/29 09:23

1.1显示对话框

<html><head><script type="text/javascript">function disp_alert(){alert("我是一个消息框！")}</script></head><body><input type="button" onclick="disp_alert()" value="显示消息框" /></body></html>

2.1显示带有折行的对话框

<html><head><script type="text/javascript">function disp_alert(){alert("再打个招呼。这里演示了" + "\n" + "如何在消息框中添加折行。")}</script></head><body><input type="button" onclick="disp_alert()" value="显示消息框" /></body></html>

3.1显示确认框confirm

<html><head><script type="text/javascript">function show_confirm(){var r=confirm("Press a button!");if (r==true)  {  alert("You pressed OK!");  }else  {  alert("You pressed Cancel!");  }}</script></head><body><input type="button" onclick="show_confirm()" value="Show a confirm box" /></body></html>

4.1显示提示框prompt

<html>
<head>
<script type="text/javascript">
function disp_prompt()
{
var name=prompt("请输入您的名字","Bill Gates")
if (name!=null && name!="")
    {
    document.write("你好，" + name + "！今天过得好吗？")
    }
}
</script>
</head>
<body>

<input type="button" onclick="disp_prompt()" value="显示一个提示框" />

</body>
</html>

5.1通过点击按钮来打开一个窗口

<html><head><script type="text/javascript">function open_win() {window.open("http://www.w3school.com.cn")}</script></head><body><form><input type=button value="打开窗口" onclick="open_win()"></form></body></html>

6.1打开一个新窗口，并控制其外观

<html><head><script type="text/javascript">function open_win(){window.open("http://www.w3school.com.cn","_blank","toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=400, height=400")}</script></head><body><form><input type="button" value="打开窗口" onclick="open_win()"></form></body></html>

7.1通过一次点击打开多个窗口

<html><head><script type="text/javascript">function open_win() {window.open("http://www.microsoft.com/")window.open("http://www.w3school.com.cn/")}</script></head><body><form><input type=button value="打开窗口" onclick="open_win()"></form></body></html>

8.1把用户带到一个新的地址

<html><head><script type="text/javascript">function currLocation(){alert(window.location)}function newLocation(){window.location="/index.html"}</script></head><body><input type="button" onclick="currLocation()" value="显示当前的 URL"><input type="button" onclick="newLocation()" value="改变 URL"></body></html>

9.1重新加载文档

<html><head><script type="text/javascript">function reloadPage(){window.location.reload();}</script></head><body><input type="button" value="重新加载页面" onclick="reloadPage()" /></body></html>

10.1在窗口的状态栏设置文本

<html><body><script type="text/javascript">window.status="Some text in the status bar!!"</script><p>请看状态栏中的文本。</p></body></html>

11.1打印页面

<html><head><script type="text/javascript">function printpage()  {  window.print()  }</script></head><body><input type="button" value="打印本页" onclick="printpage()" /></body></html>

12.1跳出框架

<html><head><script type="text/javascript">function breakout()  {  if (window.top!=window.self)     {    window.top.location="/example/hdom/tryjs_breakout.htm"    }  }</script></head><body><input type="button" onclick="breakout()" value="跳出框架！"></body></html>

13.1简单的计时 setTimeout

<html><head><script type="text/javascript">function timedMsg(){var t=setTimeout("alert('5 seconds!')",5000)}</script></head><body><form><input type="button" value="显示计时的消息框！" onClick = "timedMsg()"></form><p>点击上面的按钮。5 秒后会显示一个消息框。</p></body></html>

14.1另一个简单的计时

<html><head><script type="text/javascript">function timedText(){var t1=setTimeout("document.getElementById('txt').value='2 seconds!'",2000)var t2=setTimeout("document.getElementById('txt').value='4 seconds!'",4000)var t3=setTimeout("document.getElementById('txt').value='6 seconds!'",6000)}</script></head><body><form><input type="button" value="显示计时的文本！" onClick="timedText()"><input type="text" id="txt"></form><p>在按钮上面点击。输入框会显示出已经流逝的 2、4、6 秒钟。</p></body></html>

15.1无穷循环中的计时

<html><head><script type="text/javascript">var c=0var tfunction timedCount(){document.getElementById('txt').value=cc=c+1t=setTimeout("timedCount()",1000)}</script></head><body><form><input type="button" value="开始计时！" onClick="timedCount()"><input type="text" id="txt"></form><p>请点击上面的按钮。输入框会从 0 开始一直进行计时。</p></body></html>

16.1无穷循环中的计时 - 带有一个停止按钮

<html><head><script type="text/javascript">var c=0var tfunction timedCount(){document.getElementById('txt').value=cc=c+1t=setTimeout("timedCount()",1000)}function stopCount(){clearTimeout(t)}</script></head><body><form><input type="button" value="开始计时！" onClick="timedCount()"><input type="text" id="txt"><input type="button" value="停止计时！" onClick="stopCount()"></form><p>请点击上面的“开始计时”按钮。输入框会从 0 开始一直进行计时。点击“停止计时”可停止计时。</p></body></html>

17.1一个时钟

<html><head><script type="text/javascript">function startTime(){var today=new Date()var h=today.getHours()var m=today.getMinutes()var s=today.getSeconds()// add a zero in front of numbers<10m=checkTime(m)s=checkTime(s)document.getElementById('txt').innerHTML=h+":"+m+":"+st=setTimeout('startTime()',500)}function checkTime(i){if (i<10)   {i="0" + i}  return i}</script></head><body onload="startTime()"><div id="txt"></div></body></html>

18.1创建 pop-up

<html><head><script type="text/javascript">function show_popup(){var p=window.createPopup()var pbody=p.document.bodypbody.style.backgroundColor="red"pbody.style.border="solid black 1px"pbody.innerHTML="这是一个 pop-up！在 pop-up 外面点击，即可关闭它！"p.show(150,150,200,50,document.body)}</script></head><body><button onclick="show_popup()">显示 pop-up！</button></body></html>