js实现简单弹幕并滚动

2017-07-05  本文已影响0人  东东丶酱

1.首先创建弹幕框架

<input type="textarea" id="text" max=300 />    
<button type="button"  onclick="send()">发送</button> //

实现弹幕输入和显示

<div  id="div1" style="width=80%;height:450px;background-color:white;margin-top:0px;overflow:auto">
<p id="danmu_list" "></p>
</div>//弹幕列表框架

2.js实现输出

function send(){
  var text = document.getElementById('text').value;
  var color = document.getElementById('color').value;
  var position = document.getElementById('position').value;
  var time = $('#danmu').data("nowtime")+5;
  var size =document.getElementById('text_size').value;
  var text_obj='{ "text":"'+text+'","color":"'+color+'","size":"'+size+'","position":"'+position+'","time":'+time+'}';
  $.post("stone.php",{danmu:text_obj});
  var text_obj='{ "text":"'+text+'","color":"'+color+'","size":"'+size+'","position":"'+position+'","time":'+time+',"isnew":""}';
  var new_obj=eval('('+text_obj+')');
  $(#danmu').danmu("add_danmu",new_obj);
  document.getElementById('text').value='';
//输出部分截取
var oPNode = document.getElementById('danmu_list');//获取p节点的对象
var node = document.createElement('p');//创建一个文本节点
node.innerHTML = text ;//文本内容
oPNode.appendChild(node);//将创建的文本内容插入到p节点中,追加方式
}
function sc()
{
var e=document.getElementById("div1")
e.scrollTop=e.scrollHeight;
}

var s=setInterval("sc()",200);//使文字底部显示
上一篇 下一篇

猜你喜欢

热点阅读