2022 你的红包我来给【红包雨】在掘金给你安排上，文末提供源码！

PK创意闹新春，我正在参加「春节创意投稿大赛」，详情请看：春节创意投稿大赛

前言

最近正准备深入Spring学习一番，突然看到掘金的这个活动，思来想去，Java实在是没什么能拿出来凑这个热闹的，那就用js给大家下个红包雨看看吧。

技术选型

为了能多敲几行代码，也为了大家方便体验，当然要优先选择开发一个chrome插件；
为了方便敲代码，我选择了webpack + vue（vue引入，但暂时没用上）进行构建；
总之就是玩，代码见文末地址。

Coding With Me

先来看看 manifest.json配置文件

由于需要在页面上注入JS，所以需要插入运行时脚本，当页面打开后就直接执行我们的js，所以该插件主要配置应该就是content_scripts部分

{
  "manifest_version": 2,
  "name": "红包雨",
  "version": "1.0.0",
  "description": "无限红包雨！",
  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
  "icons":
  {
    "16": "icons/logo.png",
    "48": "icons/logo.png",
    "128": "icons/logo.png"
  },
  // 设置图标
  "browser_action":
  {
    "default_icon": "icons/logo.png",
    "default_title": "红包雨"
  },
  // 本插件运行时脚本 content scripts
  "content_scripts": [{
    "all_frames": false,
    "run_at": "document_start",
    // 设置插件只在掘金页面才有效
    "matches": [
      "http://juejin.cn/*",
      "https://juejin.cn/*"
    ],
    // css地址
    "css": [
      "content/redPacket.css"
    ],
    // js地址
    "js": [
      "content/index.js"
    ]
  }]
}

红包雨逻辑

创建承载红包的容器

/**
* 创建承载红包的容器
*/
createRedPacketContainer() {
   const div = document.createElement('div')
   // 设置该容器的class
   div.classList.add('red-container')
   const _this = this
   // 需要在onload之后执行，不然body元素拿不到
   window.onload = function () {
       // 将容器设置到body中 
       document.body.appendChild(div)
       // 循环设置红包
       _this.loopSetRedPacket()
   }
}

循环随机在容器中设置红包

 /**
 * 向容器中循环设置红包
 */
loopSetRedPacket() {
    let w = window.innerWidth
    let h = window.innerHeight
    let lookupContainer = true
    let container
    // 查找刚刚设置的红包雨容器
    while (lookupContainer) {
        container = document.querySelector('.red-container')
        if (container) {
            break
        }
    }
    // 红包下标
    let i = 0
    this.timer = setInterval(() => {
       // 创建一个红包
        const img = this.createRedPacket(i++)
        // 设置红包的位置
        img.style.left = (Math.floor(Math.random() * w) )+ 'px'
        img.style.top = 0 + 'px'
        // 向容器中添加红包
        container.appendChild(img)
        // 插入图片后重新获取容器元素
        container = document.querySelector('.red-container')
        // 红包创建后在页面上移动
        this.move(container, h, img)
        // 获取新的内容
    }, 100)
}

创建一个红包

/**
 * 创建红包图片
 * @param index 图片的下标
 * @returns {HTMLImageElement}
 */
createRedPacket(index) {
    const redPacketImg = document.createElement('img')
    // 图片使用图床吧
    redPacketImg.src='./red.png'
    // 设置class
    redPacketImg.classList.add('red-packet', `red-packet${index}`)
    return redPacketImg
}

红包移动

/**
 * 红包移动，超出容器范围删除
 * @param container 红包容器
 * @param h 容器高度
 * @param img 当前被移动的红包
 */
move(container, h, img) {
    let time = setInterval(() => {
        // 超出删除
        if (img.offsetTop > h) {
            container.removeChild(img)
            clearTimeout(time)
        }
        img.style.top = img.offsetTop + 10 + 'px'
    }, 32)
}

当然最后的红包雨肯定不能一直下，我们要有对其销毁的方法【ctrl + esc】清除插入的元素

/**
 * 销毁
 */
destroyed() {
    clearInterval(this.timer)
    this.timer = null
    // 删除页面上的标签
    let element = document.querySelector('.red-container')
    if(element) {
        element.classList.remove('red-container')
        element.innerHTML = ''
    }
}

以上仅列出重要的js代码，如果小伙伴们感兴趣可以直接打开源码查看

代码地址

未打包生成crx，请编译后请自行导入chrome体验

写在最后

感谢大家看到这里，新年将至，提前祝大家新年快乐，年终拿到手软；
由于本人技术有限，文章和代码可能存在错误希望大家不要介意，如果介意，请喷我，但不要伤害我的代码；
第一次掘金发文，如果大家喜欢，可以点赞、评论哦！感谢支持！