js学习之Window对象

最新推荐文章于 2024-07-26 20:46:33 发布
最新推荐文章于 2024-07-26 20:46:33 发布
阅读量101 收藏
点赞数
分类专栏： js学习 文章标签： javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lijie_insist/article/details/84690315
版权
[color=cyan][size=x-large]Window对象
[/size][/color]

[b][color=blue]显示对话框[/color][/b][b][color=orange]代码来自w3school
[/color][/b] 

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

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

</body>
</html>


[b][color=blue]显示确认框[/color][/b][b][color=orange]代码来自w3school
[/color][/b] 

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



[b][color=blue]显示提示框[/color][/b][b][color=orange]代码来自w3school
[/color][/b] 

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


[b][color=blue]通过点击一个按钮打开窗口[/color][/b][b][color=orange]代码来自w3school[/color][/b] 

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


[b][color=blue]打开一个新窗口,并控制其外观[/color][/b][b][color=orange]代码来自w3school[/color][/b] 

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


[b][color=blue]把用户带到一个新的地址[/color][/b][b][color=orange]代码来自w3school[/color][/b] 

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


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

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

</body>
</html>



[b][color=blue]在窗口的状态栏设置文本[/color][/b][b][color=orange]代码来自w3school[/color][/b] 

<html>
<body>

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

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

</body>
</html>



[b][color=blue]打印页[/color][/b][b][color=orange]代码来自w3school[/color][/b] 

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

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

</body>
</html>


[b][color=blue]调整窗口大小[/color][/b][b][color=orange]代码来自w3school[/color][/b] 

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

[color=brown]ps:反正在w3school上 我是没有验证成功这段code[/color]


[b][color=blue]滚动文档[/color][/b][b][color=orange]代码来自w3school[/color][/b] 

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


[b][color=blue]简单的计时[/color][/b][b][color=orange]代码来自w3school[/color][/b] 

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


[b][color=blue]另一个简单的计时[/color][/b][b][color=orange]代码来自w3school[/color][/b] 

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



[b][color=blue]无穷循环的计时[/color][/b][b][color=orange]代码来自w3school[/color][/b] 

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

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


[b][color=blue]无穷循环的计时,带一个停止按钮[/color][/b][b][color=orange]代码来自w3school[/color][/b] 

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


[b][color=blue]一个时钟[/color][/b][b][color=orange]代码来自w3school[/color][/b] 

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


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

[b][color=blue]创建pop-up[/color][/b][b][color=orange]代码来自w3school[/color][/b] 

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


