我们来看一些闭包的引用
1:闭包应用的计算器
<!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="next">-</button>
<button id="num">0</button>
<button id="add">+</button>
<script>
var next = document.getElementById('next')
var add = document.getElementById('add')
var num = document.getElementById('num')
function fun() {
// 初始化计数器
var count = 0;
add.onclick = function () {
num.innerHTML = ++count
}
next.onclick = function(){
if(count>0){
num.innerHTML= --count;
}
}
}
fun()
</script>
</body>
</html>
2:闭包应用的手动轮播图
<!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>{
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.show {
width: 500px;
height: 300px;
border: 1px solid black;
position: relative;
}
.show img{
width: 500px;
height: 300px;
display: none;
}
span {
width: 15px;
height: 30px;
display: inline-block;
position: absolute;
top: 135px;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
}
.pre {
left: 0;
}
.next {
right: 0;
}
</style>
</head>
<body>
<div>
<div class="show">
<img src="./img/1.jpg" alt="">
<img src="./img/2.jpg" alt="">
<img src="./img/3.jpg" alt="">
<img src="./img/4.jpg" alt="">
<span class="pre"> < </span>
<span class="next"> > </span>
</div>
</div>
<script>
// 通过class类名获取dom元素数组,通过数组取值获取dom对象
var pre = document.getElementsByClassName('pre')[0]
var next = document.getElementsByClassName('next')[0]
// 通过标签名字获取dom元素【数组】
var imgs = document.getElementsByTagName('img')
function swiper(){
var index = 0;
// 给 第一个图片数组 css样式 display 为block
imgs[0].style.display = 'block'
next.onclick = function(){
imgs[index].style.display = 'none'
++index
console.log(index)
if(index>imgs.length -1){
index = 0;
}
imgs[index].style.display = 'block'
}
pre.onclick = function(){
imgs[index].style.display = ''
--index
if(index<0){
index=3
}
imgs[index].style.display = 'block'
}
}
swiper()
</script>
</body>
</html>
闭包的应用场景还有很多很多,但是要用的话一定得注意一些坑。