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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/494818.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

利用Spring Cloud Gateway Predicate优化微服务路由策略

利用Spring Cloud Gateway Predicate优化微服务路由策略 一、Predicate简介 Spring Cloud Gateway 是 Spring 生态系统中用于构建 API 网关的框架&#xff0c;它基于 Project Reactor 和 Netty 构建&#xff0c;旨在提供一种高效且灵活的方式来处理 HTTP 请求和响应。 Spring …

C#代码实现把中文录音文件(.mp3 .wav)转为文本文字内容

我们有一个中文录音文件.mp3格式或者是.wav格式&#xff0c;如果我们想要提取录音文件中的文字内容&#xff0c;我们可以采用以下方法&#xff0c;不需要使用Azure Speech API 密钥注册通过离线的方式实现。 1.首先我们先在NuGet中下载两个包 NAudio 2.2.1、Whisper.net 1.7.3…

CASA(Carnegie-Ames-Stanford Approach) 模型原理及实践

植被作为陆地生态系统的重要组成部分对于生态环境功能的维持具有关键作用。植被净初级生产力&#xff08;Net Primary Productivity, NPP&#xff09;是指单位面积上绿色植被在单位时间内由光合作用生产的有机质总量扣除自养呼吸的剩余部分。植被NPP是表征陆地生态系统功能及可…

申请腾讯混元的API Key并且使用LobeChat调用混元AI

申请腾讯混元的API Key并且使用LobeChat调用混元AI 之前星哥写了一篇文章《手把手教拥有你自己的大模型ChatGPT和Gemini等应用-开源lobe-chat》搭建的开源项目&#xff0c;今天这篇文章教大家如何添加腾讯云的混元模型&#xff0c;并且使用LobeChat调用腾讯混元AI。 申请腾讯混…

alertmanager告警持久化方案:alertsnitch

Prometheus告警记录持久化 Prometheus将基于告警规则生成的告警存储为时间序列&#xff0c;不会将Alertmanager的告警信息持久化存储&#xff0c; 那么针对历史告警的检索、统计等需求就无法实现。因此需要一种持久化机制用于存储历史告警信息&#xff0c; 本文主要探究基于al…

springboot481基于springboot社区老人健康信息管理系统(论文+源码)_kaic

摘 要 如今社会上各行各业&#xff0c;都喜欢用自己行业的专属软件工作&#xff0c;互联网发展到这个时候&#xff0c;人们已经发现离不开了互联网。新技术的产生&#xff0c;往往能解决一些老技术的弊端问题。因为传统社区老人健康信息管理系统信息管理难度大&#xff0c;容错…

109.【C语言】数据结构之求二叉树的高度

目录 1.知识回顾&#xff1a;高度&#xff08;也称深度&#xff09; 2.分析 设计代码框架 返回左右子树高度较大的那个的写法一:if语句 返回左右子树高度较大的那个的写法二:三目操作符 3.代码 4.反思 问题 出问题的代码 改进后的代码 执行结果 1.知识回顾&#xf…

重温设计模式--享元模式

文章目录 享元模式&#xff08;Flyweight Pattern&#xff09;概述享元模式的结构C 代码示例1应用场景C示例代码2 享元模式&#xff08;Flyweight Pattern&#xff09;概述 定义&#xff1a; 运用共享技术有效地支持大量细粒度的对象。 享元模式是一种结构型设计模式&#xff0…

Pytorch | 从零构建EfficientNet对CIFAR10进行分类

Pytorch | 从零构建EfficientNet对CIFAR10进行分类 CIFAR10数据集EfficientNet设计理念网络结构性能特点应用领域发展和改进 EfficientNet结构代码详解结构代码代码详解MBConv 类初始化方法前向传播 forward 方法 EfficientNet 类初始化方法前向传播 forward 方法 训练过程和测…

【教程】第十一章 子任务 工时——化繁为简

小伙伴们&#xff0c;终于迎来了新章节&#xff01;随着业务的扩展&#xff0c;任务越来越多&#xff0c;越来越复杂&#xff0c;我们逐渐意识到&#xff0c;简单的任务管理已经不够用了。现在&#xff0c;我们需要对任务进行更细致的管理&#xff0c;分解成多个层级&#xff0…

