JavaScript 动态网页实例 —— 窗口控制

        除了打开和关闭窗口之外,还有很多其他控制窗口的方法。例如,可以使用 window.focus()方法使窗口获得焦点,也可以利用与其相对的window.blur 方法使窗口失去焦点。本节介绍移动窗口、改变窗口大小、窗口滚动、窗口超时操作、常用窗口事件、常用窗口扩展等窗口控制的方法和手段。

窗口移动

本节给出一段窗口移动的示例代码,可以实现移动窗口在屏幕上位置的改变。位置改变时,既可以逐渐位移,也可一步到位。

要点

本节代码主要使用了 window.moveBy()方法和 window.moveTo()方法,二者的主要功能和用法如下。

  • window.moveBy()方法将窗口移动指定的像素数,其语法格式为“窗口名称.moveBy(水平像素数,垂直像素数)”。其中,“窗口名称”指要移动的窗口的名称。如果只有主窗口,则指该主窗口:“水平像素数”指在水平方向上移动窗口的像素数:如果为正数,则向右移动;如果是负数,则向左移动;“垂直像素数”指在垂直方向上移动窗口的像素数。如果为正数,则向上移动;如果是负数,则向下移动。
  • 如果想将窗口移动到一个确定的位置,更好的办法是使用 window.moveTo()方法。该方法会将窗口移动到屏幕上以平面坐标表示的固定位置。其语法格式为“窗口名称.moveTo(x坐标,y 坐标)”。其中,“窗口名称”指要移动的窗口的名称。如果只有主窗口,则指该主窗口;“x坐标”是要将窗口移动到的屏幕上x轴的坐标数;“y坐标”是要将窗口移动到的屏幕上y轴的坐标数。
<script type="text/javascript">
<!--
var myWindow;
function openIt() //函数:打开
{
//要打开的新窗口的特征
myWindow = open('','mywin','height=300,width=300,scrollbars=yes');
//新窗口页面HTML头部信息
myWindow.document.writeln("<html><head><title>新窗口</title></head>");
//新窗口页面HTML主体信息
myWindow.document.writeln("<body bgcolor='#ffcc00'>");
myWindow.document.writeln("<h1>这里是新窗口</h1><hr>");
myWindow.document.writeln("<h5>用递归求阶乘函数:</h5><pre>");
myWindow.document.writeln("function factorial(aNumber)<br>{");
myWindow.document.writeln("   // 如果这个数不是一个整数,则向下舍入。");
myWindow.document.writeln("   aNumber = Math.floor(aNumber);");
myWindow.document.writeln("   if (aNumber < 0)");
myWindow.document.writeln("   {  // 如果这个数小于 0,拒绝接收。");
myWindow.document.writeln("       return -1;<br>   }");
myWindow.document.writeln("   if (aNumber == 0)");
myWindow.document.writeln("   {  // 如果为 0,则其阶乘为 1。");
myWindow.document.writeln("      return 1;<br>   }");
myWindow.document.writeln("   else<br>      // 否则,递归直至完成。");
myWindow.document.writeln("      return (aNumber * factorial(aNumber - 1));");
myWindow.document.writeln("}</pre></body></html>");
myWindow.document.close();  //关闭输入
myWindow.focus();          //获取焦点
}function moveIt()  //函数:移动
{
if ((window.myWindow) && (myWindow.closed == false))
myWindow.moveTo(document.testform.moveX.value,
document.testform.moveY.value);
}
//-->
</script>

e0cb995e20334d3cade66ae9672782bb.png

分析

(1)程序首先建立了两个文本框和若干按钮,文本框用于输入窗口要移动到的坐标值,按钮则关联相应的事件处理程序,用于对窗口进行移动。

(2)在<body>标签中添加了“οnlοad="openlt();"”属性,关联函数 openIt(),当窗口打开时,会调用该函数,打开一个新窗口。新窗口的内容是一段JavaScript 程序代码,由一系列的“myWindow.document.writeln( )”实现。

(3)“向上移”、“向下移”、“向左移”、“向右移”4个按钮的onclick 事件分别关联一个if语句,使用 window.moveBy()方法对窗口进行移动,每次移动的幅度为 10像素。

(4)“移动到”按钮的 onclick事件与函数 movelt()相关联。在函数 moveIt()中,如果新窗口已打开且未完毕,则使用用户输入的值作为参数,调用window.moveTo()方法对窗口进行移动。

