这是我参与8月更文挑战的第19天,活动详情查看:8月更文挑战。
前言
玩转掘金 系列,对掘金扩展一些有意思的功能,比如:
今天我们实现的是可视化智能抽奖, 还是先看效果!!!
效果演示
因本人矿石太少,所以效果不明显,见谅!!!!
源码
掘金智能抽奖源码: JJSignAndLD
需要安装游猴脚本,或者FEHelper插件,贴入相关代码即可!!
数据分析
API的请求中有两个通用参数, 一个aid一个uuid, 有用嘛,估计有,不用行不行,行!!!!
获取奖池信息
请求地址: https://api.juejin.cn/growth_api/v1/lottery_config/get?aid=[aid]&uuid=[uuid]
请求方式: GET
请求参数: QueryString aid
和uuid
返回结果:
就是奖池的信息,之后做展示用!
{
"data": {
"lottery": [{
"lottery_id": "6981716980386496552", // 奖ID
"lottery_name": "66矿石", // 奖名称
"lottery_type": 1,
"lottery_image": "https://xxxx.image", // 奖品图片
"unlock_count": 0
},
......
]
}
}
抽奖
请求地址: https://api.juejin.cn/growth_api/v1/lottery/draw?aid=[aid]8&uuid=[uuid]
请求方式: POST
请求参数: QueryString aid
和uuid
返回结果
{
data: {
history_id: "6997575438109261838",
id: 19,
lottery_id: "6981716980386496552",
lottery_image: "",
lottery_name: "66矿石", // 中奖名
lottery_type: 1,
}
}
思路
思路往往比代码本身更重要!
游猴脚本 | FeHelper
+ JS脚本
, 非常简单!
- 获取奖池信息
- 执行抽奖
- 根据执行结果状态码,执行响应操作
代码实现
样式注入
动态创建style标签,注入到head节点下
const styleContent = `
._jj_draw_container {
position:fixed;
top: 80px;
right: 0;
z-index: 9999;
background-color: rgba(0,0,0,0.6);
padding: 20px;
}`
function appendStyle(text) {
const styleEl = document.createElement('style');
styleEl.textContent = text;
document.head.appendChild(styleEl);
}
appendStyle(styleContent);
循环请求与终止
双重判断
isDrawing
代表在抽奖- 返回结果
err_no
不等于代表失败,err_msg
代表错误消息,这里最可能失败的原因就是矿石不足
async function onDraw(ev) {
if (isDrawing) {
return;
}
isDrawing = true;
try {
let errNo = 0;
do {
if(!isDrawing){
break;
}
const res = await doDraw();
errNo = res.err_no;
if (errNo !== 0) {
alert(res.err_msg);
isDrawing = false;
break;
}
// 增加奖励
addPrize(res.data)
// 渲染
renderPrizes();
// 暂停16ms
await delay(undefined, 16).run();
// 单次调试用
//isDrawing = false;
//break;
} while (errNo == 0)
} catch (err) {
isDrawing = false
alert(err.message);
}
}
更多代码请参见 JJSignAndLD, css + js 约250行代码。
写在最后
3-5分钟,500-1000字,有所得,而不为所累,如果你觉得不错,你的一赞一评就是我前行的最大动力。
技术交流群请到 这里来。 或者添加我的微信 dirge-cloud,一起学习。