發送短信驗證，后按鈕倒計時，防止刷新倒計時失效

DevWiki 發布于2019-08-19 18:45 / 739人閱讀

摘要：一般原理是當點擊發送按鈕時，發送請求到服務器發送短信驗證碼，成功則把發送按鈕設置為不可點擊，并且調用定時器，按鈕顯示倒計時。

應用場景

在開發“發送短信驗證”功能時候，要解決一個問題，防止惡意或頻繁發送短信驗證碼問題。一般原理是“當點擊發送按鈕時，發送ajax請求到服務器發送短信驗證碼，成功則把發送按鈕設置為不可點擊，并且調用定時器，按鈕顯示倒計時”。如果就這樣不對倒計時存儲做處理，那么當刷新頁面，會出現倒計時失效，按鈕可點擊。提供以下解決方案：

利用cookie存儲倒計時

利用HTML5的localStorage 存儲倒計時

利用cookie存儲倒計時

發送成功后把剩余倒計時存儲到cookie，當頁面刷新時，檢查cookie 是否還存儲著剩余倒計時？，如果有，發送按鈕則保持倒計時狀態，不可點擊，否則發送按鈕可點擊。

HTML代碼

JQuery代碼

云服務器 GPU云服務器倒計時按鈕功能 js怎么讓計時器失效 java倒計時后執行驗證碼倒計時

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/79964.html

發送短信驗證，后按鈕倒計時，防止刷新倒計時失效

摘要：一般原理是當點擊發送按鈕時，發送請求到服務器發送短信驗證碼，成功則把發送按鈕設置為不可點擊，并且調用定時器，按鈕顯示倒計時。應用場景在開發發送短信驗證功能時候，要解決一個問題，防止惡意或頻繁發送短信驗證碼問題。一般原理是當點擊發送按鈕時，發送ajax請求到服務器發送短信驗證碼，成功則把發送按鈕設置為不可點擊，并且調用定時器，按鈕顯示倒計時。如果就這樣不對倒計時存儲做處理，那么當刷...

Rocture 2019-08-01 15:26 評論0 收藏0
JavaScript 基礎知識 - BOM篇

摘要：在中我們需要掌握定時器。定時器不是我們調用，我們只需要把函數的地址傳過去，時間到了，會自己調用。參數延時的時間單位毫秒返回定時器的，用于清除示例代碼延時定時器秒后將執行的代碼。 showImg(https://segmentfault.com/img/remote/1460000012575821?w=1920&h=1080); 前言本篇文章是JavaScript基礎知識的BOM篇，...

garfileo 2019-08-01 18:16 評論0 收藏0
JavaScript 基礎知識 - BOM篇

摘要：在中我們需要掌握定時器。定時器不是我們調用，我們只需要把函數的地址傳過去，時間到了，會自己調用。參數延時的時間單位毫秒返回定時器的，用于清除示例代碼延時定時器秒后將執行的代碼。 showImg(https://segmentfault.com/img/remote/1460000012575821?w=1920&h=1080); 前言本篇文章是JavaScript基礎知識的BOM篇，...

Object 2019-08-21 18:24 評論0 收藏0
JQ實現發送短信驗證碼/倒計時60S~

摘要：部分立即獲取部分部分注意此處要自行引入發送驗證碼倒計時立即獲取還剩發布于閱讀原博之后補充了部分代碼方便下次己用供小白參考侵刪 html部分 css部分 .gainCodeBtn{ background-color: #ff4646; color: #ffffff; border: none; font-size: 1rem; letter-s...

岳光 2019-08-22 16:22 評論0 收藏0