<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 清楚元素的外边距和内边距 */
* {
padding: 0;
margin: 0;
}
/* 浏览器可视窗口高度 弹性布局居中 */
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #ecf0f1;
}
.box {
position: absolute;
right: 0;
height: 100%;
}
</style>
<!-- 引入随机数 -->
<script src="./random.js"></script>
</head>
<body>
<div>
<!--多行文本域 -->
<textarea name="text" id="" cols="30" rows="5" placeholder="许愿清泉流响" style="resize: none;"></textarea>
<input type="button" value="许愿">
</div>
<div class="box"></div>
<!-- JS -->
<script>
const bth = document.querySelector('[type="button" ]'); // 获取许愿按钮
const text = document.querySelector('[name="text"]'); // 获取文本按钮
const box = document.querySelector('.box'); //获取弹窗的父元素
let width = innerWidth - 150;
let height = innerHeight - 100;
bth.onclick = function () { // 点击事件
if (text.value) { //判断用户是否输入内容
let p = document.createElement('p'); // 创建一个P元素
p.innerText = text.value; // 获取用户输入内容，装进创建P 元素
text.value = ''; // 用户输入内容，清空一次。
box.appendChild(p); // 创建的元素添加入 弹幕元素里面
let x = 0; // 申请变量X坐标变量
p.style.cssText = `
text-align: center;
background-color: rgb(${random(255)}, ${random(255)}, ${random(255)}); // 随机背景色
color:rgb(${random(255)}, ${random(255)}, ${random(255)}); // 随机字体颜色
width:150px;
height:100px;
position: absolute;
top:${random(height)}PX;
`;
let time = setInterval(() => { // 计数器
x++;
p.style.right = x + 'px'; // 增加移动X坐标
if (x == width) { // X到达右边临界值
box.removeChild(p); //删除元素
clearInterval(time); // 结束计数器 防止叠加
}
}, 10)
}
}
</script>
</body>
</html>