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 + padding
1.可以获取行内及内嵌的宽高
2.获取到的值是一个number类型，不带单位
3.获取的宽高包含border和padding
4.只能读取，不能设置
*/
console.log ( box.offsetWidth ); //width + border + padding
console.log ( box.offsetHeight ); //height + border + padding
box.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.如果元素自身是固定定位，则定位父级是null
2.如果元素自身是非固定定位,并且所有的父元素都没有定位，那么他的定位父级是body
3.body的定位父级是null
*/
let box = document.getElementById('box');
console.log ( box.offsetParent );
//如果是固定定位fixed，则父元素是null
//原因：固定定位参照的是浏览器窗口，这不属于任何一个元素，所以是null
// console.log ( box.offsetParent );//null
//body自身的定位父元素是null
console.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 ); //70
console.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 () {
//清除定时器
//参数：定时器ID
clearInterval(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 s
let 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.获取div
let div = document.querySelector('#box');
// //直接修改div的left值就会瞬间移动，没有动画
// document.getElementById('start').onclick = function ( ) {
// div.style.left = '800px';
// }
//2.利用定时器实现动画（setInterval）
let timeID = null;//声明一个变量，用来记录定时器的id
let 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>
扫一扫
547
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
