work01-缩略图
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>work01-缩略图</title>
<style>
#b_img,#s_img{
margin: 0 auto;
text-align: center;
}
</style>
</head>
<body>
<div id="b_img">
<img src="../img/b-1.jpg">
</div>
<div id="s_img"></div>
<script>
let bImgList = ['b-1', 'b-2', 'b-3']
let sImgList = ['s-1', 's-2', 's-3']
let sImg = document.querySelector('#s_img')
let str = ''
for (let i = 0; i < sImgList.length; i += 1) {
str += `<img src="../img/${sImgList[i]}.jpg">`
}
sImg.innerHTML = str
let bBtn = document.querySelector('#b_img>img')
let sBtn = document.querySelectorAll('#s_img>img')
for (let i = 0; i < sBtn.length; i++) {
sBtn[i].addEventListener('mouseover', ()=>{
bBtn.src = `../img/${bImgList[i]}.jpg`
})
}
</script>
</body>
</html>
work02-按钮点击事件
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>work02-按钮点击事件</title>
<style>
.btn {
margin: 200px auto;
text-align: center;
}
button {
width: 150px;
height: 50px;
margin: 0 auto;
cursor: pointer;
background-color: red;
font: bold 24px/32px "Arial";
}
</style>
</head>
<body>
<div class="btn"></div>
<script>
let div = document.querySelector('.btn')
let num = 5
let str = ''
for (let i = 0; i < num; i+= 1) {
str += `<button><input type="checkbox">${String.fromCharCode(65 + i)}</button>`
}
div.innerHTML = str
let btnList = document.querySelectorAll('button')
for (let btn of btnList) {
let ck = btn.querySelector('input[type=checkbox]')
btn.addEventListener('click', () => {
if (ck.checked){
ck.checked = false
btn.style.backgroundColor = 'red'
}else{
ck.checked = true
btn.style.backgroundColor = 'lightgreen'
}
})
}
</script>
</body>
</html>
