0
点赞
收藏
分享

微信扫一扫

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

大明宫 2022-03-16 阅读 69

前言

最近正准备深入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)
    }
  • /**
    * 销毁
    */
    destroyed() {
    clearInterval(this.timer)
    this.timer = null
    // 删除页面上的标签
    let element = document.querySelector('.red-container')
    if(element) {
    element.classList.remove('red-container')
    element.innerHTML = ''
    }
    }

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



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


代码地址


  • ​​点我获取源码​​
  • ​​chrome插件参考文档​​



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


写在最后


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


举报

相关推荐

0 条评论