前言
最近正准备深入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体验
写在最后
- 感谢大家看到这里,新年将至,提前祝大家新年快乐,年终拿到手软;
- 由于本人技术有限,文章和代码可能存在错误希望大家不要介意,如果介意,请喷我,但不要伤害我的代码;
- 第一次发文,如果大家喜欢,可以点赞、评论哦!感谢支持!