弹幕小demo

最新推荐文章于 2020-01-20 10:30:46 发布

u011031396

最新推荐文章于 2020-01-20 10:30:46 发布

阅读量325

点赞数

分类专栏： Javascript 前端文章标签：弹幕

本文链接：https://blog.csdn.net/u011031396/article/details/45095367

版权

Javascript 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

前端

2 篇文章 0 订阅

订阅专栏

直接贴代码了，接下来再研究一下如何和服务器结合通过socket来实时弹幕。

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  <style>
  *,body,div{
    padding: 0;
    margin: 0;
  }
  div{
   width: 100%;
  }
  #show{
   position: relative;
   background: slategrey;
   overflow: hidden;
  }
  #comment{
   position: absolute;
   bottom: 0px;
   left:0px;
   height: 40px;
   padding: 20px 0;
   background: black;
  }
  #comment div{
   margin: 0 auto;
   width: 80%;
  }
  #write{
   width: 82%;
   height: 35px;
   border: 1px solid black;
   outline: none;
   padding: 2px 4px;
   background: white;
   border-radius: 5px 0 0 5px;
   font-size: 20px;
   font-family: "微软雅黑";
  }
  #publish{
   width: 14%;
   height: 42px;
   background: #088;
   font-family: "微软雅黑";
   border-radius:0 5px 5px 0;
   color:white;
   border:1px solid black;
   margin-left: -10px;
   font-size: 20px;
   border-left: none;
   outline: none;
  }
  #publish:hover{
    background: #08e;
  }
  .move-class{
    position: absolute;
    right: 0;
    height: 22px;
    font-size: 20px;
    display: inline-block;
    font-family: "微软雅黑";
    font-weight: bold;
  }
    </style>
</head>

<body>
  <div id="show"></div>
  <div id="comment">
    <div>
          <input type="text" autofocus="true" id="write"/>
          <button id="publish">发表评论</button>
    </div>
  </div>
</body>
<script>
  window.onload =  function(){
    setShowHeight();
  }
  window.onresize = function(){
    setShowHeight();
  }
  //调整高度
  function setShowHeight(){
    var show = document.getElementById("show"),
        comment = document.getElementById("comment");
    show.style.height = document.documentElement.clientHeight - comment.offsetHeight + "px";
  }
  //
  tanmu();
  function tanmu(){
    var write = document.getElementById("write"),
        publish = document.getElementById("publish");
    write.addEventListener("keypress",function(e){
        var evt = e||event;
        if(evt.keyCode == 13){
          writeTanMu(write.value);
          write.value = "";
          write.focus();
        }
    },false);
    publish.addEventListener("click",function(){
        writeTanMu(write.value);
        write.value = "";
        write.focus();
    },false);
    function writeTanMu(content){
        var div = document.createElement("div"),
            width = content.length * 20,
            clientWidth = document.documentElement.clientWidth,
            clientHeight = document.documentElement.clientHeight;
        if(document.all){
           div.innerText = content;
        }else div.innerHTML = content;
        div.setAttribute("class","move-class");
        div.style.width = width + "px";
        div.style.left = clientWidth + "px";
        div.style.top = getRandom(20,clientHeight-100) + "px";
        div.style.color = getRandomColor();
        show.appendChild(div);
        var clearI = setInterval(function(){
          var left = parseFloat(div.style.left);
          if(left > -width){
            div.style.left = left - 1 + "px";
          }else{
            clearInterval(clearI);
            show.removeChild(div);
          }
        },15);
    }
    function getRandom(min,max){
        var number = Math.random();
        return min + Math.ceil(max*number);
    }
    function getRandomColor(){
        var rand = Math.floor(Math.random()*0xFFFFFF).toString(16);
        if(rand.length == 6){
          return "#" + rand;
        }else return arguments.callee();
    }
  }
  
</script>
</html>