<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>请调整浏览器窗口</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
</head>
<body>
<h2 align="center">请调整浏览器窗口大小</h2><hr>
<form action="#" method="get" name="form1" id="form1">
<!--显示浏览器窗口的实际尺寸-->
浏览器窗口 的 实际高度: <input type="text" name="availHeight" size="4"><br>
浏览器窗口 的 实际宽度: <input type="text" name="availWidth" size="4"><br>
</form>
<script type="text/javascript">
<!--
var winWidth = 0;
var winHeight = 0;
function findDimensions() //函数：获取尺寸
{
//获取窗口宽度
if (window.innerWidth)
winWidth = window.innerWidth;
else if ((document.body) && (document.body.clientWidth))
winWidth = document.body.clientWidth;
//获取窗口高度
if (window.innerHeight)
winHeight = window.innerHeight;
else if ((document.body) && (document.body.clientHeight))
winHeight = document.body.clientHeight;
//通过深入Document内部对body进行检测，获取窗口大小
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
{
winHeight = document.documentElement.clientHeight;
winWidth = document.documentElement.clientWidth;
}
//结果输出至两个文本框
document.form1.availHeight.value= winHeight;
document.form1.availWidth.value= winWidth;
}
findDimensions();
//调用函数，获取数值
window.onresize=findDimensions;
//-->
</script>
</body>
</html>
分享到：
相关推荐
JS 跳转页面方法和参考代码 JS 跳转页面方法是指使用 JavaScript 实现页面跳转的方法，这些方法可以在 Web 开发中广泛应用。下面将对 JS 跳转页面方法进行详细的介绍和分析，并提供相应的参考代码。 JS 跳转页面...
在IT领域，JavaScript（简称JS）作为前端开发的核心语言之一，其灵活性和广泛的应用场景使其成为网页开发中不可或缺的一部分。特别是在页面跳转方面，JS提供了多种方式来实现这一功能，这些方法各有特点，适用于不同...
在这个"网站页面JS代码及效果"的资源包中，包含了各种JavaScript特效的示例代码，旨在帮助开发者理解和掌握JavaScript在网页设计中的实际应用。 1. **基础语法与数据类型**：JavaScript的基础包括变量声明（var, ...
### JS页面跳转代码汇总及解析 #### 一、通过`window.location.href`进行页面跳转 **示例代码：** ```javascript <script language="javascript" type="text/javascript"> window.location.href = "login.jsp?...
当readyState属性值为"complete"时，表示整个页面加载已经完成，此时可以安全地执行页面上的JavaScript代码，如下所示： ```javascript document.onreadystatechange = function() { if(document.readyState == ...
这个“js移动端日历签到页面代码”提供了一种实现方式，帮助开发者创建一个用户友好的日历界面，允许用户每天进行唯一一次签到操作。下面我们将深入探讨这个主题，讲解如何利用JavaScript来构建这样的功能。 首先，...
页面加载时的旋转特效是网页动态效果的一种常见应用，它能为用户带来更...通过以上步骤，你就能创建一个基本的页面加载带旋转特效的JavaScript代码。实践中，可以根据具体需求进行调整和优化，以满足不同场景的应用。
而“h5动态注入js代码”是指在H5页面运行时，通过JavaScript程序动态地向页面中添加或修改JavaScript代码，以实现更灵活的功能扩展和页面交互。这种方式常见于响应式设计、数据可视化、用户行为追踪等多种场景。 一...
在"121-横向弹性相册JS广告代码简介页面"中，我们可以预见到以下几个关键知识点： 1. **响应式设计**：相册代码会基于浏览器窗口大小自动调整布局，确保无论设备如何旋转或缩放，图片都能保持合适的比例和清晰度。...
2. **DOM操作**：JS与HTML文档对象模型（DOM）交互，可以改变页面元素的属性、位置或内容。太极转盘的生成可能涉及到创建、查找和修改DOM元素。 3. **CSS样式**：CSS用于设置网页元素的外观。太极图的形状、颜色、...
1. 异步加载：为了不影响页面的首屏渲染，可以使用异步加载（`async`或`defer`属性）来加载广告代码，提高页面加载速度。 2. 懒加载：对于不在视口范围内的广告，可使用Intersection Observer API进行懒加载，仅当...
JavaScript特效代码大全是一份集合了各种JavaScript编程技巧和效果实现的资源库，涵盖了网页动态效果、用户交互、动画以及数据可视化等多个方面。这份大全旨在帮助开发者提升网站的用户体验，通过运用JavaScript的...
在转盘抽奖页面中，CSS将被用来设置转盘的尺寸、颜色、阴影、边框等属性，以及动画效果，如旋转速度和缓动函数。通过使用`transform`属性和`transition`属性，可以实现转盘的平滑转动效果。 jQuery是一个强大的...
这篇文档将深入解析"js+html5大气科技背景动画登录页面代码.zip"中涉及的关键知识点，包括HTML5和JavaScript在创建动态、交互式网页界面中的应用。首先，我们需要理解HTML5作为网页结构语言的重要性，以及JavaScript...
页面加载过程中，JavaScript（js）的执行对用户感知的页面加载速度有着直接影响。在这个主题下，我们将深入探讨JavaScript如何影响页面加载，以及如何利用它来改善用户在页面加载过程中的体验。 1. **JavaScript与...
在本项目中，"简易京东网页HTML代码"是一个HTML课程设计，目的是让学生了解并实践HTML和JavaScript的基础知识，以及如何构建一个模拟京东购物网站的页面。这个设计将涵盖网页的基本结构，布局，链接，以及可能涉及到...
在本项目中，“vue购物车商品订单详情页面代码”是一个基于Vue.js框架构建的电子商务应用模块，主要用于展示购物车中的商品订单详情。这个页面包含了多种关键功能，旨在提供用户友好的购物流程体验。以下是对这些...
在本实践项目“js练习4：制作凡客诚品帮助中心页面”中，我们将深入学习JavaScript语言，并结合HTML和CSS来构建一个类似凡客诚品（Vancl）在线购物平台的帮助中心页面。这个项目旨在提升JavaScript编程技能，尤其是...
在实际开发中，设计师和开发者会结合CSS（Cascading Style Sheets）和JavaScript（或jQuery等库）来进一步美化登录页面，增强用户体验，例如设置输入框的样式、添加动效、进行表单验证等。同时，为了保证安全性，还...
1. **HTML到JavaScript的转换**：当需要将HTML元素的事件绑定或属性修改转化为JavaScript代码时，此工具可以自动生成相应的JavaScript函数或表达式。例如，将一个`('Hello')">点击我</button>`的HTML标签转换为独立...