泉州浮桥网页设计培训班实例笔记HTML DOM 实例(十二)-Window 对象

Window 对象

显示对话框

<html><head>

<script type=”text/javascript”>

function disp_alert(){

alert(“我是一个消息框!”)

}

</script>

</head>

<body>

<input type=”button” onclick=”disp_alert()” value=”显示消息框” />

</body></html>

显示带有折行的对话框

<html><head>

<script type=”text/javascript”>

function disp_alert(){

alert(“再打个招呼。这里演示了” + “\n” + “如何在消息框中添加折行。”)

}

</script>

</head><body>

<input type=”button” onclick=”disp_alert()” value=”显示消息框” />

</body></html>

显示确认框

<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>

显示提示框

<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>

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

<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>

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

<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>

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

<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>

把用户带到一个新的地址

<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>

重新加载文档

<html><head>

<script type=”text/javascript”>

function reloadPage(){

window.location.reload();

}

</script>

</head>

<body>

<input type=”button” value=”重新加载页面” onclick=”reloadPage()” />

</body></html>

在窗口的状态栏设置文本

<html><body>

<script type=”text/javascript”>

window.status=”Some text in the status bar!!”

</script>

<p>请看状态栏中的文本。</p>

</body></html>

打印页面

<html><head>

<script type=”text/javascript”>

function printpage()  {

window.print()

}

</script>

</head>

<body>

<input type=”button” value=”打印本页” onclick=”printpage()” />

</body></html>

跳出框架

<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>

调整窗口的大小

<html>

<head>

<script type=”text/javascript”>

function resizeWindow(){

top.resizeBy(-100,-100)

}

</script>

</head>

<body>

<form>

<input type=”button” onclick=”resizeWindow()” value=”调整窗口大小”>

</form>

<p><b>注释:</b>我们使用的是 <b>top</b> 元素而不是 <b>window</b> 元素来表示顶级框架。如果您没有使用框架,请使用 <b>window</b> 元素。</p>

</body></html>

把窗口调整为指定的大小

<html>

<head>

<script type=”text/javascript”>

function resizeWindow(){

top.resizeTo(500,300)

}

</script>

</head>

<body>

<form>

<input type=”button” onclick=”resizeWindow()” value=”调整窗口大小”>

</form>

<p><b>注释:</b>我们使用的是 <b>top</b> 元素而不是 <b>window</b> 元素来表示顶级框架。如果您没有使用框架,请使用 <b>window</b> 元素。</p>

</body></html>

滚动文档

<html>

<head>

<script type=”text/javascript”>

function scrollWindow()

{

window.scrollBy(100,100);

}

</script>

</head>

<body>

 

 

<input type=”button” onclick=”scrollWindow()” value=”滚动” />

<p>文本文本文本文本文本文本文本文本文本文本文本文本文本</p>

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<p>文本文本文本文本文本文本文本文本文本文本文本文本文本</p>

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<p>文本文本文本文本文本文本文本文本文本文本文本文本文本</p>

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<p>文本文本文本文本文本文本文本文本文本文本文本文本文本</p>

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<p>文本文本文本文本文本文本文本文本文本文本文本文本文本</p>

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<p>文本文本文本文本文本文本文本文本文本文本文本文本文本</p>

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<p>文本文本文本文本文本文本文本文本文本文本文本文本文本</p>

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<p>文本文本文本文本文本文本文本文本文本文本文本文本文本</p>

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

</body></html>

把窗口滚动到指定的位置

<html>

<head>

<script type=”text/javascript”>

function scrollWindow()

{

window.scrollTo(100,500)

}

</script>

</head>

<body>

 

<input type=”button” onclick=”scrollWindow()” value=”滚动” />

<p>文本文本文本文本文本文本文本文本文本文本文本文本文本</p>

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<p>文本文本文本文本文本文本文本文本文本文本文本文本文本</p>

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<p>文本文本文本文本文本文本文本文本文本文本文本文本文本</p>

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<p>文本文本文本文本文本文本文本文本文本文本文本文本文本</p>

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<p>文本文本文本文本文本文本文本文本文本文本文本文本文本</p>

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<p>文本文本文本文本文本文本文本文本文本文本文本文本文本</p>

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<p>文本文本文本文本文本文本文本文本文本文本文本文本文本</p>

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<p>文本文本文本文本文本文本文本文本文本文本文本文本文本</p>

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

 

</body>

</html>

简单的计时

<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>

另一个简单的计时

<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>

无穷循环中的计时

<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>

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

<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>

一个时钟

<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>

创建 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>

发表评论

电子邮件地址不会被公开。 必填项已用*标注