定时器作用及语法"/>
localstorage与sessionstorage offset家族 定时器作用及语法
01-localstorage与sessionstorage
1.1-localstorage
1.localStorage:本地存储
将数据存储到浏览器
2.语法
存： localStorage.setItem('属性名','属性值')取： localStorage.getItem('属性名')删： localStorage.removeItem('属性名')清空： localStorage.clear()
3.注意点
a.存储的数据只能是字符串类型。如果是其他数据类型则会自动调用toString()方法转成字符串
b**.永久存储**。除非自己删，否则一直存在于浏览器
c.复合数据类型 使用JSON.stringify()转换成json字符串进行存储
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><button id="btn1">存储据</button><button id="btn2">取储据</button><button id="btn3">删储据</button><button id="btn4">清空储据</button><script>/* 1.localStorage:本地存储将数据存储到浏览器2.语法存： localStorage.setItem('属性名','属性值')取： localStorage.getItem('属性名')删： localStorage.removeItem('属性名')清空： localStorage.clear()3.注意点a.存储的数据只能是字符串类型。如果是其他数据类型则会自动调用toString()方法转成字符串b.永久存储。除非自己删，否则一直存在于浏览器*///存document.getElementById('btn1').onclick = function(){localStorage.setItem('name','班长');localStorage.setItem('age',18);localStorage.setItem('girlFriend',['小白','小红','小黑']);}//取document.getElementById('btn2').onclick = function(){let age = localStorage.getItem('age');console.log(age); }//删document.getElementById('btn3').onclick = function(){localStorage.removeItem('girlFriend'); }//清空:一次性删除所有数据document.getElementById('btn4').onclick = function(){localStorage.clear(); }</script>
</body>
</html>
1.2-sessionStorage
1.sessionStorage相当于短命版的localStorage，其他用法完全一致
2.两者区别：HP值不同
localStorage：永久存储（存在硬盘，HP值无限）
sessionStorage：临时存储（存在内存，HP值一条命，只要浏览器关闭就没有了）
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><button id="btn1">存储据</button><button id="btn2">取储据</button><button id="btn3">删储据</button><button id="btn4">清空储据</button><script>/* 1.sessionStorage相当于短命版的localStorage，其他用法完全一致2.两者区别：HP值不同localStorage：永久存储（存在硬盘，HP值无限）sessionStorage：临时存储（存在内存，HP值一条命，只要浏览器关闭就没有了）*///存document.getElementById('btn1').onclick = function(){sessionStorage.setItem('name','班长');sessionStorage.setItem('age',18);sessionStorage.setItem('girlFriend',['小黑','小红','小白']);}//取document.getElementById('btn2').onclick = function(){let age = sessionStorage.getItem('age');console.log(age); }//删document.getElementById('btn3').onclick = function(){sessionStorage.removeItem('girlFriend'); }//清空:一次性删除所有数据document.getElementById('btn4').onclick = function(){sessionStorage.clear(); }</script>
</body>
</html>
02-offset家族
- 1.offset属性家族：获取元素真实的宽高和位置
- offsetWidth
- offsetHeight
- offsetParent
- offsetLeft
- offsetTop
- 2.之前学习的通过style属性获取宽高的特点
- 1.只能获取行内的宽高
- 2.获取到的值是一个string类型，并且带px
- 3.获取到的只有宽高，不包含padding、border（总结就是行内写的是什么，获取的就是什么）
- 4.既可以读取，也可以设置
- 3.offsetWidth与offsetHeight：获取的是元素的实际宽高 = width + border + padding
- 1.可以获取行内及内嵌的宽高(全局的属性)
- 2.获取到的值是一个number类型，不带单位
- 3.获取的宽高包含border和padding
- 4.只能读取，不能设置
1.1-offsetWidth与offsetHeight
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.one{width: 100px;padding: 10px;border: 10px solid red;}</style>
</head>
<body>
<div id="box" class="one" style="height: 150px; background: pink; "></div>
</body><script>/*offset属性家族：获取元素真实的宽高和位置* offsetWidth、offsetHeight、offsetParent、offsetLeft、offsetTop*/let box = document.getElementById('box');/*之前学习的通过style属性获取宽高的特点* 1.只能获取行内的宽高* 2.获取到的值是一个string类型，并且带px* 3.获取到的只有宽高，不包含padding、border（总结就是行内写的是什么，获取的就是什么）* 4.既可以读取，也可以设置*/console.log ( box.style.width );console.log ( box.style.height );box.style.height = '100px';/*offsetEWidth与offsetHeight：获取的是元素的实际宽高 = width + border + padding1.可以获取行内及内嵌的宽高2.获取到的值是一个number类型，不带单位3.获取的宽高包含border和padding4.只能读取，不能设置*/console.log ( box.offsetWidth ); //width + border + paddingconsole.log ( box.offsetHeight ); //height + border + paddingbox.offsetWidth = 300; //手动设置无效：只能读取，不能设置。
</script>
</html>
1.2-offsetParent
offsetParent:获取最近的定位父元素 （自己定位参照的父元素）
注意点：
1.如果元素自身是固定定位（fixed），则定位父级是null
2.如果元素自身是非固定定位,并且所有的父元素都没有定位，那么他的定位父级是body
3.body的定位父级是null
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.one{top: 50px;left: 0px;width: 100px;height: 100px;background: greenyellow;position: absolute;}.two{top: 100px;left: 0;width: 200px;height: 200px;background: cyan;position: relative;}.three{top: 0;left: 0;width: 300px;height: 300px;background: green;position: relative;}</style>
</head>
<body>
<div class="three"><div class="two"><div class="one" id="box">1</div></div>
</div></body><script>/*offsetParent:获取最近的定位父元素 （自己定位参照的父元素）//注意点：1.如果元素自身是固定定位，则定位父级是null2.如果元素自身是非固定定位,并且所有的父元素都没有定位，那么他的定位父级是body3.body的定位父级是null*/let box = document.getElementById('box');console.log ( box.offsetParent );//如果是固定定位fixed，则父元素是null//原因：固定定位参照的是浏览器窗口，这不属于任何一个元素，所以是null// console.log ( box.offsetParent );//null//body自身的定位父元素是nullconsole.log ( document.body.offsetParent );</script>
</html>
1.3-offsetLeft和offsetTop
- offsetLeft:获取自己左外边框与offsetParent的左内边框的距离
- offsetTop:获取自己上外边框与offsetParent的上内边框的距离
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.one{top:50px;left: 50px;width: 100px;height: 100px;background: greenyellow;border: 10px solid red;margin: 20px;position: absolute;}.two{top: 200px;left: 200px;width: 200px;height: 200px;background: cyan;border: 20px solid purple;padding: 10px;position: absolute;}</style>
</head>
<body><div class="two"><div class="one" id="box">1</div></div>
</body><script>/*offsetLeft:获取自己左外边框与offsetParent的左内边框的距离offsetTop:获取自己上外边框与offsetParent的上内边框的距离*/let box = document.getElementById('box');console.log ( box.offsetLeft ); //70console.log ( box.offsetTop ); //70
</script>
</html>
03-定时器作用及语法
1.1-setInterval
定时器：某一件事（一段代码）并不是马上执行，而是隔一段时间执行
- setInterval:创建定时器
- 特点：一旦创建立即计时，必须要手动停止，否则会无限的每隔一段时间执行代码
- clearInterval(定时器id)：清除定时器
- 一个页面可以创建很多个定时器，通过制定定时器id可以清除特定的定时器
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><button id="start">开启</button><button id="end">结束</button><p id="p1">0</p><script>/*1.定时器: 让一段代码每隔一定时间自动执行2.语法开启定时器： setInterval() 一旦开启永久重复，只能手动调用语法停止清除定时器 clearInterval()*/let p1 = document.querySelector('#p1');let timeID = null;//声明变量存储定时器//注册事件document.getElementById('start').onclick = function () {/**开启定时器第一个参数：一段代码 回调函数第二个参数：时间间隔 单位：ms返回值： 定时器ID timeID定时器ID：一个页面可以开启很多个不同的定时器，浏览器为了区分这些定时器，每开启一个定时器就会给它们一个编号，这个编号叫做定时器ID*/timeID = setInterval(function () {console.log('哈哈哈');p1.innerText++;// let text = p1.innerText;// text++;//只是变量text的值+1// console.log(text);// p1.innerText = text;}, 1000);};document.getElementById('end').onclick = function () {//清除定时器//参数：定时器IDclearInterval(timeID);};</script>
</body></html>
1.2-setTimeout
- 定时器setTimeout与setInterval唯一的区别是，setTimeout定时器只会执行一次
- 总结：
- 1.如果你想让这个代码一段时间后只执行一次，使用setTimeout
- 2.如果你想让这个代码每隔一段时间执行一次（执行多次），使用setInterval
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><script>/* 1. setInterval() :永久定时器 一旦开启会永久重复， 只能手动清除clearInterval() :清除2. setTimeout() : 一次定时器 一旦开启只会执行一次，执行完毕之后自动清除*/let timeID = setTimeout(function(){console.log('boom');},5000);//一次定时器也可以清除，但是不常用// clearInterval(timeID);// clearTimeout(timeID);</script>
</body>
</html>
04-定时器的场景案例
1.1-倒计时秒杀
-
思路分析
开启定时器，1s
1.先获取页面元素的文本 h m s
2.每过1s，s–
3.如果s < 0, s = 59, m–
4.如果m < 0, m = 59, h–
5.如果 h m s < 10,则在前面加上0
6.将计算的h m s 结果，显示到页面元素中
7.如果h == 0 && m == 0 && s == 0
<!DOCTYPE html>
<html><head lang="en"><meta charset="UTF-8"><title>Document</title><style>.box {width: 200px;height: 100px;margin: 100px auto;}span {display: inline-block;width: 30px;height: 40px;line-height: 40px;background-color: #222;color: #fff;text-align: center;font-weight: 700;}</style>
</head><body><div class="box"><span id="spanHour">03</span><span>:</span><span id="spanMin">06</span><span>:</span><span id="spanSec">15</span></div><script>/*思路分析 开启一个永久定时器。时间间隔1s。(1).获取页面元素的文本。 h m s(2).每过1s， s--(3). 如果s < 0, s = 59,m--(4) 如果 m < 0, m = 59,h--(5)如果hms < 10，则在前面加上0 (5)将计算好的时分秒hms赋值给页面元素文本(6)如果 s == 0 && m == 0 && h == 0,清除定时器*/let timeID = setInterval(function () {//(1).获取页面元素的文本。 h m slet hDiv = document.querySelector('#spanHour');let mDiv = document.querySelector('#spanMin');let sDiv = document.querySelector('#spanSec');let h = hDiv.innerText;let m = mDiv.innerText;let s = sDiv.innerText;//(2).每过1s， s--s--;//(3). 如果s < 0, s = 59,m--if (s < 0) {s = 59;m--;};//(4) 如果 m < 0, m = 59,h--if (m < 0) {m = 59;h--;};//(5)如果h m s < 10，则在前面加上0 /*注意点： 不要直接用字符串和数字计算，应该先转成number类型 */s = parseInt(s);m = parseInt(m);h = parseInt(h);s = s < 10 ? '0' + s : s;m = m < 10 ? '0' + m : m;h = h < 10 ? '0' + h : h;//(6)将计算好的时分秒hms赋值给页面元素文本hDiv.innerText = h;mDiv.innerText = m;sDiv.innerText = s;//(7)如果 s == 0 && m == 0 && h == 0,清除定时器if (s == 0 && m == 0 && h == 0) {clearInterval(timeID);}}, 1000)</script>
</body></html>
1.2-动画介绍（匀速动画）
需求：
- 点击开始按钮，让div向右移动800px ，动画效果
- 动画可以理解为物理中的运动，运动三要素：v = s/t （速度 = 距离/时间）
- 如果没有时间因素，则会造成瞬移效果
- 1.如果直接修改div的left值就会瞬间移动，没有动画效果
- 2.动画效果：让div的left值每隔一段时间向右移动一点，直到移动800为止
```typescript<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title>标题</title><style>.one {width: 100px;height: 100px;background-color: pink;position: absolute;top: 50px;left: 0px;}</style></head><body><input type="button" value="开始" id="start"/><div class="one" id="box"></div></body><script>/*需求：点击开始按钮，让div向右移动800px ，动画效果动画可以理解为物理中的运动，运动三要素：v = s/t （速度 = 距离/时间）* 如果没有时间因素，则会造成瞬移效果*1.如果直接修改div的left值就会瞬间移动，没有动画效果2.动画效果：让div的left值每隔一段时间向右移动一点，直到移动800为止* *///1.获取divlet div = document.querySelector('#box');// //直接修改div的left值就会瞬间移动，没有动画// document.getElementById('start').onclick = function ( ) {// div.style.left = '800px';// }//2.利用定时器实现动画（setInterval）let timeID = null;//声明一个变量，用来记录定时器的idlet currentLeft = 0 ;//声明一个变量，用来记录运动中当前的left值document.getElementById('start').onclick = function ( ) {timeID = setInterval(function ( ) {//定义一个距离因子来表示速度，每隔一段时间，当前距离会叠加这个因子//因子越小，动画越平缓let step = 9;currentLeft += step;div.style.left = currentLeft + 'px';//判断div是否达到目的地，否则会无限向右移动if(currentLeft >= 800){div.style.left = 800 + 'px'; //到达终点clearInterval(timeID); //清除定时器，停止运动}},100);//间隔时间越小动画越平缓}</script></html>
更多推荐
localstorage与sessionstorage offset家族 定时器作用及语法
发布评论