html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#bigbox{
border: 1px solid black;
background-color: black;
height: 500px;
}
#sb{
margin-top: 470px;
}
#wz{margin-left: 600px;
color: rgb(25, 26, 26);
background-color: white;
}
</style>
</head>
<body>
<div id="bigbox">
<div id="sb">
<input type="text" id="wz" placeholder="发送弹幕捏">
<button id="btn">发送</button>
</div>
</div>
<script src="./滚动弹幕.js"></script>
</body>
</html>
js
var bigbox = document.querySelector("#bigbox")
var wz = document.querySelector("#wz")
var sb = document.querySelector("#sb")
var btn = document.querySelector("#btn")
btn.onclick = function () {
var dm = document.createElement("span")
dm.style.position = "absolute"
dm.style.top = Math.random() * 500 + "px"
dm.innerText = wz.value
dm.style.fontSize = Math.random()*20+10+"px"
dm.style.color = randomColor()
bigbox.appendChild(dm)
var s = 0.9
var timer = setInterval(
function () {
dm.style.left = s * document.body.clientWidth + 'px'
s -= 0.003
if (s < 0) {
clearInterval(timer)
bigbox.removeChild(dm)
}
}, 10)
function randomColor() {
return '#' + ('00000' + (Math.random() * 0x1000000 << 0).toString(16)).slice(-6);
}
}
1892
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
