记录--js小练习（弹幕、 电梯导航、 倒计时、 随机点名、 购物放大镜）

太空铝阳台洗衣柜

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助

DOM小练习

• 弹幕
  
• 电梯导航
  
• 倒计时
  
• 随机点名
  
• 购物放大镜
  

1.弹幕

效果预览

功能：输入弹幕内容，按下回车显示一条弹幕（弹幕颜色、字体随机生成）
思路：设置按钮抬起事件，在事件中判断如果按下的是回车键则将输入框中替换掉敏感词的数据追加到标签中，字体的颜色、大小、位置按照生成的随机数进行随机设置，并使其从屏幕右侧移动到屏幕左侧后，动画结束删除子标签

1. var input = document.querySelector(".bottomBar input");
2. var content = document.querySelector(".content");
3. //随机函数
4. function ram (min, max) {
5.   return Math.floor(Math.random() * (max - min + 1) + min);
6. }
7. input.onkeyup = function (e) {
8.   if (e.keyCode == 13) {
9.     var text = this.value.replace(/性感|暴力/gi, "**");
10.     var p = document.createElement("p");
11.     content.appendChild(p);
12.     p.innerHTML = text;
13.     p.style.color = `rgba(${ram(0, 255)},${ram(0, 255)},${ram(0, 255)})`;
14.     p.style.fontSize = ram(20, 40) + "px";
15.     p.style.top = ram(20, 200) + "px";
16.     p.className = "move";
17.   }
18. };
19. //弹幕动画结束，删除子标签
20. content.onwebkitanimationend = function (e) {
21.   e.target.remove();
22. };

复制代码

2.电梯导航

效果预览

功能：点击侧边栏跳转到响应的区域
思路：

• 给侧边栏所有元素绑定点击事件，移除掉已有的样式，给点击的元素添加样式，将滚动条移动到盒子的距离位置上
  
• 监听滚动事件，滚动条发生变化，执行onscroll函数中的内容，在函数中先获取滚动条垂直位置，循环遍历判断该位置是否超过当前元素的文档顶部，超过则移除所有元素已有的样式，给当前元素加样式
  

1. // 侧边栏所有元素
2. var items = document.querySelectorAll(".item");
3. //秒杀专区、频道广场区、为你推荐好物、客服服务父元素
4. var content = document.querySelector(".content");
5. //秒杀专区、频道广场区、为你推荐好物、客服服务数组
6. var neirongs = document.querySelectorAll(".neirong");
7. items.forEach(function (item, index) {
8. item.onclick = function () {
9.   document.querySelector(".active").classList.remove("active");
10.   this.classList.add("active");
11.   //滚动条移动到盒子的距离位置上
12.   document.documentElement.scrollTop = neirongs[index].offsetTop;
13. };
14. });
15. onscroll = function () {
16. //滚动条的位置改变，导航的类名跟着改变
17. var scro = document.documentElement.scrollTop;
18. neirongs.forEach(function (item,index) {
19.   if (scro >= item.offsetTop) {
20.     document.querySelector(".active").classList.remove("active");
21.     items[index].classList.add("active");
22.   }
23. });
24. };

复制代码

3.下班倒计时

功能：使用间歇函数完成倒计时
思路：获取到目标时间减去当前时间的时间戳，再将该时间戳转换为时分秒替换掉页面上的时间

1. <p >今天是2023年3月20日</p>
2. <p >下班倒计时</p>
3. <p >
4.   <span id="hour">00</span>
5.   <i>:</i>
6.   <span id="minutes">00</span>
7.   <i>:</i>
8.   <span id="scond">00</span>
9. </p>
10. <p >下班时间17:00:00</p>
12. <script>
13. // 修改今天日期
14. var next = document.querySelector('.next');
15. var date = new Date();
16. // 目标时间
17. var timeTarget = '2023-05-12 17:00:00'
18. next.innerHTML = `今天是${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`
19. //修改倒计时时分秒
20. var spans = document.querySelectorAll('span');
21. var countdown = document.querySelector('.countdown');
22. function times () {
23.   var times = (+new Date(timeTarget) - +Date.now()) / 1000
24.   spans[0].innerHTML = parseInt(times / 3600).toString().padStart(2, '0');
25.   spans[1].innerHTML = parseInt(times / 60 % 60).toString().padStart(2, '0');
26.   spans[2].innerHTML = parseInt(times % 60).toString().padStart(2, '0');
27.   countdown.style.backgroundColor = `rgba(${Math.floor(Math.random() * 256)},${Math.floor(Math.random() * 256)},${Math.floor(Math.random() * 256)})`
29. }
30. times();
31. setInterval(() => {
32.   times();
33. }, 1000);

复制代码

4.班级点名

效果预览

功能：

• 点击点名按钮，开始随机点名
  
• 点击停止按钮，停止点名
  

问题：多次点击会开启多个定时器，点击停止点名动作不会停止
解决：每次点击点名按钮，把上一个定时器关闭或者定时器未关闭则置灰点名按钮
思路：根据数组内容创建数组中所有的姓名标签，当点击点名按钮时，生成定时器，随机给不同的元素节点添加背景颜色，实现点名效果
[code]var students = [数据];//创建标签添加所有姓名var stuNames = document.querySelector('.stuNames')stuNames.innerHTML = students.map(function(item){return `${item.stuName}`}).join('');//随机函数var rand = function(min,max){return Math.floor(Math.random()*(max-min+1)+min);}//点名按钮功能var start = document.querySelector('.start');var names = document.querySelectorAll('.item');var stop;start.onclick = function(){// 方法一：关闭定时器clearInterval(stop); stop = setInterval(() => {  for(var i=0;i