首页 > 其他分享 >记录--js小练习(弹幕、 电梯导航、 倒计时、 随机点名、 购物放大镜)

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

时间:2023-12-14 17:55:06浏览次数:34  
标签:function style -- leftCover js querySelector var document 弹幕

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

DOM小练习

  1. 弹幕
  2. 电梯导航
  3. 倒计时
  4. 随机点名
  5. 购物放大镜

1.弹幕

效果预览

功能:输入弹幕内容,按下回车显示一条弹幕(弹幕颜色、字体随机生成)

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

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

2.电梯导航

效果预览

功能:点击侧边栏跳转到响应的区域

思路:

  • 给侧边栏所有元素绑定点击事件,移除掉已有的样式,给点击的元素添加样式,将滚动条移动到盒子的距离位置上
  • 监听滚动事件,滚动条发生变化,执行onscroll函数中的内容,在函数中先获取滚动条垂直位置,循环遍历判断该位置是否超过当前元素的文档顶部,超过则移除所有元素已有的样式,给当前元素加样式
// 侧边栏所有元素
var items = document.querySelectorAll(".item");
//秒杀专区、频道广场区、为你推荐好物、客服服务父元素
var content = document.querySelector(".content");
//秒杀专区、频道广场区、为你推荐好物、客服服务数组
var neirongs = document.querySelectorAll(".neirong");
items.forEach(function (item, index) {
item.onclick = function () {
  document.querySelector(".active").classList.remove("active");
  this.classList.add("active");
  //滚动条移动到盒子的距离位置上
  document.documentElement.scrollTop = neirongs[index].offsetTop;
};
});
onscroll = function () {
//滚动条的位置改变,导航的类名跟着改变
var scro = document.documentElement.scrollTop;
neirongs.forEach(function (item,index) {
  if (scro >= item.offsetTop) {
    document.querySelector(".active").classList.remove("active");
    items[index].classList.add("active");
  }
});
};

3.下班倒计时

功能:使用间歇函数完成倒计时

思路:获取到目标时间减去当前时间的时间戳,再将该时间戳转换为时分秒替换掉页面上的时间

<div class="countdown">
<p class="next">今天是2023年3月20日</p>
<p class="title">下班倒计时</p>
<p class="clock">
  <span id="hour">00</span>
  <i>:</i>
  <span id="minutes">00</span>
  <i>:</i>
  <span id="scond">00</span>
</p>
<p class="tips">下班时间17:00:00</p>
</div>
<script>
// 修改今天日期
var next = document.querySelector('.next');
var date = new Date();
// 目标时间
var timeTarget = '2023-05-12 17:00:00'
next.innerHTML = `今天是${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`
//修改倒计时时分秒
var spans = document.querySelectorAll('span');
var countdown = document.querySelector('.countdown');
function times () {
  var times = (+new Date(timeTarget) - +Date.now()) / 1000
  spans[0].innerHTML = parseInt(times / 3600).toString().padStart(2, '0');
  spans[1].innerHTML = parseInt(times / 60 % 60).toString().padStart(2, '0');
  spans[2].innerHTML = parseInt(times % 60).toString().padStart(2, '0');
  countdown.style.backgroundColor = `rgba(${Math.floor(Math.random() * 256)},${Math.floor(Math.random() * 256)},${Math.floor(Math.random() * 256)})`

}
times();
setInterval(() => {
  times();
}, 1000);

4.班级点名

效果预览

功能:

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

问题:多次点击会开启多个定时器,点击停止点名动作不会停止

解决:每次点击点名按钮,把上一个定时器关闭或者定时器未关闭则置灰点名按钮

思路:根据数组内容创建数组中所有的姓名标签,当点击点名按钮时,生成定时器,随机给不同的元素节点添加背景颜色,实现点名效果

var students = [数据];
//创建标签添加所有姓名
var stuNames = document.querySelector('.stuNames')
stuNames.innerHTML = students.map(function(item){
return `<div class = 'item'>${item.stuName}</div>`
}).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<names.length;i++){
    names[i].style.backgroundColor = '';
  }
  names[rand(0,names.length-1)].style.backgroundColor = 'orange';
 }, 100);
//  方法二:点击一次置灰点名按钮
// start.disabled = true;

}
// 结束功能
var end = document.querySelector('.end');

end.onclick = function() {
clearInterval(stop);
//方法二:点击停止,点名按钮放开
// start.disabled = false;
}

5.放大镜

效果预览:

思路:

  • 当鼠标进入到左侧盒子时,盒子遮罩层显示,右侧放大图片盒子显示
  • 当鼠标在左侧盒子移动时,遮罩层随着鼠标的移动跟随移动,并以鼠标为中心点,对遮罩层范围进行限制,不能移动出左侧盒子之外,
  • 根据遮罩层的位置改变右侧大图片的展示效果。
