做塑胶原料用什么网站好,asp.net 网站开发实例,化妆品网站 源码,北京网站制作策划一、window对象
window对象 是一个全局对象#xff0c;也可以说是JavaScript中的 顶级对象
像document、alert()、console.log()这些都是window的属性#xff0c;基本BOM的属性和方法都是window的
所有通过 var定义 在全局作用域中的 变量 、 函数 都会变成window对象的属…
一、window对象
window对象 是一个全局对象也可以说是JavaScript中的 顶级对象
像document、alert()、console.log()这些都是window的属性基本BOM的属性和方法都是window的
所有通过 var定义 在全局作用域中的 变量 、 函数 都会变成window对象的属性和方法
window对象下的属性和方法调用的时候可以 省略window
bodya href./10-histroy对象.html10跳转页面/ascriptwindow.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数字
bodybutton classbtn1开启定时器/buttonbutton classbtn2关闭定时器/buttonscriptlet 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定时器的idclearInterval(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 langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbody!--提交表单跳转 --form actioninput typetext nameusernameinput typetext nameuseragebutton提交/button/forma href#/music音乐/abutton classbtn刷新/buttonscript//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 langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titlehistroy对象/title
/headbodybutton classback←后退/buttonbutton classforward前进→/buttonscriptconst 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、基础数据类型的存取
bodyscript//存储数据// setItem(自定义的key名存储的数据)localStorage.setItem(name, 小红)localStorage.setItem(name, 小李)// 获取数据// getItem(需要获取的数据的key名)let num localStorage.getItem(name)console.log(num) //小李同名储存数据会覆盖// 删除数据// localStorage.removeItem(name)/script
/body2、复杂数据类型的存取
存储复杂数据类型
**本地只能存储字符串无法存储复杂数据类型要将复杂数据类型转换成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时间的倒计时
bodydiv classcountdownp classnext今天是2024年11月25日/pp classtitle下班倒计时/pp classclockspan idhour00/spani:/ispan idminutes25/spani:/ispan idsecond20/span/pp classtips18:30:00下课/p/divscript// 倒计时案例 当前距离 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)/script2.bilibili搜索页面本地储存 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlelink relstylesheet href./iconfonts/iconfont.csslink relstylesheet href./css/search.css
/headbodydiv classm-searchdiv classformi classiconfont icon-search/iinput typetext placeholder凡人修仙传 classsearch-inputi classiconfont icon-guanbi/i/diva hrefjavascript:void(0); classcancel取消/a/divdiv classsearch-hoth2大家都在搜/h2div classlistspan classhotword-item开学前一天的中国速度/spanspan classhotword-itemLOL新英雄大招全图范围/spanspan classhotword-item央视曝光飙车炸街产业链/span/div/divdiv classgap/divdiv classhistoryh2历史搜索/h2ul!-- lii classiconfont icon-lishijilu_o/ispan凡人修仙传/span/li--/uldiv classclear-historya hrefjavascript:void(0); classclear清除历史记录/a/div/div!-- 搜索列表展示 --ul classrecommend-list hideli classlist-itemxxxx/li/ulscript// /用户回车发布历史记录--页面添加1i标签//准备一个数组用户回车往数组里面新增数据根据数组数据的个数渲染li标签// let arr [a, b]// JSON.parselet arr JSON.parse(localStorage.getItem(history)) || []//渲染的功能用户回车就要使用→封装一个函数→有参数数组数据是可变的将来数据变li标签也要变function render(data []) {let str data.map(item {return lii classiconfont icon-lishijilu_o/ispan${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
