涉及到的内容：
1.chrome浏览器
2.js代码
3.函数节流
第一步
打开chrome浏览器，使用组合键Ctrl+shift+i打开开发者工具，接下来如图所示。
点击snippets
第二步
如图所示
点击new snippet -->输入脚本‘名称'-->Ctrl+s保存。
第三步
如图所示
选择新创建的脚本‘名称'，在如图所示的第二步进行编辑js代码。最后如第三步所示：run 运行代码。
js脚本代码
1.以下是网站上的代码：
抢购
/**
* 抢购按钮
*
* */
btn.οnclick=function(){
console.log('抢购成功！')
}
每次点击抢购 控制台输出 抢购成功！
2.脚本代码/**
* 最简单的脚本代码
* 版本1.0.1
*/
btn.click()//触发按钮执行click事件
/**
* 使用for循环执行抢购的脚本代码
* 版本1.0.2
* */
for(var i=0i<100i++){
btn.click()
}
通过上边的脚本js代码可以知道，我们可以在chrome浏览器内置脚本，并控制执行。
当开发人员模拟真实环境的高并发情况，咱们就可以使用这种脚本的方式模拟测试。通过刚刚的脚本我们发现我们开发的页面中的js是有很多问题的。假设【抢购按钮】触发的是请求数据接口。则会出现在一个时间内发出n个请求。处理这个问题可以参考防止重复提交
防止ajax重复提交
提交
/**
* 模拟ajax提交
* @fn 回调函数
* */
function Ajax(fn){
setTimeout(function(){
var data= {result:true,msg:'提交成功！'}
fn(data)
},2000)
}
/**
* btn click 提交事件
*
* */
btn.οnclick=function(){
//检查 按钮是否被锁住，锁住直接rerun
if(btn.getAttribute('lock')){
return
}
//上锁
btn.setAttribute('lock',1)
//更改状态
btn.innerText='提交中...'
//模拟ajax提交
Ajax(function(data){
//请求成功
if(data.result){
console.log('请求成功')
//请求成功解锁
btn.setAttribute('lock',"")
//还原状态
btn.innerText='提交'
}else{
console.log('请求失败')
//请求失败解锁
btn.setAttribute('lock',"")
//还原状态
btn.innerText='提交'
}
})
}
也可以使用函数节流方式处理。如下代码：//网站上写的代码
/**
* 抢购按钮
*
* */
btn.οnclick=function(){
throttle(function(){
console.log('抢购成功！')
},500)
}
/**
* 函数节流
* @fn {function} 回调函数
* @time {number} 时间，毫秒
*
* */
function throttle(fn,time){
if(throttle.id){
clearTimeout(throttle.id)
}
throttle.id=setTimeout(function(){
fn()
},time||200)
}
通过以上方式我们可以过滤掉恶意循环触发事件。这种函数节流方式也得到大家的一致认可与推广。
以上内容是JavaScript实现网页抢购功能的教程，不仅如此，我们还学会了制做简单的js脚本，也学到一种简单的阻止js脚本的方，大家赶紧动手操作一下吧。
相关推荐：
如何用php脚本抢东西
点赞文章给优秀博主打call~
1克拉钻石多少钱
精选推荐
广告
我们先来看下秒杀活动页面代码
<!DOCTYPE
HTML>
<html>
<head>
<meta
http-equiv="Content-Type"
content="text/html
charset=gb2312">
<title>
Micomo
</title>
</head>
<body>
<div>
<p>
活动倒计时<strong
id="endtime"></strong>秒！
</p>
<input
type="button"
id="btn"
value="立即购买"
disabled="disabled"
onClick="func()"/>
</div>
<script
src="/js/jquery-2.1.1.min.js"></script>
<script
type="text/javascript">
//倒计时30秒
var
i
=
30
function
remainTime()
{
if
(i
>
0)
{
document.getElementById("endtime").innerHTML
=
i--
setTimeout("remainTime()",
1000)
}
if
(i
==
0)
{
$("p").text("活动开始")
$("p").css("background-color",
"yellow")
//倒计时结束，按钮状态改为可用
document.getElementById("btn").disabled
=
false
}
}
remainTime()
//点击按钮触发的方法
function
func()
{
alert("恭喜你抢到一个月饼")
}
</script>
</body>
</html>
页面预览
脚本
js
代码
<script
type="text/javascript">
var
button
=
document.getElementById("btn")
//每秒执行一次，若按钮状态为可用，进行点击
setInterval(function()
{
if
(button.disabled
==
false)
{
button.click()
}
},
1000)
</script>
setInterval()
方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval()
方法会不停地调用函数，直到
clearInterval()
被调用或窗口被关闭。
如何放到浏览器
浏览器打开活动页面，按F12进入调试模式，找到Console控制台，将上面js脚本标签内的代码粘贴进去（不要首尾标签），点击回车即可，一定要在活动结束前放进去。
结果预览
修改setInterval(function(){},millisec)中的millisec（毫秒为单位），可以控制点击频率。
这只是个简单的js代码，没有实现验证码自动验证。
可以参考学习，切勿拿来做有违道德，谋取利益的事。
个人博客，仅用来做些笔记，不保证内容正确性，若发现错误，恳请纠正。
百度浏览器积分兑换
打开如下页面，按F12，将代码放到console下，回车。
代码
//选取data-id为6的<a>标签
var
button
=
$("a[data-id='6']")
//每秒执行一次，若按钮状态为可用，进行点击
var
fuc
=
setInterval(function()
{
//如果出现刷新验证码的按钮，则表明已抢到
if($(".refresh-btn").length
>
0){
window.clearInterval(fuc)
//桌面通知，只有chrome，firefox浏览器支持桌面API
Notification.requestPermission(function(status)
{
var
n
=
new
Notification('通知消息',
{
body:
'爱奇艺会员兑换码！'
})
})
}
else
{
button.click()
}
},1000)//一秒一次点击
![[HTML问题] 标签中的class如何理解？](/aiimages/%5BHTML%E9%97%AE%E9%A2%98%5D+%E6%A0%87%E7%AD%BE%E4%B8%AD%E7%9A%84class%E5%A6%82%E4%BD%95%E7%90%86%E8%A7%A3%EF%BC%9F.png)
