学JS的心路历程

各家电商网站都推出了各种活动和现今优惠券，当时在逛PTT时看到了有篇文章，提供代码教大家用JS的方式抢票，看了一下后发现好像很多人好奇这是怎么做的，于是就想说想一篇文章来讲解一下。

我们先来看一下折价券的样子。

怎么点都不会有东西对吧？

开启开发人员选项，选到折价券的位置。

可以看到说是因为disable属性，才没有办法点击(leafor)

恩？所以只要取消掉就可以点击了吗？

当然不是这样啊！

我们必须等时间到时候再点击才可以！

那该怎么做呢？

首先必须用JS抓到折价券的DOM元素：

const coupon_list = document.getElementsByClassName（“coupon-list”）；

const coupon_250 = coupon_list[0].children[2]；

console.log（coupon_250）；

再来，我们得设定时间到时执行按下按钮的动作，在JS中时间都是以世界标准时间（UTC）时间计算的，也就是从1970年1月1日开始的毫秒数值来储存时间。

当然可以透过JS的Date（）方法转换，但是我这个人比较懒惰，找了个可以直接帮我转的网页。

const coupon_list = document.getElementsByClassName（“coupon-list”）；

const coupon_250 = coupon_list[0].children[2]；

const endTime = 1541836800 * 1000；

alert ={}；

由于网页转出来的是UNIX时间，需要乘上1000才会是JS的时间值。

顺便关闭了弹跳视窗的提醒，不然网页会很难关闭。

接着我们用setInterval（）计时，当现在时间-开始抢购时间<= 0时候，再利用setInterval（）对折价券的按钮下达按下的指令：

setInterval（waitTime，1）

function waitTime（）{

let now = Date.now（）；

let spanTime = endTime - now；

console.log（'剩余时间:'，spanTime）；

if（spanTime <= 0）{

coupon_250.disabled = false；

setInterval（（）=>{

console.log（“click”）；

coupon_250.click（）；

}，10）

}

这样就可以顺利执行了，setInterval（waitTime，10）后面的数字是多少毫秒执行一次（1秒＝1000毫秒）。

由于我怕会有误差，所以设定了每一毫秒就执行一次(zflwx)。

但由于时间不一定跟对方网页时间值吻合，所以并不是一定每次都能成功。

当然这个只是秉持学术研究才做出来的，千万别拿来乱用！！

转载于:https://www.cnblogs.com/lannyQ-Q/p/10189246.html

学JS的心路历程 - JS应用相关推荐

学JS的心路历程 -函式（三）this
this是什么,取决于被呼叫的呼叫地点. 昨天有提到说,呼叫函式时候会传递隐含参数:arguments和this并讲解了arguments,今天我们就来探讨this吧! 什么是this 我们都会呼叫函 ...
学JS的心路历程 -物件与原型（二）
昨天有提到说Object.setPrototypeOf可以指定一个物件为另一个物件的原型,但有想过到底这个原型,也就是[[Prototype]]最终会到何处吗? 答案是Object.prototype ...
学JS的心路历程 -非同步执行
JS是单线程的语言,也就是说同一时间只会执行一行程序,所以如果一段程序执行过久就会造成阻塞(blocking)的现象,必须等到它结束后才能执行下一段程序. 举个例子来说,如果我们今天要买便当,但是老板 ...
学JS的心路历程 -数组常见处理方法
昨天我们有提到说for-of和forEach可以用来处理数组,但其实还有很多方法可以更快速及精简代码的达到你要的效果. 话不多说,我们赶紧来看吧! Array.prototype.map() 会回传一 ...
学JS的心路历程Day28 - PixiJS -基础（二）
材质暂存(texture cache) 昨天有说到,图片要放入stage前,需要先把图片转成Sprite的特殊图片物件. 但是我们也可以先将图片放进材质暂存(texture cache). 什么是「材 ...
学JS的心路历程-Promise（一）
今天在进入Promise代码之前,我们先来用个例子来解释Promise是什么. 未来值假设我们今天来到快餐店,点了一个汉堡,付钱给店员. 点了餐点并付费,可以理解为我们发送了一个请求,希望得到一个回 ...
学JS的心路历程-函式（五）箭头函式
箭头函式arrow function 为了能够以更简短的方式建立函式,ES6变推出了箭头函式. 用说明的可能会不太懂,我们先拿之前的数组排序例子来看: var arr = [2,1,6,12,3,77 ...
学习JS的心路历程-参数传递方式（上）
很多人认为JS的传递方式是值是Call by value, 物件及数组是Call by Reference.甚至还有人宣称其实JS是Call by sharing,那到底是哪一个呢? 这两天我们一一来 ...
学习JS的心路历程-函式（一）
前几天有间单提到该如何声明函式及在Hositing中会发生什么事,但是函式的奥妙不仅于此. 身为一个使用JS的工程师,我们一定要熟悉函式到比恋人还熟! 这几天将会把函式逐一扒开跟各位一起探讨其中的奥妙 ...
尤雨溪创立 Vue.js 的心路历程纪录片
Show More 本文分享自微信公众号 - 生信科技爱好者(bioitee). 如有侵权,请联系 support@oschina.cn 删除. 本文参与"OSC源创计划",欢迎正 ...

学JS的心路历程 - JS应用

学JS的心路历程 - JS应用相关推荐

最新文章

热门文章