阅读 2617

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

这是我参与8月更文挑战的第19天,活动详情查看:8月更文挑战

前言

玩转掘金 系列,对掘金扩展一些有意思的功能,比如:

今天我们实现的是可视化智能抽奖, 还是先看效果!!!

效果演示

因本人矿石太少,所以效果不明显,见谅!!!!

draw.gif

源码

掘金智能抽奖源码JJSignAndLD

需要安装游猴脚本,或者FEHelper插件,贴入相关代码即可!!

数据分析

API的请求中有两个通用参数, 一个aid一个uuid, 有用嘛,估计有,不用行不行,行!!!!

获取奖池信息

请求地址: https://api.juejin.cn/growth_api/v1/lottery_config/get?aid=[aid]&uuid=[uuid]

请求方式: GET

请求参数: QueryString aiduuid

返回结果:

就是奖池的信息,之后做展示用!

{
    "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 aiduuid

返回结果

{
    data: {
        history_id: "6997575438109261838",
        id: 19,
        lottery_id: "6981716980386496552",
        lottery_image: "",
        lottery_name: "66矿石", // 中奖名
        lottery_type: 1, 
    }
}
复制代码

思路

思路往往比代码本身更重要!

游猴脚本 | FeHelper + JS脚本, 非常简单!

  1. 获取奖池信息
  2. 执行抽奖
  3. 根据执行结果状态码,执行响应操作

代码实现

样式注入

动态创建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);

复制代码

循环请求与终止

双重判断

  1. isDrawing代表在抽奖
  2. 返回结果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,一起学习。

文章分类
前端