javascript实现弹幕墙效果

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

步骤如下：

1、编写HTML代码：

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

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

      .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;
      }

CSS代码完成后效果如下：

完成后的效果如下：

3、编写Javascript代码，添加按钮点击事件

最终效果如下：

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

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