js学习手册--Window 对象 -

lushuaiyin

浏览: 704609 次
性别:
来自: 北京

最近访客更多访客>>

hy811014

kelly_zsl

qq_24293111

fengyonglei

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2013-02 ( 20)
2013-01 ( 16)
2012-12 ( 24)
更多存档...

js学习手册--Window 对象

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=0
var t
function timedCount()
{
document.getElementById('txt').value=c
c=c+1
t=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=0
var t
function timedCount()
{
document.getElementById('txt').value=c
c=c+1
t=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<10
m=checkTime(m)
s=checkTime(s)
document.getElementById('txt').innerHTML=h+":"+m+":"+s
t=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.body
pbody.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>

分享到：