JavaScript - 练习
编辑
49
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>>选择框
// 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>
// main.js
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
}
}
}>自定义员工信息
// html
<!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: 400px;
margin: 100px auto;
text-align: center;
}
table {
width: 400px;
border-collapse: collapse;
margin-bottom: 20px;
}
td,
th {
border: 1px black solid;
padding: 10px 0;
}
form div {
margin: 10px 0;
}
</style>
</head>
<body>
<div class="outer">
<table>
<tbody>
<tr>
<th>姓名</th>
<th>邮件</th>
<th>薪资</th>
<th>操作</th>
</tr>
<tr>
<td>孙悟空</td>
<td>swk@hgs.com</td>
<td>10000</td>
<td><a href="javascript:;">删除</a></td>
</tr>
<tr>
<td>猪八戒</td>
<td>zbj@glz.com</td>
<td>8000</td>
<td><a href="javascript:;">删除</a></td>
</tr>
<tr>
<td>沙和尚</td>
<td>shs@lsh.com</td>
<td>6000</td>
<td><a href="javascript:;">删除</a></td>
</tr>
</tbody>
</table>
<form action="#">
<div>
<label for="name">姓名</label>
<input type="text" id="name" />
</div>
<div>
<label for="email">邮件</label>
<input type="email" id="email" />
</div>
<div>
<label for="salary">薪资</label>
<input type="number" id="salary" />
</div>
<button id="btn" type="button">添加</button>
</form>
</div>
</body>
</html>
// main.js
document.addEventListener("DOMContentLoaded", function () {
/*
点击删除超链接后，删除当前的员工信息
*/
function delEmpHandler() {
// 本练习中的超链接，我们是不希望发生跳转，但是跳转行为是超链接的默认行为
// 只要点击超链接就会触发页面的跳转，事件中可以通过取消默认行为来阻止超链接的跳转
// 使用return false来取消默认行为，只在 xxx.xxx = function(){}这种形式绑定的事件中才适用
// return false
// 删除当前员工 删除当前超链接所在的tr
// console.log(this)
// this表示当前点击的超链接
const tr = this.parentNode.parentNode;
// 获取要删除的员工的姓名
// const empName = tr.getElementsByTagName("td")[0].textContent
const empName = tr.firstElementChild.textContent;
// 弹出一个友好的提示
if (confirm("确认要删除【" + empName + "】吗？")) {
// 删除tr
tr.remove();
}
}
// 获取所有的超链接
const links = document.links;
// 为他们绑定单级响应函数
for (let i = 0; i < links.length; i++) {
links[i].onclick = delEmpHandler;
// links[i].addEventListener("click", function(){
// alert(123)
// return false // 无法取消默认行为
// })
}
/*
点击按钮后，将用户的信息插入到表格中
*/
// 获取tbody
const tbody = document.querySelector("tbody");
const btn = document.getElementById("btn");
btn.onclick = function () {
// 获取用户输入的数据
const name = document.getElementById("name").value;
const email = document.getElementById("email").value;
const salary = document.getElementById("salary").value;
// 将获取到的数据设置DOM对象
/*
<tr>
<td>孙悟空</td>
<td>swk@hgs.com</td>
<td>10000</td>
<td><a href="javascript:;">删除</a></td>
</tr>
*/
// 创建元素
const tr = document.createElement("tr");
// 创建td
const nameTd = document.createElement("td");
const emailTd = document.createElement("td");
const salaryTd = document.createElement("td");
// 添加文本
nameTd.innerText = name;
emailTd.textContent = email;
salaryTd.textContent = salary;
// 将三个td添加到tr中
tr.appendChild(nameTd);
tr.appendChild(emailTd);
tr.appendChild(salaryTd);
tr.insertAdjacentHTML(
"beforeend",
'<td><a href="javascript:;">删除</a></td>'
);
tbody.appendChild(tr);
// 由于上边的超链接是新添加的，所以它的上边并没有绑定单级响应函数，所以新添加的员工无法删除
// 解决方式：为新添加的超链接单独绑定响应函数
links[links.length - 1].onclick = delEmpHandler;
};
});- 0
- 0
-
分享