这是我参与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，一起学习。
