>切换照片<!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; }; });