# 弹幕效果

**Repository Path**: wangsobin/SlideCaption_effect

## Basic Information

- **Project Name**: 弹幕效果
- **Description**: 弹幕效果
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2019-05-15
- **Last Updated**: 2025-09-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 知识点汇总

1. 背景色渐变是个好方法，应该多用，设计一个美观的背景色很重要。比直接给背景添加图片要执行的快，如果有多个页面，且每个页面都有背景图片，将其改为背景渐变色能够提升运行速度；

   ```javascript
   background: -webkit-gradient(linear, 0% 0%, 0% 100%,from(#ADD8E6), to(#f6f6f8));
   ```

2. 强制不换行；

`white-space: nowrap;`

3. 千万不要用设置边距或者定位等方法居中外部元素，如主div等，会导致更换浏览器百分比显示或者不同大小浏览器显示时候出现错误；

4. 之所以如下调用函数是因为要么写一个函数，将这个函数包进去调用，要么就不要加后面的括号，就会自动执行；

   `oBtn.onclick = sendMessage;`

5. 按钮绑定函数；

   ```javascript
   document.onkeydown = function(evt){
    var event = evt || window.event;//兼容IE
    if(event.keyCode == 13){
        //监听回车事件
        sendMessage();
    }
   };
   ```

6. 区分`innerHTML`和`innerText`的区别；

7. 随机数创建以及随机为元素添加随机属性；

   ```javascript
   var oFontSize  = parseInt(Math.random()*16+16);
   oDan1.style.fontSize = oFontSize + "px";
   ```

8. 下面的执行语句应添加到`setInterval`内部因为他的`marginLeft`的值是在该函数内部实现的，如果两个没有放到一起，会导致，先将`span`插入到`mainScreen`中，然后执行`setInterval`时才将边距设置到右边。也就是会使得点击按钮后，你的视频框内先会闪出提交的内容，然后立马从右边再移动到左边；`oScreen.appendChild(oDan1);`

9. 删除节点而不是`display：none；`而是

   `oDan1.parentNode.removeChild(oDan1);`

10. 在元素移出屏幕后，应**先清除定时器，然后再移除元素**，要不然多次点击弹幕会导致报错，报错就是因为定时器没有清除掉重复执行却没有可以删除的元素；