git clone必须使用sudo否则失败 git推送错误想再次编辑和推送

git clone必须使用sudo否则失败 我的问题比较特别用env | grep -i proxy发现没问题所幸直接删掉~/.ssh下的秘钥&#xff0c;重新弄 搭建SSH秘钥方法: &#xff08;一&#xff09;配置git 操作&#xff1a;linux镜像--桌面--右键--打开终端。 > git config --global user.n…

Docker搭建kafka环境

系统&#xff1a;MacOS Sonoma 14.1 Docker版本&#xff1a;Docker version 27.3.1, build ce12230 Docker desktop版本&#xff1a;Docker Desktop 4.36.0 (175267) 1.拉取镜像 先打开Docker Desktop&#xff0c;然后在终端执行命令 docker pull lensesio/fast-data-dev …

Java复习|图形用户界面AWT、Swing----银行客户管理系统【校课版】【1】

校课总结&#xff0c;部分&#xff0c;未完待续...... 背景了解 Java的AWT和Swing的现状 AWT&#xff08;Abstract Window Toolkit&#xff09; AWT是Java中最早期的图形用户界面&#xff08;GUI&#xff09;工具包&#xff0c;它直接与操作系统提供的图形函数进行交互&a…

cudnn版本gpu架构

nvcc --help 可以看 --gpu-architecture 写到的支持的架构 NVIDIA 的 GPU 架构是按代次发布的&#xff0c;以下是这些架构的对应说明&#xff1a; NVIDIA Hopper: 这是 NVIDIA 于 2022 年推出的架构之一&#xff0c;面向高性能计算&#xff08;HPC&#xff09;和人工智能&…

视频汇聚融合云平台Liveweb一站式解决视频资源管理痛点

随着5G技术的广泛应用&#xff0c;各领域都在通信技术加持下通过海量终端设备收集了大量视频、图像等物联网数据&#xff0c;并通过人工智能、大数据、视频监控等技术方式来让我们的世界更安全、更高效。然而&#xff0c;随着数字化建设和生产经营管理活动的长期开展&#xff0…

【Mysql】truncate 和 delete的区别

【Mysql】truncate 和 delete的区别 【一】删除内容【二】执行速度【三】事务日志记录【四】回滚【五】触发器【六】外键约束【七】锁定【八】使用场景【九】总结【1】truncate【2】drop【3】delete 【一】删除内容 &#xff08;1&#xff09;TRUNCATE TABLE&#xff1a;删除表…

为什么要用云电脑玩游戏?5大好处揭秘,ToDesk云机性能强又易用

电脑在人们日常的工作与生活中无疑是颇为重要的。无论是学生撰写论文报告、企业白领处理数据图形等事项&#xff0c;还是游戏迷、影视迷们畅玩游戏或观看视频都难免要经常用到。拥有一台性能配置优质并且内置软件全面的电脑&#xff0c;对各类群体来说都大有益处&#xff0c;尤…

串口通信控制LED灯

做这个东西的目的是锻炼一下自己的编程能力以及系统思维能力 首先&#xff0c;清楚自己要干什么&#xff0c;正点原子大家应该都看过&#xff0c;系统框图是一个比较重要的东西&#xff0c;引导我们去设计和思考。 下面先给出系统框图&#xff1a; 模块划分好后&#xff0c;结构…

Windows开启IIS后依然出现http error 503.the service is unavailable

问题背景 已启用IIS服务&#xff0c;配置步骤可以参考Windows10 IIS Web服务器安装配置 问题描述 在这一步浏览网站时&#xff0c;并没有出现默认首页&#xff0c;而是 http error 503 the service is unavailable 问题解决 参考 成功解决http error 503.the service is un…

mapbox基础,加载mapbox官方地图

&#x1f468;‍⚕️ 主页&#xff1a; gis分享者 &#x1f468;‍⚕️ 感谢各位大佬 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍⚕️ 收录于专栏&#xff1a;mapbox 从入门到精通 文章目录 一、&#x1f340;前言1.1 ☘️mapboxgl.Map 地图对象…