<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.content {
width: 800px;
height: 100vh;
background-color: black;
margin: 0 auto;
/* 相对定位 */
position: relative;
/* 溢出隐藏 */
overflow: hidden;
}
.content .zm {
width: 30px;
height: 30px;
font-size: 20px;
color: white;
text-align: center;
line-height: 30px;
/* 绝对定位 */
position: absolute;
top: 0px;
}
.content .msg {
width: 400px;
height: 200px;
background-color: rgba(185, 243, 171, 0.342);
font-size: 40px;
text-align: center;
line-height: 200px;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
</style>
</head>
<body>
<div class="content">
<div class="msg">
按回车键开始/暂停
</div>
</div>
<script>
let content = document.querySelector('.content')
// 设置一个字符串字母组
let zmTexts = 'ABCDEFGHRJKLMNOPQRSTUVWXYZ'
// 给window注册键盘弹起事件
window.onkeyup = function(e) {
// 获取键盘字母
let {
key,
keyCode
} = e
// 回车暂停
if (keyCode === 13) {
// 如果定时器是空，开启定时器
if (!timer1 && !timer2) {
createZm()
downZm()
document.querySelector('.msg').style.display = 'none'
} else {
// 如果定时器不为空，清空定时器
clearInterval(timer1)
clearInterval(timer2)
// 定时器变量，重新赋值为null
timer1 = null
timer2 = null
document.querySelector('.msg').style.display = 'block'
}
}
// 定时器在开启的状态下，才能消除元素
if (timer1 && timer2) {
// 获取所有的字母元素
let zmList = document.querySelectorAll('.zm')
// 循环所有的字母元素
zmList.forEach(r => {
// 判断每个字母元素的文本内容，是否等于键盘字母
if (r.innerText === key.toUpperCase()) {
r.remove()
}
})
}
}
let timer1 = null //该定时器生成zm
// 设置定时器让字符串往下掉
function createZm() {
// 设置定时器 控制字符串的左侧随机生成
timer1 = setInterval(() => {
// 创建Html标签
let zm = document.createElement('div')
// 标签里面的文本随机生成，由随机数控制
zm.innerHTML = zmTexts[Math.floor(Math.random() * 26)]
zm.className = 'zm' //样式赋值
//调用随机背景颜色
zm.style.backgroundColor = getColor();
// 绝对定位的left值随机生成
zm.style.left = Math.random() * 770 + 'px'
// 初始top值设为负数，掉下来的感觉
zm.style.top = '-30px'
content.appendChild(zm)
}, 300)
}
let timer2 = null //该定时器控制让字符往下掉
function downZm() {
timer2 = setInterval(() => {
// 获取所有生成的字母
let zmList = document.querySelectorAll('.zm')
// 让字母往下掉
zmList.forEach(r => {
let top = r.offsetTop + 1
r.style.top = top + 'px'
// 判断字母的top值大于容器高度删除自己
if (r.offsetTop > content.offsetHeight) {
r.remove()
}
})
}, 20);
}
// 定义一个随机颜色
function getColor() {
let colortxts = '0123456789ABCDEF'
let color = '#'
for (let i = 1; i <= 6; i++) {
color += colortxts[Math.floor(Math.random() * 16)]
}
return color
}
</script>
