如何用JS代码实现网页抢购功能-js教程-PHP中文网

首页

web前端

js教程

如何用JS代码实现网页抢购功能

小云云

Nov 29, 2017 am 10:11 AM

javascript 抢购网页

作为一名程序员，我们会遇到和很多的开发问题，本章内容小编就为大家分享一篇如何用JS实现网页抢购功能，以下我们是通过chrome浏览器的开发者功能，实现如何用JS代码完成抢购功能以及如何通过chrome浏览器调试并加载自己写的JS。

涉及到的内容：

1.chrome浏览器
2.js代码
3.函数节流

第一步

打开chrome浏览器，使用组合键Ctrl+shift+i打开开发者工具，接下来如图所示。

1_副本.png

点击snippets

第二步

如图所示

2_副本.png

点击new snippet -->输入脚本‘名称'-->Ctrl+s保存。

第三步

如图所示

3_副本.png

选择新创建的脚本‘名称'，在如图所示的第二步进行编辑js代码。最后如第三步所示：run 运行代码。

js脚本代码

1.以下是网站上的代码：

<body>
    <p class="box">
      <img class="img" src="image/pict.png" />
      <button class="btn" id=&#39;btn&#39;>抢购</button>
    </p>
    <script type="text/javascript">
      /**
       * 抢购按钮
       * 
       * */
      btn.onclick=function(){
        console.log(&#39;抢购成功！&#39;);
      };
    </script>
  </body>

登录后复制

每次点击抢购控制台输出抢购成功！

2.脚本代码

/**
* 最简单的脚本代码
* 版本1.0.1
*/
btn.click();//触发按钮执行click事件
/**
 * 使用for循环执行抢购的脚本代码
 * 版本1.0.2
 * */
for(var i=0;i<100;i++){
  btn.click();
}

登录后复制

通过上边的脚本js代码可以知道，我们可以在chrome浏览器内置脚本，并控制执行。

4_副本.png

当开发人员模拟真实环境的高并发情况，咱们就可以使用这种脚本的方式模拟测试。通过刚刚的脚本我们发现我们开发的页面中的js是有很多问题的。假设【抢购按钮】触发的是请求数据接口。则会出现在一个时间内发出n个请求。处理这个问题可以参考防止重复提交

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>防止ajax重复提交</title>
  </head>
  <body>
    <button id="btn">提交</button>
    <script>
  
      /**
       * 模拟ajax提交
       * @fn 回调函数
       * */
      function Ajax(fn){
        setTimeout(function(){
          var data= {result:true,msg:&#39;提交成功！&#39;};
          fn(data);
        },2000);
      }
      /**
       * btn click 提交事件
       * 
       * */
      btn.onclick=function(){
        //检查 按钮是否被锁住，锁住直接rerun
        if(btn.getAttribute(&#39;lock&#39;)){
          return;
        }
        //上锁
        btn.setAttribute(&#39;lock&#39;,1);
        //更改状态
        btn.innerText=&#39;提交中...&#39;;
        //模拟ajax提交
        Ajax(function(data){
          //请求成功
          if(data.result){
            console.log(&#39;请求成功&#39;);
            //请求成功解锁
            btn.setAttribute(&#39;lock&#39;,"");
            //还原状态
            btn.innerText=&#39;提交&#39;;
          }else{
            console.log(&#39;请求失败&#39;);
            //请求失败解锁
            btn.setAttribute(&#39;lock&#39;,"");
            //还原状态
            btn.innerText=&#39;提交&#39;;
          }
        });
      }
    </script>
  </body>
</html>

登录后复制

也可以使用函数节流方式处理。如下代码：

//网站上写的代码
/**
 * 抢购按钮
 * 
 * */
btn.onclick=function(){
   throttle(function(){
    console.log(&#39;抢购成功！&#39;);
  },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脚本的方，大家赶紧动手操作一下吧。

热AI工具

热工具

热门话题

Java教程

1662

CakePHP 教程

1418

Laravel 教程

1311

PHP教程

1261

C# 教程

1234

显示更多

Related knowledge

Edge浏览器怎么将网页用快捷方式发送到桌面？ Mar 14, 2024 pm 05:22 PM

　　Edge浏览器怎么将网页用快捷方式发送到桌面？我们很多用户为了方便直接打开访问页面，想要将经常使用的网页以快捷方式的形式显示在桌面，但是不知道应该如何操作，针对这个问题，本期小编就来和广大用户们分享解决方法，一起来看看今日软件教程分享的内容吧。　　Edge浏览器将网页发送到桌面快捷方式方法：　　1、打开软件，点击页面中的“...”按钮。　　2、在下拉菜单选项中选择“应用”中的“将此站点作为应用安装”。　　3、最后在弹出的窗口中将其

网页图片加载不出来怎么办？6种解决办法 Mar 15, 2024 am 10:30 AM

　　有网友发现打开浏览器网页，网页上的图片迟迟加载不出来，是怎么回事？检查过网络是正常的，那是哪里出现了问题呢？下面小编就给大家介绍一下网页图片加载不出来的六种解决方法。　　网页图片加载不出来：　　1、网速问题　　网页显示不出图片有可能是因为电脑的网速比较慢，电脑中开启的软件比较多，　　而我们访问的图片比较大，这就可能因为加载超时，导致图片显示不出来，　　可以将比较占网速的软件将关掉，可以去任务管理器查看一下。　　2、访问人数过多　　网页显示不出图片还有可能是因为我们访问的网页，在同时间段访问的

网络连接正常但浏览器无法访问网页可能原因 Feb 19, 2024 pm 03:45 PM

浏览器打不开网页但是网络正常，可能的原因是多种多样的。在该问题出现时，我们需要逐步排查，才能确定具体的原因并解决问题。首先，确定网页打不开的现象是局限于某个特定的浏览器还是所有浏览器都无法打开网页。如果只有一个浏览器无法打开网页，可以尝试使用其他浏览器，如谷歌浏览器、火狐浏览器等进行测试。如果其他浏览器能够正常打开网页，那么问题很可能出在该特定浏览器上，可能

如何使用WebSocket和JavaScript实现在线语音识别系统 Dec 17, 2023 pm 02:54 PM

如何使用WebSocket和JavaScript实现在线语音识别系统引言：随着科技的不断发展，语音识别技术已经成为了人工智能领域的重要组成部分。而基于WebSocket和JavaScript实现的在线语音识别系统，具备了低延迟、实时性和跨平台的特点，成为了一种被广泛应用的解决方案。本文将介绍如何使用WebSocket和JavaScript来实现在线语音识别系

WebSocket与JavaScript：实现实时监控系统的关键技术 Dec 17, 2023 pm 05:30 PM

WebSocket与JavaScript：实现实时监控系统的关键技术引言：随着互联网技术的快速发展，实时监控系统在各个领域中得到了广泛的应用。而实现实时监控的关键技术之一就是WebSocket与JavaScript的结合使用。本文将介绍WebSocket与JavaScript在实时监控系统中的应用，并给出代码示例，详细解释其实现原理。一、WebSocket技

网页打不开怎么解决 Feb 21, 2024 am 10:24 AM

网页打不开怎么解决随着互联网的快速发展，人们越来越依赖于互联网来获取信息、进行交流和娱乐。然而，有时我们会遇到网页打不开的问题，这给我们带来了很多困扰。本文将为大家介绍一些常见的方法，帮助解决网页打不开的问题。首先，我们需要确定是由于什么原因导致网页打不开。可能的原因包括网络问题、服务器问题、浏览器设置问题等。下面是一些解决方法：检查网络连接：首先，我们需要

php怎么在网页打开 Mar 22, 2024 pm 03:20 PM

在网页中执行 PHP 代码需要确保 Web 服务器支持并已正确配置 PHP。可以通过三种方式打开 PHP： * **服务器环境：**将 PHP 文件放置在服务器根目录并通过浏览器访问。 * **集成开发环境：**将 PHP 文件放置在指定 Web 根目录并通过浏览器访问。 * **远程服务器：**通过服务器提供的 URL 地址访问托管在远程服务器上的 PHP 文件。

JavaScript和WebSocket：打造高效的实时天气预报系统 Dec 17, 2023 pm 05:13 PM

JavaScript和WebSocket：打造高效的实时天气预报系统引言：如今，天气预报的准确性对于日常生活以及决策制定具有重要意义。随着技术的发展，我们可以通过实时获取天气数据来提供更准确可靠的天气预报。在本文中，我们将学习如何使用JavaScript和WebSocket技术，来构建一个高效的实时天气预报系统。本文将通过具体的代码示例来展示实现的过程。We

See all articles

如何用JS代码实现网页抢购功能

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题