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,一经查实,立即删除!

相关文章

Docker 部署 OCRmyPDF、提取PDF内容

一、镜像导入 # 拉取镜像 docker pull jbarlow83/ocrmypdf# 导出镜像 docker save -o /data/ocrmypdf/ocrmypdf.tar jbarlow83/ocrmypdf:latest # 导入镜像 docker load -i ocrmypdf.tar二、调取镜像 # 【调用镜像】&#xff08;以下2选1&#xff09;# 1-执行后删除容器【官方…

vue3 树节点如何通过子节点的parentid找到父节点数据

在Vue 3中&#xff0c;如果你有一个树形结构的数据&#xff0c;并且想要通过子节点的parentId找到其父节点数据&#xff0c;你可以使用递归组件或者在组件的方法中实现递归逻辑来遍历树形数据。 以下是一个简单的示例&#xff0c;展示如何在Vue 3组件中实现这个功能&#xff1…

[每周一更]-(第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…

【启明智显分享】WIFI6开发板ZX6010:开源OpenWrt SDK,接受定制!

在数字化飞速发展的当下&#xff0c;网络速度和稳定性已成为各行各业不可或缺的关键因素。今天&#xff0c;我们为大家推荐一款基于IPQ6010的AX1800方案ZX6010 Wi-Fi6开发板&#xff0c;为您的网络世界注入强大动力。 一、超强硬件配置 ZX6010搭载IPQ6010四核ARM Cortex A53处…

LeeCode热题100(两数之和)

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

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

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

modelscope只读盘无法启动模型问题

简介 将提前下载好的modelscope模型目录&#xff0c;映射到容器中作为只读模式时会报错。 原因分析 使用modelscope加载模型时会去修改ast_index和具体模型的一些隐藏文件。 解决方案 如果你使用的框架支持直接传model的绝对路径&#xff08;例如vllm&#xff09;&#xf…

数仓建模—需求管理

文章目录 数仓建模—需求管理需求管理的背景日常需求管理项目需求管理要明确用户明确指标明确业务规则明确取数来源明确用户与指标对应关系总结数仓建模—需求管理 今天我们简单介绍一下数仓的需求管理,其实需求管理是一个软技能,为什么说是软技能,因为即使你不会需求管理或…

DW怎么Python:探索Dreamweaver与Python的交织世界

DW怎么Python&#xff1a;探索Dreamweaver与Python的交织世界 在数字世界的广袤天地中&#xff0c;Dreamweaver&#xff08;简称DW&#xff09;与Python这两大工具各自闪耀着独特的光芒。DW以其强大的网页设计和开发能力著称&#xff0c;而Python则以其简洁、易读和强大的编程…

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

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

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

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

初级前端开发岗

定位&#xff1a; 日常任务的辅助执行者&#xff0c;前端基础建设的参与者。 素质要求&#xff1a; 是否遵循部门敏捷流程、规范、P0制度&#xff1b;具备良好的沟通和协作能力;负责日常迭代任务的落地执行;拥有较强的执行力&#xff0c;能够灵活解决问题; 职责&#xff1a…

【Linux-Yocto】

Linux-Yocto ■ 1.1 安装 Git 与配置 Git 用户信息■ 1.2 获取 Yocto 项目■ 1.3 开始构建 Yocto 文件系统■ 1.4 构建 SDK 工具■■■ ■ 1.1 安装 Git 与配置 Git 用户信息 sudo apt-get install git git config --global user.name "username" // 配置 Git 用户名…

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>", " <…

探索Expect Python用法:深入解析与实战挑战

探索Expect Python用法&#xff1a;深入解析与实战挑战 在自动化和脚本编写领域&#xff0c;Expect Python已经成为了一种强大的工具组合。它结合了Expect的交互式会话处理能力和Python的编程灵活性&#xff0c;为开发者提供了一种全新的方式来处理复杂的自动化任务。然而&…