【玩转掘金】掘金可视化智能抽奖，支持暂停和继续, 插件版

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