当前位置:网站首页>轮播图节流阀原理及本地存储归总
轮播图节流阀原理及本地存储归总
2022-07-17 05:05:00 【共创splendid--与您携手】
轮播图节流阀原理(示例):
<!-- 节流阀理解 -->
<!-- 点击圆圈 是不是有个动画
再点击圆圈 是不是有个动画
自动切换 是不是又是一个动画
那么这些动画再同时执行时 可能会出问题
怎么解决? -> 一个动画执行完 再去执行另外一个动画
flag = true;
a动画
if(flag){这里面再执行动画
flag = false
move(a,b,function(){
flag = true 函数执行完后将flag改成true
})这是个动画
}
b动画
if(flag){是true时执行动画
flag = false
move(a,b,function(){
flag = true 函数执行完后将flag改成true
})
这是个动画
} --> 案例:
circle.addEventListener('click',function(e){
//这里给a标签点击事件有个小bug 就是我们鼠标点击到.circle标签时候图片也滑动了
//解决上面小bug的方法
if(e.target.nodeName !='A'){
return false;
}
//使用节流阀,在外部已经定义了flag=true
if(flag){
flag = false;
// e.target指向的是a标签
console.log(e.target);
// console.log(e.target.nodeName);
// 获得索引值
thisIndex = e.target.getAttribute('index');
// console.log(thisIndex);
//图片移动的规则 0索引值 ->0 1 ->-1*620 2 ->-2*620
// 这里的图片移动 我们可以用封装好的缓动动画来实现
// imgList.style.left = -thisIndex*620+'px';
slow(imgList,-thisIndex*620,function(){
flag = true;
});
//调用小圆点改变样式的函数
circlechange();
}
})本地存储归总:
window.sessionStorage
sessionStorage定义的数据在同一个窗口下可以共享,关闭浏览器数据会消失,存储方式以键值对的形式存储使用,存储容量: 5M
·设置数据
sessionStorage.setItem(key, value)
·获取数据
sessionStorage.getItem(key)
删除数据
sessionStorage.removeItem(key)
·清空数据
sessionStorage.clear()
window.localStorage
1、声明周期永久生效,除非手动删除 否则关闭页面也会存在
2、可以多窗口(页面)共享(同一浏览器可以共享)
3. 以键值对的形式存储使用
·设置数据
localStorage.setItem("username","张三");
·获取数据
localStorage.getItem("username")
· 删除数据
localStorage.removeItem("username")
·清除所有数据localStorage.clear()
案例:
sessionStorage.setItem('username','李四');
// console.log(sessionStorage.getItem('username'));
sessionStorage.clear();
console.log(sessionStorage.getItem('username'));
localStorage.setItem('username','张三');
console.log(localStorage.getItem('username'));
localStorage.removeItem('username');
// localStorage.setItem('username','张三');
// sessionStorage.removeItem('username');
// sessionStorage.clear('username');
// localStorage.removeItem('username');
// localStorage.clear('username');结合上面的归总了解案例,如粉丝有疑问,可私信我哈!!!
边栏推荐
- 租用服务器,以及部署在pycharm专业版上的pytorch环境训练yolov5模型教程服务器环境安装库文件:
- 简单快速建立pytorch环境YOLOv5目标检测 模型跑起来(超简单)
- Simply and quickly establish a pytorch environment yolov5 target detection model to run (super simple)
- 机器学习之特征提取(类别特征进行数值化、离散化、文本特征进行数值化)
- MySQL takes the union of two query conditions and then queries
- Three high concurrency methods to realize I++
- 数据分析与数据挖掘实战案例本地房价预测(716):
- Infinite classification
- Simple use of directexchange switches.
- The database takes the fields of the configuration file, and then processes and judges the data
猜你喜欢
随机推荐
学习C语言第7天
Database training 7 [index and creation of data integrity constraints]
机器学习之特征提取(类别特征进行数值化、离散化、文本特征进行数值化)
【C语言—零基础第九课】函数中的爱恨情仇
【C语言—零基础第十三课】字符串的奥秘
ArcGIS Pro发布服务
事务的使用-django、 SQL工具
CVE-2017-12635 Couchdb 垂直权限绕过漏洞复现
PyGame aircraft War 1.0 (step + window no response problem)
ModerlArts第一次培训笔记
学习C语言的第四天
Cve-2021-44228 log4j reproduction and principle
POC——DVWA‘s SQL Injection
【C语言—零基础_学习_复习_第四课】数据类型及其运算
The database takes the fields of the configuration file, and then processes and judges the data
First training notes of moderlarts
NVIDIA GeForce Experience登录报错:验证程序加载失败,请检查您的浏览器设置,例如广告拦截程序(解决办法)
CVE-2020-10199 Nexus Repository Manager3远程命令执行漏洞复现
HarmonyOS第四次培训笔记
游玩数据获取与数据分析、数据挖掘 【2022.5.30】









