`

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对象.doc

    JavaScript中的Window对象是全局对象，它是每个浏览器窗口的核心，提供了许多与浏览器窗口交互的方法...对于初学者来说，理解并熟练运用Window对象的各种方法是JavaScript学习的基础，也是提高Web开发能力的关键一步。

    window对象

    Window对象是JavaScript中一个至关重要的核心概念，它是浏览器环境中所有Web应用程序的基础。它代表了浏览器的一个窗口，提供了与用户交互的界面以及访问浏览器特性的接口。这篇博客文章将深入探讨Window对象及其...

    函数和window对象

    在JavaScript编程中，函数是核心概念之一，它们是可重用的代码块，可以接受输入（参数）并返回结果（返回值）。同时，`window`对象是浏览器环境中全局作用域的基础，它代表了整个浏览器窗口。这篇博文可能深入探讨了...

    学习js中document和window几大对象

    JavaScript中的`document`和`window`对象是两个非常核心的概念，它们在网页脚本中扮演着重要的角色。本文将深入探讨这两个对象的区别、用途以及它们的相关属性和方法。 首先，`window`对象是JavaScript的全局对象，...

    测试window对象属性parent、top、self

    在JavaScript的世界里，Window对象是浏览器环境中全局对象的基石，它代表了浏览器的一个窗口。`parent`、`top`和`self`是Window对象中非常重要的三个属性，它们各自承担着不同的职责，对于理解JavaScript在浏览器...

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

    JavaScript高级编程的学习中，BOM（Browser Object Model）占据着重要的地位，因为它使得JavaScript能够与浏览器进行交互。在浏览器环境中，JavaScript的核心语法是ECMAScript，但BOM提供了与浏览器功能交互的一系列...

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

    ### JavaScript类型系统与Window对象学习笔记 #### 1. JavaScript类型系统简介 在深入探讨Window对象之前，我们首先需要了解JavaScript的类型系统。JavaScript是一种动态类型语言，它将数据类型分为两大类：基本...

    window对象--event对象详解

    在JavaScript编程中，Window对象是浏览器环境中全局的对象，它提供了与浏览器窗口相关的各种功能和属性。Event对象则是JavaScript事件处理中的核心组件，用于封装事件的所有相关信息。本文将深入探讨Window对象和...

    8.（vue3.x+vite）组件间通信方式之window挂实例.rar

    5. **Window 挂载实例**: 在某些特定场景下，如果组件需要与全局环境（如浏览器的window对象）进行通信，可以将实例挂在window上。例如，将一个Vue实例赋值给`window.myVue`，然后其他脚本可以通过这个全局变量访问...

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

    JavaScript学习笔记之window对象使用介绍涵盖了多个方面的知识，包括窗口位置、浏览器大小、打开或弹出窗口、location对象以及history对象的使用。在详细介绍之前，首先明确window对象是浏览器中一个非常重要的全局...

    Window及相关顶级对象

    `Window`对象是浏览器中最重要的顶级对象之一，它代表了浏览器的窗口。当浏览器加载文档时会自动创建一个`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对象 ...

    基于H5的WindowsX plus 原生js html 模拟window的小demo

    Node.js允许开发者使用JavaScript进行服务器编程，这使得前后端可以使用相同的编程语言，提高了开发效率。 5. Windows模拟： 开发者通过JavaScript模拟了Windows的一些核心特性，如启动画面、登录界面、桌面图标、...

    个人Javascript学习笔记 精华版

    浏览器对象包括Window对象、Document对象、History对象、Forms对象等。 本资源涵盖了JavaScript的基础知识、事件处理、对象和系统函数、浏览器对象等方面的内容，是个人Javascript学习笔记的精华版。

    Javascript权威指南学习笔记二

    ### JavaScript权威指南学习笔记二：客户端JavaScript #### 第十二章：Web浏览器中的JavaScript ##### 一、Web浏览器环境 在客户端JavaScript中，浏览器提供了一个特定的执行环境，其中`window`对象扮演着至关...

    头歌教学实践平台 Web前端开发基础 JavaScript学习手册十六：浏览器对象模型

    JavaScript学习手册十六主要聚焦在浏览器对象模型（Browser Object Model，简称BOM）这一主题，它是Web前端开发中的重要组成部分。BOM允许JavaScript与浏览器进行交互，控制窗口、导航、历史记录、时间等特性，提供...

    JavaScript核心对象参考手册

    `window`是浏览器环境下的全局对象，而在Node.js环境中，全局对象为`global`。全局对象中包含了一些内置函数，如`eval()`用于执行一个字符串作为JavaScript代码，`setTimeout()`和`setInterval()`用于定时执行函数。...

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