改变大小

本节给出一段改变窗口大小的示例代码,可以实现对窗口大小进行调整。调整大小时既可以逐渐改变,也可一步到位。

要点

本节代码主要使用了 window.resizeBy()方法和 window.resizeTo()方法,二者的主要

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/20209.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[每周一更]-(第99期):MySQL的索引为什么用B+树?

文章目录 B树与B树的基本概念B树&#xff08;Balanced Tree&#xff09;B树&#xff08;B-Plus Tree&#xff09;对比 为什么MySQL选择B树1. **磁盘I/O效率**2. **更稳定的查询性能**3. **更高的空间利用率**4. **并发控制** 其他树结构的比较参考 索引是一种 数据结构&#x…

LeeCode热题100(两数之和)

本文纯干货&#xff0c;看不懂来打我&#xff01; 自己先去看一下第一题的题目两数之和&#xff1a;. - 力扣&#xff08;LeetCode&#xff09; 简单来说就是让你在一个数组里面找两个数&#xff0c;这两个数的和必须满足等于目标值target才行。 我认为你要是没有思路的话&a…

营造科技展厅主题氛围,多媒体应用有哪些新策略?

长久以来&#xff0c;展厅作为线下向公众传递信息的窗口&#xff0c;其设计风格与内容主题紧密相连&#xff0c;展现出千姿百态的面貌。然而&#xff0c;随着数字多媒体技术的日新月异&#xff0c;展厅不再仅仅是传统的信息展示平台&#xff0c;而是成为了引领内容展示潮流的风…

【Git】git合并分支指定内容到主分支

git合并分支指定内容到主分支 在现实开发中&#xff0c;往往需要合并分支内容&#xff0c;如下图&#xff1a; 我们平时在其他分支修改了部分代码&#xff0c;如何将分支部分代码合并到主分支上面呢&#xff1f; 合并步骤&#xff1a; 1、切换当前到主分支 git checkout m…

大型制造业集团IT信息化总体规划方案(65页PPT)

方案介绍&#xff1a; 本大型制造业集团IT信息化总体规划方案旨在通过构建先进、高效、稳定的IT信息化系统&#xff0c;支撑集团各业务领域的运营和管理需求&#xff0c;促进集团整体运营效率和竞争力的提升。通过实施本项目&#xff0c;集团将能够更好地应对市场变化和客户需…

python绘制piper三线图

piper三线图 Piper三线图是一种常用于水化学分析的图表&#xff0c;它能够帮助我们理解和比较水样的化学成分。该图表由三个部分组成&#xff1a;两个三角形和一个菱形。两个三角形分别用于显示阳离子和阴离子的相对比例&#xff0c;而菱形部分则综合显示了这些离子比例在水样…

十四天学会Vue——Vue 组件化编程(理论+实战)(第四天)

二、 Vue组件化编程 2.1 组件化模式与传统方式编写应用做对比&#xff1a; 传统方式编写应用 依赖关系混乱&#xff0c;不好维护&#xff1a;例如&#xff1a;比如需要引入js1&#xff0c;js2&#xff0c;js3&#xff0c;但是js3需要用到js1、2的方法&#xff0c;所以js1、2…

掌控未来,爱普生SR3225SAA用于汽车钥匙、射频电路的智慧引擎

为了响应市场需求&#xff0c;Epson使用独家QMEMS*2技术所生产的石英振荡器&#xff0c;与其精巧的半导体技术所制造的射频传输器电路&#xff0c;开发了SR3225SAA。不仅内建的石英震荡器之频率误差仅有2 ppm&#xff0c;更使其封装尺寸达仅3.2 mm x 2.5 mm&#xff0c;为客户大…

C#中接口的显式实现与隐式实现及其相关应用案例

C#中接口的显式实现与隐式实现 最近在学习演化一款游戏项目框架时候&#xff0c;框架作者巧妙使用接口中方法的显式实现来变相对接口中方法进行“密封”&#xff0c;增加实现接口的类访问方法的“成本”。 接口的显式实现和隐式实现&#xff1a; 先定义一个接口&#xff0c;接口…

dolphinscheduler docker部署海豚mysql版本,docker重新封装正在运行服务为镜像