//自己练习的以上代码也都上传了!
小熊️程序猿
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript类型系统 Window对象学习笔记
10-23
主要介绍了javascript类型系统之Window对象，整理关于Window对象的学习笔记，感兴趣的小伙伴们可以参考一下
js学习之window对象学习(一)
独狼的博客
06-24 205
<html> <head> <title>window对象学习</title> <meta charset="UTF-8"/> <!-- BOM浏览器对象模型：是规范浏览器对js语言的支持(js调用浏览器本身的功能)。 BOM的具体实现是window对象 window对象使用学习： 1、window对象不用new，直接进行使用即可，类似Math的使用方式，window关键字可以省略不写。 2、
JavaScript之window对象（BOM）
但愿人长久 千里共婵娟
04-11 548
BOM是浏览器对象模型，要在web上运用JavaScript,BOM就是核心。
js将多个方法添加到window对象上的多种方法
weixin_33894992的博客
12-21 1723
方法一：（最简单也是最笨的方法） window.a = function(){}window.b = function(){}window.c = function(){} 方法二：（利用jq的extend方法） window.c = function(){}$.extend(window,{ a:function(){}, b:function(){}, c:...
Window resizeBy() 方法
iteye_5722的博客
02-18 234
定义和用法 resizeBy() 方法用于根据指定的像素来调整窗口的大小。 注意： 此方法定义指定窗口的右下角角落移动的像素，左上角将不会被移动(它停留在其原来的坐标). 语法 resizeBy(width,height) 参数 描述 width 必需。要使窗口宽度增加的像素数。可以是正、负数值。 height 可选。要使窗口高度增加的像素数。可以是正...
JS Window对象
weixin_30439131的博客
03-02 136
1.JavaScript 计时器 在JavaScript中，我们可以在设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。计时器类型：一次性计时器：仅在指定的延迟时间之后触发一次。间隔性触发计时器：每隔一定的时间间隔就触发一次。计时器方法： 计时器setInterval() 在执行时,从载入页面后每隔指定的时间执行代码。 语法: setInterval(...
js学习之window对象学习(二)
独狼的博客
06-25 198
<html> <head> <title>js的window对象学习2</title> <meta charset="UTF-8"/> <!-- js的window对象学习 1、子窗口方法 window.open('子页面的资源(相对路径)','打卡方式','配置'); 示例：window.open('son.html','newwindow','height=400, width=600, top=10
javascript学习13：Window对象使用
八十岁老将的博客
02-13 298
1、获取Window对象 可以用两种方式获得window对象。正规的HTML5方式是在Document对象上使用defaultView属性。另一种则是使用所有浏览器都支持的全局变量window 。 2、获取窗口信息 顾名思义，window对象的基本功能涉及当前文档所显示的窗口。 3、与窗口进行交互 window对象提供了一组方法,可以用它们与包含文档的窗口进行交互。 所有这些方法都应该谨慎使用，因为它们会让用户失去对浏览器窗口的控制。用户对应用程序应该具有什么行为有着相当固定的预期，而那些会滚动、打印和关闭
javascript中window对象学习
wang的博客
07-15 261
BOM浏览器对象模型：是规范浏览器对js语言的支持（js调用浏览器本身的功能） BOM的具体实现是window对象 window对象使用学习： 1.window对象不用new，直接运行使用即可，类似Math的使用方式，windows关键字可以省略不写。 2.框体方法 alert:警告框 提示一个警告信息，没有返回值 confirm：确认框 提示用户选择一套操作（确定/取消）点击确定返回true 取消返回false promot ：提示框 提示用某个信息的录入或者说收集 点击确定，返回当前录入的教程，默
JavaScript学习笔记之内置对象
11-30
首先，Window对象是JavaScript的核心，它代表了浏览器的窗口。几乎所有的全局变量和函数都是Window对象的成员。例如，`window.alert()`用于弹出警告对话框，`window.setTimeout()`用于设置定时器。值得注意的是，...
JavaScript学习笔记之JS事件对象
11-26
JavaScript中的事件对象是编程交互的核心，它记录了与事件相关的...总的来说，理解和熟练运用JavaScript的事件对象是进行前端开发的关键技能之一，它使得页面能够对用户的交互作出响应，提供了丰富的动态效果和功能。
JavaScript青少年简明教程：函数及其相关知识（下）
最新发布
cnds123的专栏
07-26 535
JavaScript青少年简明教程：函数及其相关知识（下）
HarmonyOS应用开发者高级认证，Next版本发布后最新题库 - 多选题序号4
Gusha_的博客
07-23 1312
HarmonyOS应用开发者高级认证最新题库，编写于2024年7月19日，Next版本发布之后
【React 】开发环境搭建详细指南
lph159的博客
07-24 1086
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
已解决：vue-office/excel 多个sheet点击切换，滚动条高度不重置，表格视图位置不正确
weixin_42289080的博客
07-26 155
解决 @vue-office/excel 多个sheet切换，内容以及滚动条展示不正确的问题
vue el-select的下拉树形结构 带检索功能
Jokerxiuka的博客
07-26 102
【代码】vue el-select的下拉树形结构。
Angular由一个bug说起之八：实践中遇到的一个数据颗粒度的问题
KenkoTech的博客
07-24 657
之所以使用这种比较直接的方式是因为项目中的数据类型已经确定，而且对数字的处理逻辑没有统一在一个文件中。这是大型项目经常遇到的问题，起到相同作用的代码因为一些小的差别而分别写在管理各自功能的文件里。文件存入数据库，这样我们就可以统一维护一个表，不管是前端来处理数据还是后端来处理都能遵守相同的规则。针对这篇文章提到的数字缩写的问题，可以有两种处理方案。来展示数据的功能，这些数据根据不同的类型和单位会为其加上前缀、后缀或者省略小数。
el-menu根据多层树形结构递归遍历展示菜单栏
m0_62317155的博客
07-23 935
el-menu根据多层树形结构递归遍历展示菜单栏
JavaScript基础：DOM编程与Window对象特性
"Window对象是JavaScript中的全局对象，它表示浏览器窗口，包含了许多与浏览器...通过深入学习Window对象的属性和方法，以及DOM编程的基本概念，开发者可以有效地控制浏览器窗口的行为，创建交互式和动态的网页应用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值