【记一次开发油猴插件的过程】——逆水寒

基于油猴插件写的纯javascript代码

一个朋友找我帮忙，我刚好闲着无聊写了一下，有需要的自取。因为油猴插件第一次写，所以有些粗糙，各路大神如有意见或建议，欢迎指出！

需求分析

需要做的有以下几点：

1. 首先确定网站，确定了下网站 https://h.163.com/；
2. 因为我们需要选中的是二测资格，所以我们要找到相应的位置；
3. 现在显示为xx小时后补货，我们需要设置个自动点击的时间点击按钮；
4. 会有一个弹出框，弹出框因为我没有抢到过，所以暂时不知道什么样式。不过网上有教程，我们搜一下发现是一个兑换成功和兑换失败两个框，所以我们要分两种情况；
5. 如果兑换成功我们就不需要做操作了，如果兑换失败我们还需要刷新页面，继续操作；

第一步

我们需要去查看网页源代码，F12 / fn+F12找到我们需要用到的位置，然后我们获取按钮

document.querySelectorAll(".exchange-btn")

我们获取到了所有的可以点击的兑换的按钮

第二步

因为当前显示为xx小时后补货
所以我们需要写个定时器去让它等时间执行。

var time = new Date().getTime();
// 获取当前时间的时间戳
var timeOut =
                Date.parse(
                    new Date(
                        new Date(new Date().toLocaleDateString()).getTime() +
                        12 * 60 * 60 * 1000 - 50
                    )
                ) - time
//获取相差时间的时间戳
//如果今天12点过去了我们要让它加24个小时，如果没有的话，我们不用管它。
//下边做下判断，是否需要修改
if (timeOut < 0) {
                    timeOut = timeOut + 86400000;
                }
//如果大于0的话就说明时间未到  未到就不用修改

第三步

做好定时器之后我们需要去判断下按钮的点击，如果到12点显示的是xx小时后的话，我们刷新页面，如果不是的话，我们继续去做判断

if (
                    document.querySelectorAll(".exchange-btn")[3].innerText ===
                    "立即兑换"
                ) {
                   //如果显示的是兑换的话 执行此处
                } else {
                	//如果不是的话 刷新页面
                    history.go(0);
                }

第四步

接下来我们需要用到定时器来判断是是否显示弹窗（可能有更好的办法，希望大神可以指出）

var dsq = setInterval(() => {
    if (document.querySelector(".confirm-pop") !== null) {
    //弹窗的class名为confirm-pop
    //如果弹窗出现了的话，我们就不需要定时器了
        clearInterval(dsq);
    } else {
    //如果没有出现弹窗的话那就是点击事件没有触发，所以我们进行点击
        document.querySelectorAll(".exchange-btn")[3].click();
    }
}, 50);

第五步

弹窗分为两种情况，我们做下判断

if (
	   document.querySelector(".confirm-btn") !== null &&
	    document.querySelector(".confirm-btn").innerText ===
	    "确定"
	) {
	//confirm-btn提交按钮的class名字，会有两种情况“做任务获取更多铜钱也会是这个class”
	//所以我们加个判断，判断是不是有确定可以点击，如果有了我们就点击 
	//如果两个不满足或者只满足一个 我们就刷新页面
	    document.querySelector(".confirm-btn").click();
	} else {
	    history.go(0);
	}

第六步

如果时间开始因为一些非正常因素导致的无法正常点击的时候，我们需要继续刷新页面，当然不能毫无节制，我这里做了一分钟的刷新，因为如果一分钟都没抢到的话，那就没了。

if (60000 > timeOut && timeOut > -60000) {
                console.log("满足条件的");
                //距离中午12点差一分钟和多一分钟的时候执行这里
            } else {
                console.log("不满足条件的");
            }

当然了前边的1分钟可以去掉 保险起见我还是加上了。到这里就结束啦。这就是开发全过程啦。