第十篇-JavaScript BOM-下

简介: 第十篇-JavaScript BOM-下

JavaScript 历 史

在 JavaScript 中,你可以使用 history 对象提供的方法来实现前进和后退的功能。

要向前导航,可以使用 history.forward() 方法。它会将用户跳转到最近的一个访问页面。

要向后导航,可以使用 history.back() 方法。它会将用户跳转到上一个访问页面。

下面是一些实际例子:

// 向前导航
window.history.forward()

// 向后导航
window.history.back()

//加载历史列表中某个页面, number 为负数表示后退,为正数表示前进,为 0 表示当前页面

window.history.go(number)

需要注意,这些方法仅会在用户访问历史记录中有可用页面时才有效。如果已经到达历史记录的起点或终点,这些方法将不起作用。

JavaScript 弹窗

JavaScript中的弹窗有几种类型,其中包括alert、confirm和prompt。

  1. alert弹窗: 使用alert函数可以创建一个简单的弹窗,只含有一个确定按钮。弹窗中显示指定的文本。 例如:alert("这是一个alert弹窗");
  2. confirm弹窗: 使用confirm函数可以创建一个确认弹窗,包含确定和取消按钮。弹窗中显示指定的文本,并返回用户点击的按钮结果。点击确定返回true,点击取消返回false。 例如:var result = confirm("这是一个confirm弹窗"); if(result){ console.log("用户点击了确定按钮"); } else { console.log("用户点击了取消按钮"); }
  3. prompt弹窗: 使用prompt函数可以创建一个带有输入框的弹窗。弹窗中显示指定的文本,并返回用户输入的内容。 例如:var name = prompt("请输入您的姓名"); console.log("您输入的姓名是:" + name);

这些弹窗函数可以通过在HTML中的<script>标签中直接调用,或者在外部的JavaScript文件中调用

JavaScript 浏览器信息

您可以使用以下JavaScript代码获取浏览器的相关信息:

// 浏览器名称和版本
console.log(navigator.userAgent);

// 浏览器语言
console.log(navigator.language);

// 浏览器是否支持cookie
console.log(navigator.cookieEnabled);

// 浏览器是否支持Java
console.log(navigator.javaEnabled());

// 浏览器是否支持WebSockets
console.log(!!window.WebSocket);

// 浏览器是否支持Local Storage
console.log(!!window.localStorage);

// 浏览器是否支持Geolocation
console.log(!!navigator.geolocation);

// 浏览器是否支持拖放
console.log('draggable' in document.createElement('span'));

// 浏览器是否支持触摸事件
console.log('ontouchstart' in window);

// 浏览器是否支持Web Workers
console.log(!!window.Worker); 

JavaScript 定时器

JavaScript中的定时器是用来在指定的时间间隔执行一段代码的工具。有两种类型的定时器:setTimeoutsetInterval

setTimeout函数用于在指定的延迟时间后执行一次代码。它接受两个参数:要执行的代码和延迟时间(以毫秒为单位)。例如:

setTimeout(function() {
  console.log("Hello, world!");
}, 1000); // 1秒后输出 "Hello, world!"

setInterval函数用于按照指定的时间间隔重复执行一段代码。它也接受两个参数:要执行的代码和时间间隔(以毫秒为单位)。例如:

setInterval(function() {
  console.log("Hello, world!");
}, 1000); // 每隔1秒输出 "Hello, world!"

要停止定时器的执行,可以使用clearTimeout函数(用于停止setTimeout)和clearInterval函数(用于停止setInterval)。这些函数接受一个参数,即要停止的定时器的标识符。例如:

var timerId = setTimeout(function() {
  console.log("Hello, world!");
}, 1000); // 1秒后输出 "Hello, world!"

clearTimeout(timerId); // 停止定时器的执行

需要注意,定时器的执行时间并不是精确的。它依赖于浏览器的事件处理机制和其他因素,可能会有一些延迟。

JavaScript 本地存储

JavaScript提供了多种本地存储的方式,其中最常用的有以下几种:

1、localStorage:localStorage为每个域名提供了一个独立的存储空间,可以存储大量数据,数据永久性保存在用户的浏览器中,除非用户手动清除或者网站代码清除才会被删除。

2、sessionStorage:sessionStorage也是为每个域名提供了一个独立的存储空间,但是数据只在当前会话期间有效,即当用户关闭浏览器标签页或者窗口时会被删除。

Js 中除了本地存储以外,还有一种 cookie 也可以存储数据。并且 cookie 可以设置失效时间

 //存值

document.cookie = ‘数据’;

//返回所有数据以 ; 分割

document.cookie

//失效时间,若不设置时间,默认关闭浏览器时清除

document.cookie = ‘数据;expires=时间’

注意:时间格式必须是 UTC 或 GMT 时间

例如:Tue Dec 07 2021 19:29:59 GMT+0800 (中国标准时间)

相关文章
|
1月前
|
JavaScript 前端开发
javascript操作BOM的方法
javascript操作BOM的方法
30 0
|
16天前
|
JavaScript 前端开发 API
JavaScript基础-BOM与窗口交互
【6月更文挑战第12天】本文介绍了BOM(浏览器对象模型),它是JavaScript与浏览器交互的API。核心对象包括顶级对象window、document、location、navigator和history。常见问题涉及window全局作用域、location.href编码、history使用和navigator.userAgent检测。提供了代码示例,如设置页面标题、页面跳转及利用history实现无刷新跳转。掌握BOM基础和最佳实践对前端开发至关重要。
|
2天前
|
Web App开发 移动开发 JavaScript
探索 JavaScript 宇宙:DOM与BOM的星际邂逅
探索 JavaScript 宇宙:DOM与BOM的星际邂逅
|
6天前
|
JavaScript 前端开发 数据安全/隐私保护
第九篇-Javascript BOM - 上
第九篇-Javascript BOM - 上
7 0
|
1月前
|
XML JavaScript 前端开发
JavaScript简介&引入方式(JavaScript基础语法、JavaScript对象、BOM、DOM、事件监听)
JavaScript简介&引入方式(JavaScript基础语法、JavaScript对象、BOM、DOM、事件监听)
19 2
|
13天前
|
JavaScript 前端开发
JavaScript BOM 浏览器对象模型
JavaScript BOM 浏览器对象模型
|
1月前
|
缓存 JavaScript 前端开发
javaScript(五):BOM操作
JavaScript 中的 BOM(Browser Object Model)是一组用于操作浏览器窗口的对象和方法集合。BOM 使我们可以通过 JavaScript 访问浏览器窗口的各个组成部分,包括地址栏、菜单栏、历史记录、浏览器的尺寸位置等
58 0
 javaScript(五):BOM操作
|
1月前
|
缓存 编解码 自然语言处理
前端javascript的BOM对象知识精讲
前端javascript的BOM对象知识精讲
|
1月前
|
JavaScript 前端开发
深入了解 JavaScript 中的 DOM 和 BOM
深入了解 JavaScript 中的 DOM 和 BOM
56 4
|
1月前
|
JavaScript 前端开发
JavaScript BOM 浏览器对象模型
JavaScript BOM 浏览器对象模型