弹幕网站很复杂？教你10分钟在华为云鲲鹏弹性云服务器上部署好！

<style type="text/css">
 * {
 margin: 0;
 padding: 0;
 }
 
 .screen {
 width: 100%;
 height: 100%;
 position: absolute;
 top: 0;
 left: 0;
 }
 
 .send {
 width: 100%;
 height: 76px;
 background: #333;
 position: absolute;
 bottom: 0;
 left: 0;
 text-align: center;
 line-height: 76px;
 }
 
 
 .send .s_txt {
 width: 600px;
 height: 36px;
 border: 0;
 border-radius: 3px 0 0 3px;
 font-size: 16px;
 line-height: 36px;
 }
 
 .send .s_sub {
 width: 100px;
 height: 37px;
 background: #65c33d;
 border: 0;
 font-size: 14px;
 color: #fff;
 border-radius: 0 3px 3px 0;
 cursor: pointer;
 }
 
 .send .s_sub:hover {
 background: #3eaf0e;
 }
 
 .screen div {
 position: absolute;
 top: 76px;
 left: 0;
 font-size: 22px;
 color: red;
 }
 
 .magictime {
 animation-duration: 1s;
 animation-name: magictime;
 }
 
 @keyframes magictime {
 0% {
 opacity: 0;
 transform-origin: 100% 0;
 transform: scale(0, 0) rotate(360deg) translateY(100%);
 }
 
 30% {
 transform-origin: 100% 0;
 transform: scale(0, 0) rotate(360deg) translateY(100%);
 }
 
 100% {
 opacity: 1;
 transform-origin: 0 0;
 transform: scale(1, 1) rotate(0deg) translateY(0);
 }
 }
 </style> 

<div class="screen">
 <div>这是一条弹幕！</div>
 <div>这是另一条弹幕！</div>
 <div>老黄最帅~~~</div>
 <div>没错，这又是一条弹幕！</div>
 <div>这里都是弹幕</div>
 <div>前方高能！！！</div>
</div> 

<div class="send">
 <input type="text" class="s_txt" />
 <input type="button" id="send_sub" value="发表评论" class="s_sub" />
</div> 

<script>
 var oShowList = document.querySelectorAll(‘.screen div‘)
 var oShow = document.querySelector(‘.screen‘)
 var oSend = document.querySelector(‘.send‘)
 var oText = document.querySelector(‘.s_txt‘)
 var oBtn = document.querySelector(‘#send_sub‘)
 oBtn.onclick = function () {
 var oDiv = document.createElement(‘div‘)
 oDiv.innerHTML = oText.value;
 oDiv.className = ‘magictime‘;
 oShow.appendChild(oDiv)
 init(oDiv)
 oText.value = ‘‘
 }
 for (var i = 0; i < oShowList.length; i++) {
 init(oShowList);
 }
 function init(obj) {
 var screenHeight = document.documentElement.clientHeight;//获取浏览器高度
 var screenWidth = document.documentElement.clientWidth;//获取浏览器宽度
 var sendHeight = oSend.clientHeight;
 var maxTop = screenHeight - sendHeight - obj.clientHeight;
 var maxLeft = screenWidth - obj.clientWidth;
 obj.style.top = Math.random() * maxTop + ‘px‘
 obj.style.left = maxLeft + ‘px‘
 obj.style.color = randomColor()
 move(obj, maxLeft)
 }
 function randomColor() {
 var color = ‘#‘;
 for (var i = 0; i < 6; i++) {
 color += Math.floor(Math.random() * 16).toString(16)
 }
 return color;
 }
 function move(obj, maxLeft) {
 maxLeft -= 3;
 if (maxLeft > -obj.clientWidth) {
 obj.style.left = maxLeft + ‘px‘
 requestAnimationFrame(function () {
 move(obj, maxLeft)
 });
 } else {
 oShow.removeChild(obj)
 }
 }
 </script> 

 更新一下系统
apt-get update
 
# 安装：
apt-get install nginx
 
# 安装上传工具
apt install lrzsz 

# 上传弹幕的文件
cd /var/www/htm/
rz  # 选取弹幕网页文件  index.html，可在附件下载
 
# 启动：
nginx -c /etc/nginx/nginx.conf 
 
# 访问
访问自己的公网IP即可，老黄的是 http://124.70.138.209/