方法一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.newList{
height: 100px;
overflow: hidden;
background-color: #ccc;
position: relative;
}
</style>
</head>
<body>
<input type="text" id="words" />
<input type="button" value="走你" id="btn" />
</body>
<script>
var btn=document.getElementById("btn");
btn.onclick=function(){
var timer=null;
var words=document.getElementById("words").value;
// 创建span标签
var span=document.createElement("span");
// 将输入的内容塞到HTML中
span.innerHTML=words;
// 给span标签定位
span.style.position="absolute";
span.style.left="600px";
// 利用随机数，来决定每一个标签的高度的不同
// Math.floor是让小数取整，例如1.99为1
// document.documentElement.clientHeight代表HTML标签的高度
span.style.top=Math.floor(document.documentElement.clientHeight*Math.random())+"px";
// 将span挂载到树上
document.body.appendChild(span);
timer=setInterval(function(){
// 让span标签一次走4px的像素
span.style.left=parseInt(span.style.left)-4+"px"
// 表示当span的左边的距离小于span内容的长度时销毁，即当标签完全消失在页面中时销毁
if(parseInt(span.style.left)<-1*span.offsetWidth){
clearInterval(timer);
document.body.removeChild(span)
}
},50)
// 这个50代表每50毫秒，走一次
}
</script>
</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>
.newList{
height: 100px;
overflow: hidden;
background-color: #ccc;
position: relative;
}
html{
height: 100%;
}
body{
height: 100%;
}
</style>
</head>
<body>
<input type="text" id="words" />
<input type="button" value="走你" id="btn" />
</body>
<script>
function Bullet(words){
this.span=document.createElement("span");
//这个利用随机数来实现字体在屏幕中字体大小的不同
if(Math.random()<0.2){
this.span.style.fontSize="50px";
}
//给span标签定位
this.span.style.position="absolute";
this.span.style.left=document.body.offsetWidth+"px";
//让弹幕从不同的高度出来
this.span.style.top=Math.floor(document.body.offsetHeight*Math.random())+"px";
this.span.innerHTML=words;
this.timer=null;
this.init();
this.move();
}
Bullet.prototype.init=function(){
document.body.appendChild(this.span)
}
Bullet.prototype.move=function(){
let that=this;
//定义span在每50毫秒走4像素的距离
//当弹幕完全消失在屏幕时被销毁和销毁定时器
this.timer=setInterval(function(){
that.span.style.left=parseInt(that.span.style.left)-4+"px";
if(parseInt(that.span.style.left)<-1*that.span.offsetWidth){
document.body.removeChild(that.span)
clearInterval(that.timer)
}
},50)
}
var btn=document.getElementById("btn");
btn.onclick=function(){
let words=document.getElementById("words").value;
let obj=new Bullet(words);
}
</script>
</html>
DOM之弹幕效果