1.官方文档&#xff1a; https://dolphinscheduler.apache.org/zh-cn/docs/3.2.1/guide/installation/standalone#%E9%85%8D%E7%BD%AE%E6%95%B0%E6%8D%AE%E5%BA%93 2.github: dolphinscheduler/docs/docs/zh/guide/howto/datasource-setting.md at 3.2.1-release apache/do…

对于vsc中的vue命令 vue.json

打开vsc 然后在左下角有一个设置 2.点击用户代码片段 3.输入 vue.json回车 将此代码粘贴 &#xff08;我的不一定都适合&#xff09; { "vue2 template": { "prefix": "v2", "body": [ "<template>", " <…

Ubuntu中PDF阅读器和编辑器

1. 福昕PDF编辑器 1.1. 下载地址 PDF阅读器下载_PDF编辑器下载_PDF软件官方下载_福昕软件官网 1.2. 安装 sudo dpkg -i signed_com.foxit.foxitpdfeditor_xxx_amd64_UOS.deb 2. WPS DPF 2.1. 下载地址 WPS Office 2019 for Linux-支持多版本下载_WPS官方网站 2.2. 使用 …

基于ES安装IK分词插件

前言 IK分词器插件是为Elasticsearch设计的中文分词插件&#xff0c;由Elasticsearch的官方团队之外的开发者medcl开发。它主要针对中文文本的分词需求&#xff0c;提供了较为准确的中文分词能力。以下是IK分词器插件的一些特点&#xff1a; 智能分词&#xff1a;IK分词器采用基…

每天学点小知识:WSL安装Ubuntu 22.04 LTS

前言 本章教会你在不使用虚拟机下使用linux&#xff0c;但是这里建议还是使用虚拟机&#xff0c;或者装一双系统&#xff0c;wsl使用linux还是有很多问题的。 1. 简介WSL WSL&#xff08;Windows Subsystem for Linux&#xff09;是微软为Windows 10及以上版本开发的一项功能…

[AIGC] Java常用的JSON库及简单示例

Java常用的JSON库及简单示例 在Java的世界里&#xff0c;JSON库广泛用于日常开发工作&#xff0c;本文将介绍几个常用的JSON库并配以简单的示例代码。 1. Gson Gson是Google提供的一个用来在Java对象和JSON数据之间进行转换的Java库。 它有一定的学习曲线&#xff0c;但一旦熟…

Redis用GEO实现附近的人功能

文章目录 ☃️概述☃️命令演示☃️API将数据库表中的数据导入到redis中去☃️实现附近功能 ☃️概述 GEO就是Geolocation的简写形式&#xff0c;代表地理坐标。Redis在3.2版本中加入了对GEO的支持&#xff0c;允许存储地理坐标信息&#xff0c;帮助我们根据经纬度来检索数据。…

淘宝镜像的https证书过期

错误原因&#xff1a; 淘宝镜像过期 早在 2021 年&#xff0c;淘宝就发文称&#xff0c;npm 淘宝镜像已经从 http://registry.npm.taobao.org 切换到了 http://registry.npmmirror.com。旧域名也将于 2022 年 5 月 31 日停止服务&#xff08;直到 HTTPS 证书到期才真正不能用了…

基于stm32的智能家居系统

目录 1.课题研究目的和内容 1.1 课题研究目的 1.2 课题研究内容 2.系统总体方案设计及功能模块介绍 2.1 总体方案设计 2.2 DHT11模块介绍 2.3 TFTLCD显示功能模块介绍 2.4 ESP8266WIFI模块介绍 2.5 MQ-135 空气质量模块介绍 2.6 步进电机模块介绍 2.…

solr-8.11.3

https://solr.apache.org/downloads.html https://archive.apache.org/dist/solr/solr/ F:\Document_Solr.apache.org\solr-8.11.3\bin Microsoft Windows [版本 10.0.19045.2965] (c) Microsoft Corporation。保留所有权利。 C:\Users\Administrator>F: F:\> F:\>…

2023年03月 Python(六级)真题解析#中国电子学会#全国青少年软件编程等级考试

Python等级考试&#xff08;1~6级&#xff09;全部真题・点这里 一、单选题&#xff08;共25题&#xff0c;共50分&#xff09; 第1题 有如下程序段&#xff1a; with open(mistakes.txt, w) as f:words [believe,memorize]f.write(\n.join(words))执行该代码后&#xff0c;…