![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
天蓬老师Correction status：qualified
Teacher's comments：其实许多的网站物效,或者实用组件, 用js实现的核心代码没多少的, 也很好记住, 不是吗?
Collection
Collection
-实现留言版的效果，最新留言排列在最前面，支持删除
<body><form action="" onsubmit="return false"><label for="aaa">打印</label><input type="text" id="aaa" name="aaa" placeholder="回车确认" /></form><ul id="bbb"></ul><script>// 先获取上面的元素，然后添加事件，使用回车键触发，需要用到keyup这个属性const da = document.querySelector("#aaa");const kuang = document.querySelector("#bbb");// 接下来创建事件// keyup是抬起是触发 keydown是按下时触发da.addEventListener("keyup", hanshu, false);// 设置hanshu的方法function hanshu(ev) {if (ev.key === "Enter") {console.log(da.value);if (da.value.trim().length === 0) {alert("不能为空");return false;}// 创建元素,并且创建元素的内容const li = document.createElement("li");// 创建元素的内容li.innerHTML = da.value + ' <button onclick="del(this)">删除</button>';// 挂载元素到ul// bbb.appendChild(li);if (bbb.childElementCount === 0) {bbb.appendChild(li);} else {bbb.insertBefore(li, kuang.firstElementChild);}da.value = null;}}// function del(ele) {// if (confirm("是否删除")) return false;// }function del(ele) {console.log(ele);// 要删除的是button的父元素liif (confirm("是否删除")) kuang.removeChild(ele.parentNode);}</script></body>
效果图
<script>// 使用事件代理const tab = document.querySelector(".tab");const items = document.querySelectorAll(".item");// 这里给导航添加事件tab.addEventListener("click", hanshu, false);// 事件回调function hanshu(ev) {// 1.清空之前样式Array.from(tab.children).forEach((item) => item.classList.remove("active"));// 2.给当前选项添加新样式ev.target.classList.toggle("active");// 3.清空之前样式, 并将用户当前的选择项激活items.forEach((item) => item.classList.remove("active"));// 4.根据导航对应的索引项(data-index)来确定将哪个内容区激活items.forEach((item) =>item.dataset.index === ev.target.dataset.index ? item.classList.toggle("active") : null);}</script>
-效果图
<script>document.querySelector(".box").addEventListener("click", (ev)=>(document.body.style.backgroundImage = "url("+ ev.target.src + ")"))</script>
-效果图
// 获取图片const imgs = document.querySelectorAll(".box img");// 获取视口的高度const shikou = document.documentElement.clientHeight;// 监听窗口的滚动事件window.addEventListener("scroll", lan, false);// load在页面加载成功时自动执行，// 把页面加载成功时的可视区图片加载出来window.addEventListener("load", lan, false);// 设置函数参数function lan() {let gdg = document.documentElement.scrollTop;// 使用foreach遍历图片滚动高度和视口高度之和石是否小于offsetTop的高度imgs.forEach((img) => {// shikou和gdg前面已经声明了if (img.offsetTop <= shikou + gdg) {img.src = img.dataset.src;// 如果感觉图片显示太快,可以用定时器来控制一下setTimeout(() => {img.src = img.dataset.src;}, 4000);}});}</script>
-效果图
天蓬老师