1.制作按钮，按钮里面有复选框，当点击按钮的时候，按钮背景颜色发生改变，复选框会也会选被勾选；再次点击的时候按钮背景恢复原来的颜色，同时复选框会取消勾选
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
.container{
width: 50%;
margin: 100px auto;
}
.btn{
border: none;
color: whitesmoke;
font: 30px/30px "微软雅黑", '楷体';
padding: 10px 40px 10px 10px;
display: block;
margin-bottom: 20px;
background-color: #A9A9A9;
outline: none;
}
input.select{
vertical-align: middle;
}
button>span{
margin-left: 20px;
}
</style>
</head>
<body>
<div class="container">
<button class="btn"><input type="checkbox" class="select"/><span>点击</span></button>
<button class="btn"><input type="checkbox" class="select"/><span>点击</span></button>
<button class="btn"><input type="checkbox" class="select"/><span>点击</span></button>
<button class="btn"><input type="checkbox" class="select"/><span>点击</span></button>
<button class="btn"><input type="checkbox" class="select"/><span>点击</span></button>
</div>
<script>
let btns = document.querySelectorAll('.btn')
let selects = document.querySelectorAll('.select')
for (let i = 0; i < btns.length; i += 1){
btns[i].addEventListener('click', ()=>{
if (!selects[i].checked){
btns[i].style.backgroundColor = 'darkkhaki'
selects[i].checked = true
}else{
btns[i].style.backgroundColor = '#A9A9A9'
selects[i].checked = false
}
})
}
</script>
</body>
</html>
结果
2.模仿某宝商品页面的缩略图的查看的功能
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="container">
<img src="img/view-0.jpg" class="view"><br/>
<img src="img/thumb-0.jpg" alt="缩略图1" class="thumb">
<img src="img/thumb-1.jpg" alt="缩略图2" class="thumb">
<img src="img/thumb-2.jpg" alt="缩略图3" class="thumb">
</div>
<script>
let view = document.querySelector('.view')
let thumbs = document.querySelectorAll('.thumb')
for (let i=0; i<thumbs.length; i += 1){
thumbs[i].addEventListener('mouseover', ()=>{
view.src = `img/view-${i}.jpg`
})
}
</script>
</body>
</html>
结果
