基于jQuery实现弹幕APP

今天闲着无聊，写了个弹幕APP，主要实现以下几个功能：

1.点击“弹幕发射”或回车可以输出弹幕到弹幕墙上。
2.弹幕的运行轨迹是从弹幕墙的最右边到最左边，Y轴的数值在弹幕墙的高度内随机，颜色HEX随机，速度随机。
3.右侧的表格可以储存弹幕内容以及弹幕的发射时间，越靠近现在的越靠前。
4.点击“清除弹幕”可以把弹幕墙内的所有弹幕清除掉，但不会影响到表格中的数据。
5.如果弹幕长度过长（我设置的是6个字符），则超过规定长度之外的弹幕内容都会由“...”代替，并放入表格中。但弹幕墙中的内容依然是完整的。

HTML代码：

<div class="frame">
 <div class="row">
 <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8 danmu-box-frame">
  <div class="danmu-box">
  </div>
 </div>
 <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 danmu-table-frame">
  <table class="table .table-condensed danmu-table">
  <thead>
   <tr>
   <th>
    弹幕内容
   </th>
   <th>
    弹幕时间
   </th>
   </tr>
  </thead>
  <tbody>
  </tbody>
  </table>
 </div>
 </div>
 <div class="danmu-form">
 <form class="form-inline">
  <input type="text" class="form-control" placeholder="开始吐槽！">
  <button type="button" class="btn btn-primary shoot">
  发射弹幕！
  </button>
  <button type="button" class="btn btn-danger clear">
  清空弹幕
  </button>
 </form>
 </div>
</div>
<hr>
<footer>
 Designed By
 <a href="http://blog.csdn.net/alenhhy" target="_blank">
 Alen Hu
 </a>
</footer>

*使用了Bootstrap3框架。

JQuery部分：

$(document).ready(function() {
 $(".shoot").on("click", startDanmu);
 $("form").keypress(function(event) {
 if (event.keyCode === 13) {
  event.preventDefault();
  startDanmu();
 }
 });
 $(".clear").on("click", clearDanmu);
}); 

//get random number in certain range
function RandomNum(Min, Max) {
 var Range = Max - Min;
 var Rand = Math.random();
 var num = Min + Math.round(Rand * Range);
 return num;
} 

//time number add 0 before if <10
function plusZero(x) {
 if (x < 10) {
 x = "0" + x;
 } else {
 x = x;
 }
 return x;
} 

//start danmu
function startDanmu() { 

 var message = $("input");
 var messageVal = message.val();
 var danmuMessage = "<span class='danmu-message'>" + messageVal + "</span>"; 

 //get random color HEX
 //u can also save the colors u want by array
 var color = RandomNum(100000, 999999); 

 //get random danmu speed
 var speed = RandomNum(10000, 20000); 

 //get random position Y
 //danmu box height is 450, we set the danmu position Y max 400 in case it blocks the subtitle
 var positionY = RandomNum(50, 400); 

 if (messageVal.length > 0) {
 //insert danmu message into danmu box
 $(".danmu-box").prepend(danmuMessage); 

 //have to use first() cuz we prepend the message, u can try what's gonna happen if no first()
 //set it's style
 $(".danmu-message").first().css({
  "right": "0",
  "top": positionY,
  "color": "#" + color
 }); 

 //set it's animation
 //from right 0 to left 0
 //hide it after move
 $(".danmu-message").first().animate({
  left: '0px',
 },
 speed,
 function() {
  $(this).fadeOut();
 });
 //get danmu time
 var time = new Date();
 var month = time.getMonth() + 1;
 var day = time.getDay();
 var hour = time.getHours();
 var minute = time.getMinutes();
 var danmuTime = plusZero(month) + "-" + plusZero(day) + " " + plusZero(hour) + ":" + plusZero(minute); 

 //insert danmu message to table
 if (messageVal.length > 6) {
  messageVal = messageVal.substring(0, 6) + "...";
 }
 var messageToTable = "<tr><td>" + messageVal + "</td><td>" + danmuTime + "</td></tr>";
 $(".danmu-table > tbody").prepend(messageToTable); 

 } else {} 

 //empty the input
 message.val("");
} 

//clear danmu box
function clearDanmu() {
 $(".danmu-box").html("");
}

DEMO在这儿，欢迎来FORK：Danmu APP。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。