<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>弹幕</title>
<style type="text/css">
*{ margin:0; padding:0}
#tm{ margin:0 auto; height:400px; 600px;position:relative; overflow:hidden}
#tm div{ height:20px;line-height:20px; position:absolute; 100%}
#btn{ margin:0 auto; 300px; height:20px;}
</style>
<script type="text/javascript">
function $(id){return document.getElementById(id)};
window.onload=function(){
var timer=null;
var newarr=[];
$("submit").onclick=function(){
clearInterval(timer);
var text=$("text").value;
var newnode=document.createElement("div");
newnode.innerHTML=text;
newnode.style.top=Math.random()*($("tm").offsetWidth-20)+"px";
newnode.style.left="600px";
console.log("'"+randomColor()+"'")
newnode.style.color="#"+randomColor();
$("tm").appendChild(newnode);
timer=setInterval(move,20);
}
function move(){
var arr=$("tm").getElementsByTagName("div");
for(var i=0;i<arr.length;i++){
newarr.push(arr[i].offsetLeft);
arr[i].style.left=newarr[i]+"px";
newarr[i]--
if(newarr[i]<0){
newarr[i]=600;
}
}
//console.log(j);
}
function randomColor() {
var color = Math.ceil(Math.random( ) * 16777215).toString(16);
while(color.length<6){
color="0"+color;
}
return color;
}
}
</script>
</head>
<body>
<div id="tm"></div>
<div id="btn">
<input type="text" value="" id="text"/>
<input type="button" id="submit" value="发表"/>
</div>
</body>
</html>