弹幕网站开发(只有前端)

  • index.html
  • danmu.css
  • danmu.js


之前学习了一段时间 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代码本来放在前面,发现有问题,因为标签都没有,没办法执行代码。

代码:



<html lang="en">

<head>
  <meta charset="utf-8">
  <title>弹幕啊title>
  
  <link rel="stylesheet" href="./bootstrap/bootstrap.min.css">
  
  <script src="./bootstrap/jquery.min.js">script>
  
  <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>2333div>
            <div>6666666666div>
            <div>2333div>
            <div>2333div>
            <div>2333div>
            <div>2333div>
            <div>2333div>
            <div>卢本伟NB!div>
            <div>2333div>
            <div>2333div>
            <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 = " 
" + txt + "
"
; $(".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); })(''); }

你可能感兴趣的:(※,前端)