JSコードを使用してWebページのスナップアップ機能を実装する方法-jsチュートリアル-php.cn

JSコードを使用してWebページのスナップアップ機能を実装する方法

小云云

リリース： 2017-11-29 10:11:24

オリジナル

8914 人が閲覧しました

この章では、プログラマとして、編集者が Web スナップアップ機能を実装するために JS を使用する方法についての記事を共有します。以下では、Chrome ブラウザの開発者機能を使用して実装します。その使い方と、作成した JS を Chrome ブラウザを通じてデバッグしてロードする方法と、スナップアップ機能を完成させる JS コードです。

関連コンテンツ:

1. Chrome ブラウザー
2.js コード
3. 関数のスロットリング

最初のステップ

Chrome ブラウザーを開き、Ctrl+shift+i キーの組み合わせを使用して開発者ツールを開きます。手順は図の通りです。

JSコードを使用してWebページのスナップアップ機能を実装する方法

スニペットをクリックします

ステップ2

図に示すように

JSコードを使用してWebページのスナップアップ機能を実装する方法

新しいスニペットをクリック -->スクリプト「名前」を入力 -->Ctrl+s で保存します。

ステップ3

図に示すように

JSコードを使用してWebページのスナップアップ機能を実装する方法

新しく作成したスクリプト「名前」を選択し、図に示すように2番目のステップでjsコードを編集します。最後に、3 番目のステップに示すように、run でコードを実行します。

js スクリプトコード

1. 以下は Web サイト上のコードです:

<body>
    <p class="box">
      <img  class="img" src="image/pict.png" / alt="JSコードを使用してWebページのスナップアップ機能を実装する方法" >
      <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 ブラウザーに組み込み、その実行を制御できます。

JSコードを使用してWebページのスナップアップ機能を実装する方法

開発者が実際の環境で高い同時実行条件をシミュレートする場合、このスクリプトを使用してテストをシミュレートできます。今のスクリプトを通じて、開発したページの 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 を使用して Web ページのスナップアップ機能を実装するためのチュートリアルです。それだけでなく、簡単な JS スクリプトの作成方法と、JS スクリプトをブロックする簡単な方法も学びました。。