<style>
? ? ? ? * {
? ? ? ? ? ? margin: 0;
? ? ? ? ? ? padding: 0;
? ? ? ? ? ? list-style: none;
? ? ? ? }
? ? ? ? .content {
? ? ? ? ? ? width: 800px;
? ? ? ? ? ? height: 100vh;
? ? ? ? ? ? background-color: black;
? ? ? ? ? ? margin: 0 auto;
? ? ? ? ? ? /* 相對(duì)定位 */
? ? ? ? ? ? position: relative;
? ? ? ? ? ? /* 溢出隱藏 */
? ? ? ? ? ? overflow: hidden;
? ? ? ? }
? ? ? ? .content .zm {
? ? ? ? ? ? width: 30px;
? ? ? ? ? ? height: 30px;
? ? ? ? ? ? font-size: 20px;
? ? ? ? ? ? color: white;
? ? ? ? ? ? text-align: center;
? ? ? ? ? ? line-height: 30px;
? ? ? ? ? ? /* 絕對(duì)定位 */
? ? ? ? ? ? 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')
? ? ? ? ? ? // 設(shè)置一個(gè)字符串字母組
? ? ? ? let zmTexts = 'ABCDEFGHRJKLMNOPQRSTUVWXYZ'
? ? ? ? // 給window注冊(cè)鍵盤彈起事件
? ? ? ? window.onkeyup = function(e) {
? ? ? ? ? ? // 獲取鍵盤字母
? ? ? ? ? ? let {
? ? ? ? ? ? ? ? key,
? ? ? ? ? ? ? ? keyCode
? ? ? ? ? ? } = e
? ? ? ? ? ? // 回車暫停
? ? ? ? ? ? if (keyCode === 13) {
? ? ? ? ? ? ? ? // 如果定時(shí)器是空，開啟定時(shí)器
? ? ? ? ? ? ? ? if (!timer1 && !timer2) {
? ? ? ? ? ? ? ? ? ? createZm()
? ? ? ? ? ? ? ? ? ? downZm()
? ? ? ? ? ? ? ? ? ? document.querySelector('.msg').style.display = 'none'
? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? // 如果定時(shí)器不為空，清空定時(shí)器
? ? ? ? ? ? ? ? ? ? clearInterval(timer1)
? ? ? ? ? ? ? ? ? ? clearInterval(timer2)
? ? ? ? ? ? ? ? ? ? ? ? // 定時(shí)器變量，重新賦值為null
? ? ? ? ? ? ? ? ? ? timer1 = null
? ? ? ? ? ? ? ? ? ? timer2 = null
? ? ? ? ? ? ? ? ? ? document.querySelector('.msg').style.display = 'block'
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? // 定時(shí)器在開啟的狀態(tài)下，才能消除元素
? ? ? ? ? ? if (timer1 && timer2) {
? ? ? ? ? ? ? ? // 獲取所有的字母元素
? ? ? ? ? ? ? ? let zmList = document.querySelectorAll('.zm')
? ? ? ? ? ? ? ? ? ? // 循環(huán)所有的字母元素
? ? ? ? ? ? ? ? zmList.forEach(r => {
? ? ? ? ? ? ? ? ? ? // 判斷每個(gè)字母元素的文本內(nèi)容，是否等于鍵盤字母
? ? ? ? ? ? ? ? ? ? if (r.innerText === key.toUpperCase()) {
? ? ? ? ? ? ? ? ? ? ? ? r.remove()
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? })
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? let timer1 = null //該定時(shí)器生成zm
? ? ? ? ? ? // 設(shè)置定時(shí)器讓字符串往下掉
? ? ? ? function createZm() {
? ? ? ? ? ? // 設(shè)置定時(shí)器 控制字符串的左側(cè)隨機(jī)生成
? ? ? ? ? ? timer1 = setInterval(() => {
? ? ? ? ? ? ? ? // 創(chuàng)建Html標(biāo)簽
? ? ? ? ? ? ? ? let zm = document.createElement('div')
? ? ? ? ? ? ? ? ? ? // 標(biāo)簽里面的文本隨機(jī)生成，由隨機(jī)數(shù)控制
? ? ? ? ? ? ? ? zm.innerHTML = zmTexts[Math.floor(Math.random() * 26)]
? ? ? ? ? ? ? ? zm.className = 'zm' //樣式賦值
? ? ? ? ? ? ? ? ? ? //調(diào)用隨機(jī)背景顏色
? ? ? ? ? ? ? ? zm.style.backgroundColor = getColor();
? ? ? ? ? ? ? ? // 絕對(duì)定位的left值隨機(jī)生成
? ? ? ? ? ? ? ? zm.style.left = Math.random() * 770 + 'px'
? ? ? ? ? ? ? ? ? ? // 初始top值設(shè)為負(fù)數(shù)，掉下來(lái)的感覺
? ? ? ? ? ? ? ? zm.style.top = '-30px'
? ? ? ? ? ? ? ? content.appendChild(zm)
? ? ? ? ? ? }, 300)
? ? ? ? }
? ? ? ? let timer2 = null //該定時(shí)器控制讓字符往下掉
? ? ? ? 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);
? ? ? ? }
? ? ? ? // 定義一個(gè)隨機(jī)顏色
? ? ? ? function getColor() {
? ? ? ? ? ? let colortxts = '0123456789ABCDEF'
? ? ? ? ? ? let color = '#'
? ? ? ? ? ? for (let i = 1; i <= 6; i++) {
? ? ? ? ? ? ? ? color += colortxts[Math.floor(Math.random() * 16)]
? ? ? ? ? ? }
? ? ? ? ? ? return color
? ? ? ? }
? ? </script>
