- 2024-12-19·前端开发查看全文Day5 学习JS——练习电梯导航案例 需求： 1、滑动到一定的程度，显示导航栏，点击顶部可返回页面最上方 2、点击导航的小模块，页面会以滑动的方式抵达相应的大模块...400分享
Day6 练习制作学生信息表案例 核心思路： 1、声明一个空数组 2、点击录入，填写的相关数据添加到一个新的对象中，并将该对象追加到数组里，并重置填写框里面的内容 3、根据数组数据渲染页面-表格的行 4、点击删除操作，删除的是对应数组里面的数据 5、再次根据数组的数据，渲染页面 补充： 点击录入时，若判断填写框内存在空时，出现提示 详细说明： 点击录入模块时，需要实现的几点步骤 1、取消表单默认提交事件 2、创建一个用于获取表单所填写内容的数据的新对象 3、将该对象追加给数组 4、渲染数据————通过遍历数组，动态生成tr，并将数组内容填写到对应的td数据 5、重置表单里所填写的内容 如何实现删除？ 那就需要去删除对应数组里面的数据，再进行重新渲染 但是，怎么样才能找到你要删除的数据呢？ 在删除数据的时候，动态给a链接添加相应的自定义属性 点击删除模块时，需要实现的几点步骤 1、采用事件委托形式，给tbody注册点击事件 2、判断事件对象.target.tagName是否等于a，数组执行删除操作 3、重新渲染。调用渲染函数 点击录入，验证表单 1、获取所有需要填写的表单，他们共同的特点都是input标签 2、遍历获取到的伪数组，若存在一个值为空，则return返回提示输入 成果：
Day5 学习JS——练习电梯导航案例 需求： 1、滑动到一定的程度，显示导航栏，点击顶部可返回页面最上方 2、点击导航的小模块，页面会以滑动的方式抵达相应的大模块 3、导航上的小模块会根据滑动的位置进行字体的高亮显示 分析： 1、通过页面滚动事件来判断页面滑动的距离，以此控制导航栏的样式；通过点击事件，并设置滚动的高度，以此达到页面的跳转 2、通过元素点击事件，以自定义属性进行判断，找到相应的小模块与大模块之间的联系，设置大模块距页面的距离；添加滚动样式 3、通过页面滚动事件，根据大模块的位置以此判断出显示相应高亮的范围
Day4 学习JS： 了解了页面加载事件与页面滚动事件以及用于获取元素大小与位置的相关属性：client家族与offset家族 并练习了相关案例进行巩固
Day3 结合所学，仿学习通制作一个随机抽人案例 思路： 1、页面设计：有一个显示框和一个按钮 2、按下开始按钮后，将开始随机播放图像和文字，同时开始按钮将演变成结束按钮 3、按下结束按钮将停止播放 实现代码： <body> <div class="head_img"></div> <div class="name">姓名</div> <div class="button"> <button class="open">开始</button> <button class="stop">结束</button> </div> <script> const data = [ { img: 'image/tu1.png', name: '老王' }, { img: 'image/tu2.png', name: '小二' }, { img: 'image/tu3.png', name: '张三' }, { img: 'image/tu4.png', name: '李四' }, { img: 'image/tu5.png', name: '王五' }, { img: 'image/tu6.png', name: '赵六' } ] let timer = 0 const start = document.querySelector('.open') const stop = document.querySelector('.stop') const img = document.querySelector('.head_img') const name = document.querySelector('.name') start.addEventListener('click', function () { timer = setInterval(function () { let random = parseInt(Math.random() * data.length) name.innerHTML = data[random].name img.style.backgroundImage = `url(${data[random].img})` }, 100) start.style.display = 'none' stop.style.display = 'block' }) stop.addEventListener('click', function () { clearInterval(timer) stop.style.display = 'none' start.style.display = 'block' }) </script> </body> 难点： 实现单一按钮的交互效果 解决方案： 1、用一个大盒子将两个按钮给包裹起来 2、对两个按钮分别添加点击事件，实现显示状态的互相转换
Day 2 今日目标：学习JS，了解事件流与事件委托，并将其运用到相关案例
Day 1 前端小白入坑 今日学习目标：学习JS，了解事件对象、环境对象以及回调函数，并将其运用到一些案例中