//左侧可视盒子
var left = document.querySelector(".left");
//右侧可视盒子
var right = document.querySelector(".right");
//左侧遮罩盒子
var leftCover = document.querySelector(".leftCover");
//最外层的大盒子
var container = document.querySelector(".container");
//移入显示遮罩层和右侧盒子
container.onmouseenter = function () {
  leftCover.style.display = "block";
  right.style.display = "inline-block";
  //计算遮罩层的最大值
  var maxX = this.offsetWidth - leftCover.offsetWidth;
  var maxY = this.offsetHeight - leftCover.offsetHeight;
  container.onmousemove = function (e) {

    //跟随鼠标移动
    leftCover.style.left = e.pageX - this.offsetLeft - leftCover.offsetWidth / 2 + 'px';
    leftCover.style.top = e.pageY - this.offsetTop - leftCover.offsetHeight / 2 + 'px';
    //设置遮罩层不溢出
    var currentX = leftCover.offsetLeft;
    var currentY = leftCover.offsetTop;
    currentX = currentX <= 0 ? 0 : currentX;
    currentX = currentX >= maxX ? maxX : currentX;
    currentY = currentY <= 0 ? 0 : currentY;
    currentY = currentY >= maxY ? maxY : currentY;
    // console.log(currentX, currentY)
    leftCover.style.left = currentX + "px";
    leftCover.style.top = currentY + "px";
    //改变大图像
    var img = document.querySelector('.right img')
    img.style.left = -2 * leftCover.offsetLeft + 'px';
    img.style.top = -2 * leftCover.offsetTop + 'px';

  };

};
//移出隐藏遮罩盒子和右侧盒子
container.onmouseleave = function () {
  leftCover.style.display = "none";
  right.style.display = "none";
};

本文转载于:

https://juejin.cn/post/7311219067200258086

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

 

标签:function,style,--,leftCover,js,querySelector,var,document,弹幕
From: https://www.cnblogs.com/smileZAZ/p/17901700.html

相关文章

  • 服务器日记
    查看玩法:自己拥有一台服务器可以做哪些很酷的事情?-知乎(zhihu.com)  自己拥有一台服务器可以做哪些很酷的事情?-知乎(zhihu.com)搜索监控服务器:netdata监控服务器_百度搜索(baidu.com)查看教程:65.7kStar!强大又全面的性能监控工具——Netdata-知乎(zhihu.com)查看......
  • Swift —— 一、架构解析
    一、简介OpenStack对象存储(swift)用于冗余、可扩展的数据使用标准化服务器集群存储PB的存储可访问的数据。它是一种长期存储系统,可存储大量可以检索和更新的静态数据。对象存储使用分布式架构没有中央控制点,提供更大的可扩展性,冗余和持久性。对象写入多个硬件设备,使用Ope......
  • React Native package.json 控制App的版本号
    原文:https://blog.csdn.net/gu1920948999/article/details/117984844package.json"version":"1.0.0",android配置android/app/build.gradleimportgroovy.json.JsonSlurper.../***获取版本号*/defgetAppVersion(){definputFile=new......
  • 文心一言 VS 讯飞星火 VS chatgpt (156)-- 算法导论12.3 3题
    三、用go语言,对于给定的n个数的集合,可以通过先构造包含这些数据的一棵二叉搜索树(反复使用TREE-INSERT逐个插入这些数),然后按中序遍历输出这些数的方法,来对它们排序。这个排序算法的最坏情况运行时间和最好情况运行时间各是多少?文心一言:在Go语言中,使用二叉搜索树(BST)进行排序......
  • 【问题解决】unable to do port forwarding: socat not found
    问题复现前阵子应公司要求做华为云平台的调研,写了一篇文档包含将华为云CCE下载kuberctl配置及使用kubectl转发流量到本地的操作。今天一早上同事就发来一个错误界面,说是Java远程调试转发过来的端口出现问题,如下图:处理思路最初以为是容器镜像未安装socat所致,安装重新打镜像后......
  • Directory.Move方法的使用限制
    今天在写一个小工具的时候,发现在移动文件夹的时候出现了下面的错误:System.IO.IOException:“Sourceanddestinationpathmusthaveidenticalroots.Movewillnotworkacrossvolumes.”查了一下,说是Directory.Move这个方法不支持跨盘符移动。于是写测试代码试了一下。/......
  • 12.15----python类
    classUser:def__init__(self,first_name,last_name):"""初始化姓和名"""self.f_name=first_nameself.l_name=last_namedefdescribe_user(self):"""返回整洁的描述性姓名"&q......
  • 【大数相加链表模拟】
    leetcode2.两数相加题意:两个长度为[1,100]的大数,分别倒序存储(个位在链表头)在两个链表中,计算两个数的和,并倒序存储在一个新链表,返回链表表头。数据中不存在前导零。题解:模拟大数相加,注意维护进位carry即可代码/***Definitionforsingly-linkedlist.*publicclassL......
  • 5G NR RRC协议解析—NR系统消息
    5GNRRRC协议解析—NR系统消息来源  https://zhuanlan.zhihu.com/p/606227190  01系统消息是什么?系统消息是由基站周期性地在下行链路的广播信息,其内容包含了该基站的基础配置信息、空口(Uu接口)协议层的关键参数等。因此,系统信息对于UE而言非常重要。对于任何移动通信系......
  • 汇编-JGE有符号大于等于则跳转
      .386.modelflat,stdcalloptioncasemap:none.stack4096IncludeIrvine32.incincludelibIrvine32.libExitProcessPROTO,dwExitCode:DWORD.data.codemainPROCmoveax,+100cmpeax,+10jgelabel0;有符号大于......