centos7.2做网站,深圳网站建设价格多少,专注服务于站长和网站的信息平台.,网站建设功能套餐表前言
上一节有BOM的讲解#xff0c;有需要的码客们可以去看一下
以下是一个结合了上述BOM#xff08;Browser Object Model#xff09;相关内容的练习题及其源代码示例#xff1a;
练习题#xff1a;
编写一个JavaScript脚本#xff0c;该脚本应该执行以下操作#…前言
上一节有BOM的讲解有需要的码客们可以去看一下
以下是一个结合了上述BOMBrowser Object Model相关内容的练习题及其源代码示例
练习题
编写一个JavaScript脚本该脚本应该执行以下操作
显示当前浏览器窗口外部窗体的宽度和高度。显示当前文档显示区域视口的宽度和高度。使用Screen对象显示用户的屏幕分辨率。创建一个新的浏览器窗口并在其中加载指定的URL。刷新当前页面。使用Location对象跳转到另一个页面。使用警告框、确认框和输入框与用户进行交互。使用计时器setTimeout和setInterval在控制台打印信息并展示如何终止setInterval。
源代码示例
!DOCTYPE html
html langen
head
meta charsetUTF-8
meta nameviewport contentwidthdevice-width, initial-scale1.0
titleBOM 编程练习题/title
script
window.onload function() { // 1. 显示当前浏览器窗口的宽度和高度 console.log(外部窗体宽度:, window.outerWidth, 外部窗体高度:, window.outerHeight); // 2. 显示当前文档显示区域的宽度和高度 console.log(文档显示区域宽度:, window.innerWidth, 文档显示区域高度:, window.innerHeight); // 3. 显示用户的屏幕分辨率 console.log(屏幕分辨率:, screen.width, x, screen.height); // 4. 创建一个新的浏览器窗口并加载URL var newWindow window.open(https://www.example.com, _blank); // 5. 刷新当前页面 function refreshPage() { location.reload(); } // 可以调用 refreshPage() 来刷新页面但这里不直接调用 // 6. 跳转到另一个页面 function navigateToPage() { location.href https://www.anotherexample.com; } // 可以调用 navigateToPage() 来跳转页面但这里不直接调用 // 7. 与用户进行交互 function showAlert() { alert(这是一个警告框); } function showConfirm() { if (confirm(你确定要继续吗)) { alert(你点击了确定); } else { alert(你点击了取消); } } function showPrompt() { var inputValue prompt(请输入你的名字, ); if (inputValue ! null) { alert(你好 inputValue !); } } // 可以调用这些函数来显示不同的对话框 // 8. 使用计时器 // setTimeout 只执行一次 setTimeout(function() { console.log(setTimeout 执行的消息); }, 2000); // setInterval 不停地重复执行 var intervalId setInterval(function() { console.log(setInterval 执行的消息); // 假设在某个条件下我们要停止定时器 if (Date.now() someFutureTime) { // someFutureTime 是某个未来的时间戳 clearInterval(intervalId); } }, 1000); // 注意不要在setInterval的回调函数中使用document.write()因为它会重写整个页面
};
/script
/head
body button onclickshowAlert()显示警告框/button
button onclickshowConfirm()显示确认框/button
button onclickshowPrompt()显示输入框/button
!-- 可以添加更多按钮来调用其他函数 -- /body
/html
注意
someFutureTime 在上面的 setInterval 示例中是一个假设的变量你需要用实际的时间戳替换它。由于浏览器安全策略的限制某些浏览器可能会阻止或限制window.open方法的行为。出于演示目的refreshPage和navigateToPage函数在上面的代码中没有被直接调用但你可以根据需要调用它们。在实际应用中应当避免在全局范围内定义过多的函数和变量以防止命名冲突和意外的副作用。 今天就到这里了各位大佬们。
respect
