<!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>
</head>
<body>
<input type="text" />
<button>发送</button>
</body>
<script>
let ipt = document.querySelector("input")
let btn = document.querySelector("button")
// 按下enter键发送弹幕
ipt.onkeydown = function(e){
if(e.keyCode == 13){
let val = ipt.value;
let span = document.createElement("span")
span.innerHTML = val
ipt.value = "";
// 绝对定位
span.style.position = "absolute"
// 随机出现的位置
span.style.left = document.documentElement.clientWidth + "px"
// 随机出现的高度, 不能超出屏幕的高度, 也就是不能超出body的高度, 也就是不能超出documentElement的高度
span.style.top = Math.floor(Math.random()*document.documentElement.clientHeight) + "px"
// 插入到body中, 但是在第一个元素之前, 也就是在body中的第一个元素之前
document.body.prepend(span)
let timer = setInterval(()=>{
span.style.left = parseInt(span.style.left) - 10 + "px"
if(parseInt(span.style.left)<-1*span.offsetWidth){
span.remove()
clearInterval(timer)
}
},50)
}
}
// btn.onclick = function(){
// let val = ipt.value;
// let span = document.createElement("span")
// span.innerHTML = val
// ipt.value = "";
// span.style.position = "absolute"
// span.style.left = document.documentElement.clientWidth + "px"
// span.style.top = Math.floor(Math.random()*document.documentElement.clientHeight) + "px"
// document.body.prepend(span)
// let timer = setInterval(()=>{
// span.style.left = parseInt(span.style.left) - 10 + "px"
// if(parseInt(span.style.left)<-1*span.offsetWidth){
// span.remove()
// clearInterval(timer)
// }
// },50)
// }
</script>
</html>
JavaScript实现弹幕功能
最新推荐文章于 2024-07-31 16:33:32 发布