當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

前端——获取手机验证码案例

發布時間：2023/12/8 HTML 32 豆豆

生活随笔收集整理的這篇文章主要介紹了前端——获取手机验证码案例小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

效果

實現間隔規定秒數允許獲取短信（如每隔60s可以點擊一次獲取驗證碼按鈕）
代碼

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title> </head><body>手機號碼： <input maxlength="11"> <button>獲取驗證碼</button><script>// 按鈕點擊之后，會禁用 disabled 為true // 同時按鈕里面的內容會變化，注意 button 里面的內容通過 innerHTML修改// 里面秒數是有變化的，因此需要用到定時器// 定義一個變量，在定時器里面，不斷遞減// 如果變量為0 說明到了時間，我們需要停止定時器，并且復原按鈕初始狀態var btn = document.querySelector('button');var time = 60; // 定義剩下的秒數btn.addEventListener('click', function () {btn.disabled = true;var timer = setInterval(function () {if (time == 0) {// 清除定時器和復原按鈕clearInterval(timer);btn.disabled = false;btn.innerHTML = '獲取驗證碼';time = 60;} else {btn.innerHTML = time + '秒后重新獲取';time--;}}, 1000)})</script> </body></html>

總結

以上是生活随笔為你收集整理的前端——获取手机验证码案例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： 2020年9月电子学会Python等级考
下一篇：安装blockchain-explore