JavaScript - 练习
编辑
41
2025-01-15
>切换照片
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.outer {
width: 640px;
margin: 50px auto;
text-align: center;
}
</style>
<script>
window.onload = function () {
/*
点击按钮切换图片
*/
// 获取info
const info = document.getElementById("info")
// 获取到图片
const img = document.getElementsByTagName("img")[0]
// 获取两个按钮
const prev = document.getElementById("prev")
const next = document.getElementById("next")
// 创建一个数组来存储图片的路径
const imgArr = [
"./images/1.png",
"./images/2.png",
"./images/3.png",
"./images/4.png",
"./images/5.png",
]
// 创建一个变量记录当前图片的索引
let current = 0
// 设置info元素的内容,显示总图片数和当前图片索引
info.textContent = `总共 ${imgArr.length} 张图片,当前第 ${current + 1} 张`
// 上一张
prev.onclick = function () {
current--
// 如果当前图片索引小于0,则设置为最后一张图片的索引
if (current < 0) {
// current = 0
current = imgArr.length - 1
}
// 更新img元素的src属性,显示当前图片
img.src = imgArr[current]
// 更新info元素的内容,显示总图片数和当前图片索引
info.textContent = `总共 ${imgArr.length} 张图片,当前第 ${current + 1} 张`
}
// 点击next按钮后,切换图片
next.onclick = function () {
current++
if (current > imgArr.length - 1) {
// current = imgArr.length - 1
current = 0
}
// 切换图片 --> 2.png 就是修改img的src属性
img.src = imgArr[current]
info.textContent = `总共 ${imgArr.length} 张图片,当前第 ${current + 1} 张`
}
}
</script>
</head>
<body>
<div class="outer">
<p id="info">
总共n张图片,当前第m张
</p>
<div class="img-wrapper">
<img src="./images/1.png" alt="这是一个图片" />
</div>
<div class="btn-wrapper">
<button id="prev">上一张</button>
<button id="next">下一张</button>
</div>
</div>
</body>
</html>
>选择框
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
name="viewport">
<meta content="ie=edge" http-equiv="X-UA-Compatible">
<title>Document</title>
</head>
<body>
<div>
<form action="#">
<div>
请选择你的爱好:
<input id="check-all" type="checkbox"/> 全选
</div>
<div>
<input name="hobby" type="checkbox" value="乒乓球"/> 乒乓球
<input name="hobby" type="checkbox" value="篮球"/> 篮球
<input name="hobby" type="checkbox" value="羽毛球"/> 羽毛球
<input name="hobby" type="checkbox" value="足球"/> 足球
</div>
<div>
<button id="all" type="button">全选</button>
<button id="no" type="button">取消</button>
<button id="reverse" type="button">反选</button>
<button id="send" type="button">提交</button>
</div>
</form>
</div>
<script src="main.js"></script>
</body>
</html>
const hobby = document.getElementsByName("hobby")
const allBtn = document.getElementById('all')
allBtn.onclick = function () {
for (let i = 0; i < hobby.length; i++) {
hobby[i].checked = true
}
checkBtn.checked = true
}
const noBtn = document.getElementById('no')
noBtn.onclick = function () {
for (let i = 0; i < hobby.length; i++) {
hobby[i].checked = false
}
checkBtn.checked = false
}
const reverseBtn = document.getElementById('reverse')
reverseBtn.onclick = function () {
for (let i = 0; i < hobby.length; i++) {
hobby[i].checked = !hobby[i].checked
}
const checkedBox = document.querySelectorAll(
"[name=hobby]:checked"
)
if (hobby.length === checkedBox.length) {
checkBtn.checked = true
} else {
checkBtn.checked = false
}
}
const sendBtn = document.getElementById('send')
sendBtn.onclick = function () {
for (let i = 0; i < hobby.length; i++) {
hobby[i].checked && alert(hobby[i].value)
}
}
const checkBtn = document.getElementById('check-all')
checkBtn.onchange = function () {
for (let i = 0; i < hobby.length; i++) {
hobby[i].checked = this.checked
}
}
for (let i = 0; i < hobby.length; i++) {
hobby[i].onchange = function () {
const checkedBox = document.querySelectorAll(
"[name=hobby]:checked"
)
if (hobby.length === checkedBox.length) {
checkBtn.checked = true
} else {
checkBtn.checked = false
}
}
}
- 0
- 0
-
分享