1.制作按鈕，按鈕里面有復(fù)選框宣渗，當(dāng)點(diǎn)擊按鈕的時(shí)候抖所，按鈕背景顏色發(fā)生改變，復(fù)選框會(huì)也會(huì)選被勾選痕囱；再次點(diǎn)擊的時(shí)候按鈕背景恢復(fù)原來(lái)的顏色田轧，同時(shí)復(fù)選框會(huì)取消勾選
<!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>點(diǎn)擊</span></button>
<button class="btn"><input type="checkbox" class="select"/><span>點(diǎn)擊</span></button>
<button class="btn"><input type="checkbox" class="select"/><span>點(diǎn)擊</span></button>
<button class="btn"><input type="checkbox" class="select"/><span>點(diǎn)擊</span></button>
<button class="btn"><input type="checkbox" class="select"/><span>點(diǎn)擊</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>
結(jié)果
2.模仿某寶商品頁(yè)面的縮略圖的查看的功能
<!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>
結(jié)果
