`

js学习之Window对象

 
阅读更多
Window对象


显示对话框代码来自w3school 


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

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

</body>
</html>


显示确认框代码来自w3school 


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



显示提示框代码来自w3school 


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


通过点击一个按钮打开窗口代码来自w3school 

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


打开一个新窗口,并控制其外观代码来自w3school 

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


把用户带到一个新的地址代码来自w3school 

<html>
<head>
<script type="text/javascript">
function currLocation()
{
alert(window.location)
}
function newLocation()
{
window.location="http://www.baidu.com"
}
</script>
</head>

<body>
<input type="button" onclick="currLocation()" value="显示当前的 URL">
<input type="button" onclick="newLocation()" value="改变 URL">
</body>

</html>


重新加载文档代码来自w3school 
<html>
<head>
<script type="text/javascript">
function reloadPage()
{
window.location.reload();
}
</script>
</head>
<body>

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

</body>
</html>



在窗口的状态栏设置文本代码来自w3school 

<html>
<body>

<script type="text/javascript">
window.status="Some text in the status bar!!"
</script>

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

</body>
</html>



打印页代码来自w3school 

<html>
<head>
<script type="text/javascript">
function printpage()
  {
  window.print()
  }
</script>
</head>
<body>

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

</body>
</html>


调整窗口大小代码来自w3school 

<html>
<head>
<script type="text/javascript">
function resizeWindow()
{
top.resizeBy(-100,-100)
}
function resizeWindow_()
{
top.resizeTo(500,300)
}
</script>
</head>

<body>
<form>
<input type="button" onclick="resizeWindow()" value="调整窗口大小">
<input type="button" onclick="resizeWindow_()" value="调整窗口指定大小大小">
</form>
<p><b>注释：</b>我们使用的是 <b>top</b> 元素而不是 <b>window</b> 元素来表示顶级框架。如果您没有使用框架，请使用 <b>window</b> 元素。</p>
</body>

</html>

ps:反正在w3school上 我是没有验证成功这段code


滚动文档代码来自w3school 

<html>
<head>
<script type="text/javascript">
function scrollWindow()
{
window.scrollBy(100,100);
}
function scrollWindow_()
  {
  window.scrollTo(100,500)
  }
</script>
</head>
<body>


<input type="button" onclick="scrollWindow()" value="滚动" />
<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>


简单的计时代码来自w3school 

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


另一个简单的计时代码来自w3school 

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



无穷循环的计时代码来自w3school 

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


ps:这个很有意思,你点一下,开始以1秒1秒的计时,然后你再点击一下你会发现一次跑2秒,在点一下3秒,.....难道因为是本身调用的timecount()然后在调用所以叠加了吗?有待研究


无穷循环的计时,带一个停止按钮代码来自w3school 

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


一个时钟代码来自w3school 

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



ps:上面是每个0.5s就执行一次,而最上面的计时确是1s执行一次,难道是因为这个函数执行的逻辑比较多,所以感觉花了0.5S的时间吗?不知道怎么研究才好

创建pop-up代码来自w3school 

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


//自己练习的以上代码也都上传了!
分享到：
| js学习之Table,TableHeader,TableRow,Table ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    javascript window对象

    Window对象文档,对学习javascript基本的初学者很有帮助

    学习js中document和window几大对象

    document是window的一个对象属性。 Window 对象表示浏览器中打开的窗口。 如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。 所有的...

    关于js-window对象的方法和属性资料

    详细描述了有关js-window对象的方法和属性，对于学习javaweb有很大的帮助

    Javascript高级编程学习笔记27——BOM1window对象1.docx

    Javascript高级编程学习笔记27——BOM1window对象1.docx

    javascript类型系统 Window对象学习笔记

    window对象是Web浏览器中javascript的一个终极兜底儿对象，在作用域中处于最末端，是一个包含所有对象的对象。所有在全局作用域中定义的属性和函数都是window对象的属性 var myStringVar = 'myString'; var ...

    JavaScript学习笔记之内置对象

    　所有 JavaScript 全局对象、函数以及变量均自动成为window对象的成员。 　窗口对象的属性和方法格式： 　[window.]属性 　[window.]方法(参数) 　甚至 HTML DOM 的 document 也是 window 对象的属性之一： window....

    javascript学习笔记(十四) window对象使用介绍

    javascript学习笔记之window对象使用介绍，需要的朋友可以参考下

    JavaScript Window窗口对象属性和使用方法

    主要介绍了JavaScript Window窗口对象属性和使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

    javascript完全学习手册1 源码

    5.1 Window对象 96 5.1.1 常用属性和方法 97 5.1.2 多窗口控制 100 5.2 Screen对象 103 5.3 Navigator对象 105 5.4 Location对象 107 5.4.1 常用属性和方法 107 5.4.2 Location对象的应用实例 109 5.5 History对象 ...

    JavaScript编程中window的location与history对象详解

    主要介绍了JavaScript编程中window的location与history对象,是JavaScript入门学习中的基础知识,需要的朋友可以参考下

    javascript从入门到跑路—–小文的js学习笔记（8）—–bom的对象及其用法—window 、History、location、navigator 、screen

    javascript从入门到跑路—–小文的js学习笔记（1）———script、alert、document。write() 和 console.log 标签 … … javascript从入门到跑路—–小文的js学习笔记目录 ** 一、BOM（Browers，Object，model）...

    javascript完全学习手册2 源码

    5．1 Window对象 5．1．1 常用属性和方法 5．1．2 多窗口控制 5．2 Screen对象 5．3 Navigator对象 5．4 Location对象 5．4．1 常用属性和方法 5．4．2 Location对象的应用实例 5．5 History对象 5．5．1 常用属性和...

    JavaScript学习笔记之JS事件对象

    事件对象：当事件发生时，浏览器自动建立该对象，并包含该事件的类型、鼠标坐标等。 　事件对象的属性：格式：event.属性。 　一些说明： ...　而事件的对象，在IE中是window.event.srcElement，在Firefo

    javascript学习笔记.docx

    2) 一个应用程序出现的每个窗口或框架都对应一个Window对象，而且都为客户端JavaScript代码定义了一个唯一的执行环境。 3) 脚本执行过程是Web浏览器的HTML解析过程的一部分。脚本按照它们的出现顺序执行。 4) 简单的...

    javascript高级编程学习手册

    目录： 第一章 javascript语言概述 第二章 JavaScript语言基础 第三章 JavaScript事件处理 第四章 JavaScript基于对象编程 第六章 string，math，array等数据对象 第七章 window及相关顶级对象 第八章 document对象

    JavaScript学习文档大全.zip #资源分享达人#

    #资源分享达人# 想要学好JavaScript,那就下载它啊，超级良心啊，绝不做那种一个一个分开学习，恰。。的人。我这里首先有一个完整的笔记(上几万字总结)，还有参考文档，其中包含：Array对象的方法参考表格，Canvas...

    常用javascript整理

    1.JavaScript的数值处理对象学习 .txt 2.JavaScript的系统函数学习 .txt 3.js中用于对象的语句——with和for...in语句学习专题.txt 4.smallSoftkey小软键盘，大键盘 5.window.open参数详解 .txt 6....

    js学习笔记大全

    为减少 js 关键词的占用,此文件只占用“c$”一个关键词; * 使用时用: c$.函数名(参数列表); 或者 c$().函数名(参数列表) * 字符串操作函数、日期操作函数、数组操作函数等,直接增加到 String、Date、Array 类里面,...

Magicbox
Global site tag (gtag.js) - Google Analytics