当前位置:首页 >> 网络编程

javascript实现弹幕墙效果

刚开始入门前端,想仿照FreeCodeCamp中的一个项目制作简单的弹幕墙。

步骤如下:

1、编写HTML代码:

创建一个弹幕显示墙,以及两个按钮,分别为“发送”和“清屏”,并在文本框中设置placeholder为“说点什么吧?”以提示用户在此输入弹幕信息。

<body>
    <div class="con">      
      <div id="screen">
        <div class="dm_show">
          <!-- <div>text message</div> -->
        </div>
      </div>
      <div class="edit">
        <p>
          <input placeholder="说点什么吧?" class="content" type="text" />
        </p>
        <p>
          <input type="button" class="send" value="发送" />
          <input type="button" class="clear" value="清屏" />
        </p>
      </div>   
    </div>
  </body>

2、设置各标签的CSS样式:

<style>
      .con {
        background-color: floralwhite;
        padding: 40px 80px 80px;
      }
      #screen {
        background-color: #fff;
        width: 100%;
        height: 380px;
        border: 1px solid rgb(229, 229, 229);
        font-size: 14px;
      }

      .content {
        border: 1px solid rgb(204, 204, 204);
        border-radius: 3px;
        width: 320px;
        height: 35px;
        font-size: 14px;
        margin-top: 30px;

      }

      .send {
        border: 1px solid rgb(230, 80, 30);
        color: rgb(230, 80, 0);
        border-radius: 3px;
        text-align: center;
        padding: 0;
        height: 35px;
        line-height: 35px;
        font-size: 14px;
        width: 159px;
        background-color: white;
      }

      .clear {
        border: 1px solid;
        color: darkgray;
        border-radius: 3px;
        text-align: center;
        padding: 0;
        height: 35px;
        line-height: 35px;
        font-size: 14px;
        width: 159px;
        background-color: white;
      }

      .edit {
        margin: 20px;
        text-align: center;
      }

      .text {
        position: absolute;
      }
      *{
        margin: 0;
        padding: 0;
      }

      .dm_show{
        margin: 30px;
      }
</style>

CSS代码完成后效果如下:

完成后的效果如下:

javascript实现弹幕墙效果

3、编写JavaScript代码,添加按钮点击事件

<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.min.js">

最终效果如下:

javascript实现弹幕墙效果

至此,一个简易的弹幕墙就完成了,因本人经验有限,所以弹幕墙还比较粗糙,还请各位批评指正。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。