今天闲着无聊，写了个弹幕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>";
