版权声明：欢迎转载，请标注来源和链接 https://blog.csdn.net/Joovo/article/details/81044313
之前学习了一段时间 HTML,css，近期简单看了一下 bootstrap,jQuery，JavaScript，于是做了弹幕网站练一下熟悉感觉。
原先的想法是有后端，看了一下LeanCloud感觉可以用，不过先跳票了，先把前端打完再说吧。
第一次开发 Web，主要以借鉴网上的代码为主，看了一下各大弹幕网站的界面风格。这个样子还是比较粗糙的，再慢慢该代码添加功能。
项目地址：https://github.com/Joovo/Joovo.github.io
网站地址：https://joovo.xyz
最终结果如图
index.html
说是用了bootstrap，只不过是用了一下12栅格和btn的css。
细节部分：
- 本来引入cdn,本地速度很快，挂到服务器上速度太慢了。
- js 和 jQuery代码本来放在前面，发现有问题，因为标签都没有，没办法执行代码。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>弹幕啊</title>
<!-- 本来引入cdn，本地速度还可以，挂到服务器上速度就太慢了-->
<link rel="stylesheet" href="./bootstrap/bootstrap.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="./bootstrap/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="./bootstrap/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="danmu.css">
</head>
<body>
<div class="container">
<div class="panel">
<div class="dm">
<div class="dm_screen" id="dm-screen">
<div class="dm_mask"></div>
<div class="dm_show" id="dm-show">
<!-- <div>test message</div> -->
<div>2333</div>
<div>6666666666</div>
<div>2333</div>
<div>2333</div>
<div>2333</div>
<div>2333</div>
<div>2333</div>
<div>卢本伟NB!</div>
<div>2333</div>
<div>2333</div>
<div>卢本伟NB!</div>
</div>
</div>
<br>
<div class="send">
<div class="s_fiter">
<div class="s_con">
<div class="row">
<div class="col-md-8 col-xs-8">
<input id="dm-txt" placeholder="来一发弹幕吧～" type="text" class="s_txt" />
</div>
<div class="col-md-2 col-xs-2">
<button type="button" id="btn-send" class="btn btn-block btn-info" style="margin-right:10px;"> >发 射</button>
</div>
<div class="col-md-2 col-xs-2">
<button id="btn-erase" class="btn btn-block s_sub" style="margin-right:10px;"> >清 屏</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="danmu.js"></script>
</body>
</html>danmu.css
写的有一点乱，有的地方弄不清直接在后面加 !important 了。
.s_txt {
width: 100%;
height: 34px;
border-radius: 3px;
border: 1px solid rgb(204, 204, 204);
padding-left: 10px;
}
.s_sub {
border: 1px solid rgb(230, 80, 30) !important;
color: rgb(230, 80, 0);
border-radius: 3px;
text-align: center;
padding: 0;
height: 35px;
line-height: 35px;
font-size: 14px;
width: 100%;
background-color: white;
}
.s_del {
border: 1px solid rgb(176, 168, 165);
color: rgb(176, 168, 165);
border-radius: 3px;
text-align: center;
padding: 0;
height: 35px;
line-height: 35px;
font-size: 14px;
width: 159px;
background-color: white;
}
.dm {
margin: 20px;
text-align: center;
}
.dm_screen {
border: 1px solid rgb(229, 229, 229);
}
.dm .dm_screen .dm_mask {
width: 100%;
height: 380px;
}
.dm .dm_screen .dm_show div {
font-size: 22px;
line-height: 36px;
font-weight: 500;
color: #fff;
position: absolute;
left: 0;
top: 0;
}
.panel {
margin: 50px;
text-align: center;
}
body {
background-image: url('ss.jpg') !important;
background-size: cover; //只支持IE9+
-webkit-background-size: cover; //webkit核心
-moz-background-size: cover; //FF核心
-o-background-size: cover; //Opera核心
}
danmu.js
按钮的监听，随机颜色生成，动画等。
用到了 jQuery 的添加标签，删除标签功能
用 jQuery 的 animated() 方法写一个动画，从现在的 css 变形到设定的目标 css ，有点像以前玩过的一个 flash 。有很多参数可以选择。
直接去看官方文档。
细节部分：
- 弹幕到左侧后加了一个回调函数，把这个标签（这条弹幕）直接删掉了
- 点击发送按钮后文本框应该清空，直接设
$("#xxx").val('')就可以达到清空的效果了。 - jQuery 里 offsetTop，offsetLeft等的用法，得到绝对的像素值。
$(function() {
$("#btn-send").click(function() {
var txt = $("#dm-txt").val();
var div = " <div > " + txt + " </div>";
$(".dm_show").append(div);
$("#dm-txt").val("");
init_screen();
});
$("#btn-erase").click(function(){
$("#dm-show > div:nth-child(n)").remove();
});
init_screen();
});
function init_screen() {
var obj = document.getElementById("dm-screen");
var _top = obj.offsetTop;
$(".dm_show").find("div").show().each(function() {
var _left = obj.offsetLeft + obj.offsetWidth - $(this).width();
// $(this).css("color")=#FFF;
$(this).css({
left: _left,
top: _top,
color: getRandomColor()
});
_top = _top + $(this).height();
if (_top > obj.offsetHeight + obj.offsetTop - $(this).width()) {
_top = obj.offsetTop;
}
var time = 5000;
if ($(this).index() % 2 == 0) time = 7000;
$(this).animate({
left: obj.offsetLeft + 'px'
}, time, "linear", function() {
$(this).remove();
});
});
}
var getRandomColor = function() {
return '#' +
(function(color) {
return (color += '0123456789abcdef' [Math.floor(Math.random() * 16)]) &&
(color.length == 6) ? color : arguments.callee(color);
})('');
}