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