建议使用以下浏览器,以获得最佳体验。 IE 9.0+以上版本 Chrome 31+ 谷歌浏览器 Firefox 30+ 火狐浏览器
请选择 进入手机版 | 继续访问电脑版
设置昵称

在此一键设置昵称,即可参与社区互动!

确定
我再想想
选择版块
标签
您还可以添加5个标签
  • 没有搜索到和“关键字”相关的标签
  • 云产品
  • 解决方案
  • 技术领域
  • 通用技术
  • 平台功能
取消

神奇的老黄

发帖: 4粉丝: 2

级别 : 合作伙伴

发消息 + 关注

发表于2020年06月19日 17:23:14 11713 123
直达本楼层的链接
楼主
显示全部楼层
[干货分享] 10分钟快速在华为云鲲鹏弹性云服务器上部署一个自己的弹幕网站!

image.png

看视频,还可参与回帖互动领好礼活动!快来参与吧:

https://bbs.huaweicloud.com/forum/thread-59291-1-1.html

从零代码开始,10分钟快速开发一个可以发送弹幕的网站,并将其部署在华为云服务器上;学完本期教程,将可以知道如何使用Nginx、如何将自己的网站部署到云服务器上,还可以免费学习WEB前端全栈教程,各位小伙伴们一起来学习吧~,传送门--->WEB前端全栈成长计划


开发思路

    首先是让弹幕的随机高度出现,这个计算方法是:最大高度=屏幕的高度-发送div的高度-弹幕本身的高度,范围就是 0-最大高度了,弹幕总是从右往左移动,所以出现最右侧的位置计算方法是:最右侧位置=屏幕的宽度-弹幕本身的宽度;接下来就是设置随机颜色,颜色按照‘#aabbcc’这种格式,利用Math.random()随机数生成;最后是弹幕的发送,首先是获取输入框中的值,然后新创建一个div,并设置随机颜色、位置等属性,调用init() 函数。

    总结如下步骤:

    1、获取弹幕对象:随机高度、初始化颜色

    2、水平期间设置范围:浏览器宽度-弹幕对象的高度

    3、移动功能函数:定时器 setInterval

    4、实现用户发表弹幕

用到的知识点

    1、首先页面搭建,就是这些东西是如何摆放的——html+css布局

    2、弹幕字体的位置和样色设置——css样式

    3、可以输入文字然后点击可以发送弹幕——按钮的点击事件

    4、字体可以旋转——css动画

    5、弹幕字体可以从右往左滑动——js控制字体对象的style属性

代码块

style代码

  <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代码

<div class="screen">
    <div>这是一条弹幕!</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>

javascript逻辑代码

<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>

安装部署

首先领取一个月的免费服务器,如果通过我这里注册,还可以领取200元的代金券,可多购买两个月的服务器  领取地址 ,然后系统选择Ubuntu 18.04 server 64bit,设置密码,领取后按照以下步骤初始化:

首先修改一下安全组,点击控制台-弹性云服务器,点击实例名字

2020-06-28_18-02-17.png

点击安全组-更改安全组

2020-06-28_18-02-46.png

添加以下端口配置

2020-06-28_18-03-01.png



在网页上远程登录

2020-06-28_17-58-55.png



也可以通过xshell登录,用户名为root,密码为之前设置的,如果忘了可以选择重置系统

2020-06-28_17-59-44.png

安装nginx

# 更新一下系统
apt-get update

# 安装:
apt-get install nginx

# 安装上传工具
apt install lrzsz

配置nginx

# 上传弹幕的文件
cd /var/www/htm/
rz  # 选取弹幕网页文件  index.html,可在附件下载

# 启动:
nginx -c /etc/nginx/nginx.conf 

# 访问
访问自己的公网IP即可,老黄的是 http://124.70.138.209/


好啦,以上就是开发一个可以发送弹幕网站的完整过程了,如果有什么疑问,欢迎在下面留言告诉老黄~

index.zip 1.44 KB,下载次数:11

举报
分享

分享文章到朋友圈

分享文章到微博

五湖四海@银河护卫队

发帖: 120粉丝: 44

级别 : 版主

发消息 + 关注

发表于2020年06月19日 21:34:54
直达本楼层的链接
沙发
显示全部楼层

厉害了

评论
yd_287535553 2020-7-4 14:08 评论

好厉害的人啊,太强大了,非常喜欢

... 查看全部
点赞 评论 引用 举报

神濑泽奈

发帖: 0粉丝: 0

级别 : 新手上路

发消息 + 关注

发表于2020年06月24日 22:13:45
直达本楼层的链接
板凳
显示全部楼层

太太强大了

点赞1 评论 引用 举报

甜桃罐头

发帖: 0粉丝: 0

级别 : 新手上路

发消息 + 关注

发表于2020年06月24日 22:34:54
直达本楼层的链接
地板
显示全部楼层

值得拥有

点赞 评论 引用 举报

火灵

发帖: 141粉丝: 9

级别 : 外部版主

发消息 + 关注

发表于2020年06月24日 23:17:32
直达本楼层的链接
5#
显示全部楼层

这也太强了吧!!!

点赞 评论 引用 举报

阿奇@汪汪队

发帖: 61粉丝: 50

级别 : 版主

发消息 + 关注

发表于2020年06月28日 19:09:30
直达本楼层的链接
6#
显示全部楼层

很好 赞赞

点赞 评论 引用 举报

嗯我都没有

发帖: 0粉丝: 0

级别 : 新手上路

发消息 + 关注

发表于2020年07月02日 22:32:11
直达本楼层的链接
7#
显示全部楼层

很不错

点赞 评论 引用 举报

电话回到家

发帖: 0粉丝: 0

级别 : 新手上路

发消息 + 关注

发表于2020年07月02日 22:32:20
直达本楼层的链接
8#
显示全部楼层

厉害厉害厉害

点赞 评论 引用 举报

龙哥是我

发帖: 0粉丝: 0

级别 : 新手上路

发消息 + 关注

发表于2020年07月04日 12:48:32
直达本楼层的链接
9#
显示全部楼层

很好

点赞 评论 引用 举报

龙哥是我

发帖: 0粉丝: 0

级别 : 新手上路

发消息 + 关注

发表于2020年07月04日 12:49:26
直达本楼层的链接
10#
显示全部楼层

很好

点赞 评论 引用 举报

龙哥是我

发帖: 0粉丝: 0

级别 : 新手上路

发消息 + 关注

发表于2020年07月04日 12:50:18
直达本楼层的链接
11#
显示全部楼层

很厉害

点赞 评论 引用 举报

游客

富文本
Markdown
您需要登录后才可以回帖 登录 | 立即注册