web三、 window对象，延时器，定时器，时间戳，location对象（地址），本地存储-localStorage，数组去重new Set
一、window对象
window对象 是一个全局对象，也可以说是JavaScript中的 顶级对象
像document、alert()、console.log()这些都是window的属性，基本BOM的属性和方法都是window的
所有通过 var定义 在全局作用域中的 变量 、 函数 都会变成window对象的属性和方法
window对象下的属性和方法调用的时候可以 省略window
<body><a href="./10-histroy对象.html">10跳转页面</a><script>window.alert(`window自带的对象alert`) //输入语句也是window自带的对象//var定义的变量和function函数都是window对象的属性和方法,一般window省略不写console.log(name)var name = '小红'console.log(window.name) //没省略之前的function fn() {console.log(`函数`)}window.fn() //没省略之前的</script>
</body>
二、延时器
**语法：**setTimeout（回调函数，等待的毫秒数）
setTimeout仅仅只执行一次，所以可以理解为就是把一段代码延迟执行，平时省略window
清除延时器****clearTimeout(timer-id值)
返回值是一个正整数，表示定时器的****编号（唯一的id值）
<script>//延时器// setTimeout（函数，毫秒时间）// set开启 clear关闭let timeid = setTimeout(() => {console.log('延时器执行的倒计时')}, 2000)// clearTimeout(延时器的id)clearTimeout(timeid) //关闭延时器</script>
三、定时器
可以每隔指定时间自动重复执行某些代码
setInterval（函数，间隔时间-毫秒单位）
注意：1.函数名字不需要加括号2.定时器返回的是一个id数字
<body><button class="btn1">开启定时器</button><button class="btn2">关闭定时器</button><script>let timer = null //定义全局的变量储存定时器的id值const btn1 = document.querySelector(".btn1")const btn2 = document.querySelector(".btn2")btn1.addEventListener('click', function() {//setInterval（函数，毫秒为单位时间）// 防抖--·开启一个定时器之前，·关掉之前的定时器clearInterval(timer)timer = setInterval(function() {console.log(`间隔执行的定时器`)}, 3000)})btn2.addEventListener('click', function() {//clearInterval（定时器的id）clearInterval(timer)})</script>
</body>
三、时间戳
时间戳: 是指1970年01月01日00时00分00秒起至现在的 总毫秒数(数字型) ，
算法：
将来的时间戳 -现在的时间戳 = 剩余时间毫秒数
剩余时间毫秒数 转换 为 年月日时分秒 就是倒计时时间
转换公式
h = parseInt(总秒数 / 60 / 60 % 24) 计算小时
m = parseInt(总秒数 / 60 % 60) 计算分数
s = parseInt(总秒数 % 60) 计算当前秒数
获取时间戳的三种方式
date.getTime（）
+new Date0 使用较为简单
Date.now（ ）
<script>// 获取时间戳的三种方式/**1获取的是从1970年到现在的时间戳----* 小括号里可以写从1970年到指定的某年某月的时间，显示的是国际的时间，* 前面加一个+转换为毫秒*/const date = new Date()const date1 = new Date('2022-2-2 12:00')console.log(`从1970年到2022-2-2 12:00`, date1) //获得的是国际时间console.log(+new Date()) // 获得的是国际时间---前面加+转化为毫秒console.log(`日期对象来调用`, date.getTime()) //2日期对象来调用Date.now() //3 获取的是当前的时间</script>
四、location对象
location (地址) 它 拆分并保存 了 URL 地址 的各个 组成 部分， 它是一个 对象
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><!--提交表单跳转 --><form action=""><input type="text" name="username"><input type="text" name="userage"><button>提交</button></form><a href="#/music">音乐</a><button class="btn">刷新</button><script>//location (地址) 它拆分并保存了 URL 地址的各个组成部分， 它是一个对象// 常用属性和方法：console.log(location)// //跳转地址 location.href // location.href = 'http://www.baidu.com' //百度的地址,自动跳的const form = document.querySelector('form')//表单点按钮可以触发提交事件→submitform.addEventListener('submit', function(e) {//拿路径中？后面的--查询参数location.searchconsole.log('URL' + location.search)// e.preventDefault() //事件对象中的阻止默认行为})const a = document.querySelector('a')a.addEventListener('click', function() {// 获取#后面 Location.hashconsole.log(location.hash)})// 用来刷新当前页面reload( )const btn = document.querySelector('.btn')btn.addEventListener('click', function() {location.reload()})</script>
</body></html>
五、navigator对象（了解即可）
navigator 是 对象 ，该对象下记录了 浏览器自身的相关信息
常用属性和方法：
通过 userAgent 检测浏览器的版本及平台
六、histroy对象（了解即可）
history (历史)是对象，主要管理历史记录，该对象与浏览器地址栏的操作相对应，如前进、后退等
history对象一般在实际开发中比较少用，但是会在一些OA 办公系统中见到。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>histroy对象</title>
</head><body><button class="back">←后退</button><button class="forward">前进→</button><script>const back = document.querySelector("back")back.addEventListener('click', function() {// history (历史)是对象，主要管理历史记录，//history.back() //可以后退功能// forward()前进功能,history.go(-1) //前进后退功能参数如果是1前进1个页面如果是-1后退1个页面})</script>
</body></html>
七、存储-localStorage（重点）
本地存储：作用：数据可以长期保留在本地浏览器中，刷新页面和关闭页面，数据也不会丢失，
键值对的形式存储，本地只能存储字符串,无法存储复杂数据类型
存储数据：localStorage.setltem(key, value)
读取数据：localStorage.getltem(key)
删除数据：localStorage.removeltem(key)
1、基础数据类型的存取
<body><script>//存储数据// setItem(自定义的key名，存储的数据)localStorage.setItem('name', '小红')localStorage.setItem('name', '小李')// 获取数据// getItem(需要获取的数据的key名)let num = localStorage.getItem('name')console.log(num) //小李，同名储存数据，会覆盖// 删除数据// localStorage.removeItem('name')</script>
</body>
2、复杂数据类型的存取
存储复杂数据类型：
**本地只能存储字符串，无法存储复杂数据类型，要将复杂数据类型转换成JSON字符串，在存储到本地。**语法：JSON.stringify(复杂数据类型)
属性名使用双引号引起来，不能单引号，属性值如果是字符串型也必须双引号
读取复杂数据类型：
因为本地存储里面取出来的是字符串，不是对象，无法直接使用
**所以要把取出来的字符串****转换为对象。**语法：JSON.parse(JSON字符串）
<script>// 1．基本类型－ 直接写数据存储// 2，复杂类型//存：先JSON.stringify转成JSON格式的字符串// 取： JsON.parse 转回原有复杂类型const pig = {name: '佩奇',age: 5}//存储复杂类型的数据先转成JSON格式的字符串---"name"：“佩奇”--格式的字符串的引号都是双引号// console.log(JsoN.stringify(pig))localStorage.setItem('zhu', pig)console.log(localStorage.getItem('zhu')) //objectconsole.log('zhu', JSON.stringify(pig))// 想要用对象转换 JSON.parse把json格式的字符串转回复杂类型const newObj = JSON.parse(localStorage.getItem('zhu'))console.log(newObj)</script>
八、存储sessionStorage（了解)
用法跟localStorage 基本相同
区别是：当页面浏览器被关闭时，存储在sessionStorage的数据会被清除
存储：sessionStorage.setltem(key,value)
获取：sessionStorage.getltem(key)
删除：sessionStorage.removeltem(key)
九、数组去重new Set(数组)
<script>// 不允许包含重复元素// const s = new Set()// s.add(1)// s.add(10)// s.add(100)// s.add(10)// s.delete(100)// console.log(s)const arr = [10, 20, 30, 40, 50, 20, ]// 数组去重，转集合{}--→再转回数组（...展开运算）let s = new Set(arr)console.log(s)// console.log([...new Set(arr)])console.log([...s])</script>
十、案例
1.（距离xx时间的倒计时）
<body><div class="countdown"><p class="next">今天是2024年11月25日</p><p class="title">下班倒计时</p><p class="clock"><span id="hour">00</span><i>:</i><span id="minutes">25</span><i>:</i><span id="second">20</span></p><p class="tips">18:30:00下课</p></div><script>// 倒计时案例 当前距离 2023年1月28日 18:30 还剩多少时间// 转换公式// h = parseInt(总秒数 / 60 / 60 % 24) // 计算小时// m = parseInt(总秒数 / 60 % 60) // 计算分数// s = parseInt(总秒数 % 60) // 计算当前秒数// ---------------------------------------------------------//晚上6:30的时间戳－现在的时间戳剩的毫秒数转时分秒 // 思路：每隔一秒执行一次，代码放到setInterval里面//未来时间－现在时间 →转秒数→转时分秒→写入到html页面function fn() {let end = +new Date('2024-11-25 18:00:00') //结束时间let now = Date.now() //现在的时间let res = (end - now) / 1000h = parseInt(res / 60 / 60 % 24)h = h < 10 ? '0' + h : hm = parseInt(res / 60 % 60)m = m < 10 ? '0' + m : ms = parseInt(res % 60)s = s < 10 ? '0' + s : sdocument.querySelector('#hour').innerHTML = hdocument.querySelector('#minutes').innerHTML = mdocument.querySelector('#second').innerHTML = s}fn()setInterval(fn, 1000)</script>
2.bilibili搜索页面（本地储存）
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./iconfonts/iconfont.css"><link rel="stylesheet" href="./css/search.css">
</head><body><div class="m-search"><div class="form"><i class="iconfont icon-search"></i><input type="text" placeholder="凡人修仙传" class="search-input"><i class="iconfont icon-guanbi"></i></div><a href="javascript:void(0);" class="cancel">取消</a></div><div class="search-hot"><h2>大家都在搜</h2><div class="list"><span class="hotword-item">开学前一天的中国速度</span><span class="hotword-item">LOL新英雄大招全图范围</span><span class="hotword-item">央视曝光飙车炸街产业链</span></div></div><div class="gap"></div><div class="history"><h2>历史搜索</h2><ul><!-- <li><i class="iconfont icon-lishijilu_o"></i><span>凡人修仙传</span></li>--></ul><div class="clear-history"><a href="javascript:void(0);" class="clear">清除历史记录</a></div></div><!-- 搜索列表展示 --><ul class="recommend-list hide"><li class="list-item">xxxx</li></ul><script>// /用户回车发布历史记录--页面添加1i标签//准备一个数组，用户回车往数组里面新增数据，根据数组数据的个数渲染li标签// let arr = ["a", "b"]// JSON.parselet arr = JSON.parse(localStorage.getItem('history')) || []//渲染的功能用户回车就要使用→封装一个函数→有参数（数组数据是可变的，将来数据变，li标签也要变）function render(data = []) {let str = data.map(item => {return `<li><i class="iconfont icon-lishijilu_o"></i><span>${item}</span></li>`}).join('')document.querySelector('.history ul').innerHTML = str}render(arr)//用户如果按下的是回车键Enter，获取用户输入的数据放到arr（前追加unshift)const inp = document.querySelector('.search-input')inp.addEventListener('keyup', function(e) {if (e.key == 'Enter') {//如果用户输入的是空的或有空格都不能发布if (inp.value.trim() == '') {alert('请输入内容:')return}arr.unshift(inp.value)// 添加完数据后，去重集合arr = [...new Set(arr)]// 去重之后，存储到localstoragelocalStorage.setItem('history', JSON.stringify(arr))render(arr)inp.value = ''}})// 清除内容// 清空－localstorage要清除--保证刷新的不能是旧数据；本地js中的arr也要清除，这次渲染的是arr是空的const clear = document.querySelector('.clear-history a')clear.addEventListener('click', function() {arr = []localStorage.removeItem('history')render(arr)})// 使用localstorage流程：默认数据提取本地存储localstorage→使用→如果js中数据变化了，就要往本地存储localstorage里面存一次// 如果涉及到清空→localstorage里面的要清空；js中的数据也要清空</script></body></html>
相关文章：
web三、 window对象，延时器，定时器，时间戳，location对象（地址），本地存储-localStorage，数组去重new Set
一、window对象 window对象 是一个全局对象，也可以说是JavaScript中的 顶级对象 像document、alert()、console.log()这些都是window的属性，基本BOM的属性和方法都是window的 所有通过 var定义 在全局作用域中的 变量 、 函数 都会变成window对象的属…...
【EthIf-13】EthIfGeneral容器配置-01
1.EthIfGeneral类图结构 下面是EthIfGeneral配置参数的类图，比较重要的参数就是配置： 接收中断是否打开发送确认中断是否打开EthIf轮询周期 1.EthIfGeneral参数的含义...
‘pnpm’ 不是内部或外部命令，也不是可运行的程序或批处理文件。
‘pnpm’ 不是内部或外部命令，也不是可运行的程序或批处理文件。 1.情况: npm -v 和 node -v的都正常就是 pnpm-v 无效 检查环境变量也没看出问题 2.分析 没有正确添加环境变量 3.解决 找到npm的全局安装目录 npm list -g --depth 0这里出现了npm的全局安装…...
ECMAScript 6-11 概述
1. ECMA 介绍 ECMA（European Computer Manufacturers Association）是欧洲计算机制造商协会，目标是评估、开发和认可电信和计算机标准。1994年后改名为Ecma国际。 2. ECMAScript 是什么 ECMAScript 是由Ecma国际通过ECMA-262标准化的脚本程…...
sqlalchemy连接dm8 get_columns BIGINT VARCHAR字段不显示
问题 标题即为问题， 问题出现原因 sqlalchemy对应的sqlalchemy_dm源码需要调整 版本说明 python 3.10 dmPython 2.5.5(2.4.8也可以) sqlalchemy1.4.52 sqlalchemy_dm1.4.39 环境说明 部署环境 ubuntu20 开发环境window11 wsl2 ubuntu20 可能会出现的…...
运动控制卡网络通讯的心跳检测之C#上位机编程
本文导读 今天，正运动小助手给大家分享一下如何使用C#上位机编程实现运动控制卡网络通讯的心跳检测功能。 01 ECI2618B硬件介绍 ECI2618B经济型多轴运动控制卡是一款脉冲型、模块化的网络型运动控制卡。控制卡本身最多支持6轴，可扩展至12轴的运动控制…...
QT 控件定义为智能指针引发的bug
问题描述： std::unique_ptr<QStackedLayout> m_stacked_layout; 如上为定义； 调用： Line13ABClient::Line13ABClient(QWidget *parent) : BaseWidget(parent) { // 成员变量初始化 m_get_ready false; m_tittle_wnd…...
)
Scala项目(图书管理系统)
3、service BookService package org.app package serviceimport org.app.dao.{BookDAO, BorrowRecordDAO} import org.app.models.{BookModel, BorrowRecordModel}import java.time.LocalDateTime import scala.collection.mutable.ListBuffer// 图书业务逻辑层 class BookS…...
前端开发 详解 Node. js 都有哪些全局对象？
在 Node.js 中，全局对象（Global Objects）是指在任何模块中都可以直接访问的对象和变量，而不需要显式地进行导入。Node.js 提供了一些全局对象，帮助开发者在编写应用程序时更加方便地进行一些常见操作，如文件…...
2024_12_20_生活记录
年底了，提前祝各位朋友们新年快乐！我将近两年没动笔写blog了，主要确实挺忙。。。今天想简单聊聊自己的近期想法，一方面是职业规划，一方面是生信，最后是个人感悟。 职业规划 熟悉我的朋友们会了解我之前一直…...
Sequelize ORM 现有表如何使用
一、 在mysql中创建一个表 或者随便找一个现有的表 已经有了一张叫做xw_posts的表。表里的字段非常简单，大家可以自己建一下 CREATE TABLE xw_posts (id int unsigned NOT NULL AUTO_INCREMENT,name varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_…...
ArcGIS Pro 3.4新功能3：空间统计新特性，基于森林和增强分类与回归，过滤空间自相关
目录 应用 1：它是相关性还是托布勒第一定律？ 应用 2：将空间带入非空间模型 结论 在 ArcGIS Pro 3.4 中，我们在新的空间组件实用程序（Moran 特征向量）工具集中发布了一个新工具 - 从字段过滤空间自相关。…...
H3C MPLS跨域optionB
实验拓扑 实验需求 如图，VPN1 和 VPN2 分别通过运营商 MPLS VPN 连接各自分支机构按照图示配置 IP 地址，VPN1 和 VPN2 连接同一个 PE 设备的私网 IP 网段存在地址复用，使用多 VRF 技术来防止 IP 冲突AS 100 和 AS 200 内部的公共网络中各自运行 OSPF 使 AS 内各设备的 Loo…...
源码分析之Openlayers中Geometry基类介绍
概述 在上一篇文章源码分析之Openlayers中Geom篇中提到Geometry类是继承于 Openlayers 中的BaseObject类(参考源码分析之Openlayers中核心BaseObject类).而Geometry类通常情况下也是作为一个抽象基类,作为Geom几何图形的基类或父类,不会在应用中去实例化它.Geometry类回去注册…...
《Vue3 三》Vue 中的 options 选项
data 选项： data 选项：属性值必须是一个函数；返回值是一个对象，返回的对象会被 Vue 的响应式系统劫持，之后对该对象的任何访问或者修改都会在劫持中被处理。 在 Vue2.x 中，data 的属性值可以是一个函数&am…...
Elasticsearch 国产化替代方案之一 Easysearch 的介绍与部署指南
一、前言 在国内数字化转型浪潮和 信创 大背景下，“替代进口”成为许多企业级应用所需要面对的重要课题，搜索领域也不例外。 Elasticsearch（简称 ES）作为一款业界领先的全文搜索和分析引擎，虽然功能强大，但…...
Pytorch | 从零构建EfficientNet对CIFAR10进行分类
Pytorch | 从零构建EfficientNet对CIFAR10进行分类 CIFAR10数据集EfficientNet设计理念网络结构性能特点应用领域发展和改进 EfficientNet结构代码详解结构代码代码详解MBConv 类初始化方法前向传播 forward 方法 EfficientNet 类初始化方法前向传播 forward 方法 训练过程和测…...
Python超能力：高级技巧让你的代码飞起来
文章一览 前言一、with1.1 基本用法1.2 示例自定义上下文管理器 二、条件表达式三、列表式推导式与 zip 结合 四、map() 函数（内置函数）map用于数据清洗1. 数据清洗：字母大小写规范2. filter() 函数 五、匿名函数 lambda5.1 lambda的参数&…...
熊军出席ACDU·中国行南京站，详解SQL管理之道
12月21日，2024 ACDU中国行在南京圆满收官，本次活动分为三个篇章——回顾历史、立足当下、展望未来，为线上线下与会观众呈现了一场跨越时空的技术盛宴，吸引了众多业内人士的关注。云和恩墨副总经理熊军出席此次活动并发表了主题演讲…...
FPGA实现MIPI转FPD-Link车载同轴视频传输方案，基于IMX327+FPD953架构，提供工程源码和技术支持
目录 1、前言工程概述免责声明 2、相关方案推荐本博主所有FPGA工程项目-->汇总目录我这里已有的 MIPI 编解码方案 3、本 MIPI CSI-RX IP 介绍4、详细设计方案设计原理框图IMX327 及其配置FPD-Link视频串化-解串方案MIPI CSI RX图像 ISP 处理图像缓存HDMI输出工程源码架构 5、…...
【大模型RAG】拍照搜题技术架构速览：三层管道、两级检索、兜底大模型
摘要 拍照搜题系统采用“三层管道（多模态 OCR → 语义检索 → 答案渲染）、两级检索（倒排 BM25 向量 HNSW）并以大语言模型兜底”的整体框架： 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后，分别用…...
idea大量爆红问题解决
问题描述 在学习和工作中，idea是程序员不可缺少的一个工具，但是突然在有些时候就会出现大量爆红的问题，发现无法跳转，无论是关机重启或者是替换root都无法解决 就是如上所展示的问题，但是程序依然可以启动。 问题解决…...
智慧医疗能源事业线深度画像分析（上）
引言 医疗行业作为现代社会的关键基础设施，其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入，智慧医疗能源事业线应运而生，致力于通过创新技术与管理方案，重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...
docker详细操作--未完待续
docker介绍 docker官网: Docker：加速容器应用程序开发 harbor官网：Harbor - Harbor 中文 使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像 是什么 Docker 是一种开源的容器化平台，用于将应用程序及其依赖项（如库、运行时环…...
React hook之useRef
React useRef 详解 useRef 是 React 提供的一个 Hook，用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途，下面我将全面详细地介绍它的特性和用法。 基本概念 1. 创建 ref const refContainer useRef(initialValue);initialValu…...
Golang dig框架与GraphQL的完美结合
将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用，可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器，能够帮助开发者更好地管理复杂的依赖关系，而 GraphQL 则是一种用于 API 的查询语言，能够提…...
-----深度优先搜索（DFS）实现)
c++ 面试题(1)-----深度优先搜索（DFS）实现
操作系统：ubuntu22.04 IDE:Visual Studio Code 编程语言：C11 题目描述 地上有一个 m 行 n 列的方格，从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子，但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...
linux 下常用变更-8
1、删除普通用户 查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行，YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID： YW3…...
k8s业务程序联调工具-KtConnect
概述 原理 工具作用是建立了一个从本地到集群的单向VPN，根据VPN原理，打通两个内网必然需要借助一个公共中继节点，ktconnect工具巧妙的利用k8s原生的portforward能力，简化了建立连接的过程，apiserver间接起到了中继节…...
根据万维钢·精英日课6的内容，使用AI（2025）可以参考以下方法：
根据万维钢精英日课6的内容，使用AI（2025）可以参考以下方法： 四个洞见 模型已经比人聪明：以ChatGPT o3为代表的AI非常强大，能运用高级理论解释道理、引用最新学术论文，生成对顶尖科学家都有用的…...