web三、 window对象,延时器,定时器,时间戳,location对象(地址),本地存储-localStorage,数组去重new Set

devtools/2024/12/29 0:05:18/

一、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>

http://www.ppmy.cn/devtools/146238.html

相关文章

redis的基础知识

概念 redis的工作模式 redis的特点 redis数据类型 常用命令 批量设置键值对 list列表类型 hash数据

HBU深度学习手写作业11-LSTM

推导LSTM网络中参数的梯度&#xff0c; 并分析其避免梯度消失的效果 根据LSTM的计算公式&#xff0c;可以得出LSTM的cell state与、、都存在计算关系&#xff0c;而、、的计算公式又全部都与有关&#xff0c;所以从到的反向传播的公式如下&#xff1a; 由LSTM各个门的计算公式可…

一个比RTK或redux更轻量级更易使用的 React 第三方状态管理工具库的配置与使用

本文由作者 Samdy_Chan 原创,未经作者同意,请勿随意转载! 使用轻量级第三方的 React 状态管理库 zustand 管理共享状态数据 在 react 框架应用中,开发者应该大多数都是采用 redux 状态管理工具库来管理应用的共享状态数据,但用过 redux 的人都知道,其配置和使用相当复杂…

【Golang 面试题】每日 3 题(五)

✍个人博客&#xff1a;Pandaconda-CSDN博客 &#x1f4e3;专栏地址&#xff1a;http://t.csdnimg.cn/UWz06 &#x1f4da;专栏简介&#xff1a;在这个专栏中&#xff0c;我将会分享 Golang 面试中常见的面试题给大家~ ❤️如果有收获的话&#xff0c;欢迎点赞&#x1f44d;收藏…

【设计模式】命令模式

什么是命令模式 命令模式是一种行为型设计模式。 它可将请求转换为一个包含与请求相关的所有信息的独立对象。 该转换让你能根据不同的请求将方法参数化、 延迟请求执行或将其放入队列中&#xff0c; 且能实现可撤销操作。 例如你正在开发一款新的文字编辑器&#xff0c; 包含…

React 组件中 State 的定义、使用及正确更新方式

​&#x1f308;个人主页&#xff1a;前端青山 &#x1f525;系列专栏&#xff1a;React篇 &#x1f516;人终将被年少不可得之物困其一生 依旧青山,本期给大家带来React篇专栏内容React 组件中 State 的定义、使用及正确更新方式 前言 在 React 应用开发中&#xff0c;state …

R语言的数据类型

标题&#xff1a;《探索R语言数据类型的奥秘》 引言&#xff1a; 在统计学和数据分析的世界里&#xff0c;R语言无疑是一颗璀璨的明星。它以其强大的数据处理能力和丰富的图形展示功能而受到广泛欢迎。然而&#xff0c;要熟练掌握并高效使用R语言&#xff0c;深入了解其数据类…

Linux应用软件编程-多任务处理(进程)

多任务&#xff1a;让系统具备同时处理多个事件的能力。让系统具备并发性能。方法&#xff1a;进程和线程。这里先讲进程。 进程&#xff08;process&#xff09;&#xff1a;正在执行的程序&#xff0c;执行过程中需要消耗内存和CPU。 进程的创建&#xff1a;操作系统在进程创…