jQuery實現發送驗證碼的倒計時代碼

多網站在注冊界面經常要獲取驗證碼需求。獲取驗證碼都會出現一個驗證碼倒計時，一般都是60秒倒計時，要是等待過了這個60秒的倒計時，又可以重新發送驗證碼。今天就來說說用jQuery如何才能實現倒計時！有需求的伙伴們可以看看！

首先我們來看看效果圖：

點擊獲取驗證碼后出現60秒的重發倒計時

當倒計時結束后，出現重發的按鈕，以此循環

實現的代碼：

html（由于是項目中的頁面，所有只截取重要的部分）：

css樣式你們自己美化就ok，這里就不一一展示；

JS代碼：

countdown設置倒計時的秒數從多少開始，然后依次遞減，當倒計時為0時候，按鈕中的文字就變為“重發”然后重置倒計時秒數為初始的60秒！倒計時不為0的時候就依次遞減，定義了一個定時器在循環！

言

如果寫過js代碼的人對于setTimeout方法一定不會感到陌生。setTimeout是一種定時器，在前端開發中有很多的應用場景，比如在購物車結算成功后，等待幾秒會自動跳轉至列表頁。今天我們就深入的看下setTimeout的實現原理。

Javascript之setTimeout

基本用法

根據W3C的標準解釋，setTimeout是定義一個在指定時間后觸發的函數。

我們先來看看setTimeout的基本用法，實現這樣一個簡單的效果，點擊一個button，在3秒后頁面上的文字消失。

setTimeout基本用法

由于這段代碼非常基礎，這里不做過多講述。

setTimeout(fn, 0)

上面一部分說到setTimeout是相當于給函數定義一個‘鬧鐘’，當到了指定的時間后就會自動執行函數。但是如果我們將時間設置為0，即出現setTimeout(fn, 0)這樣的代碼，情況是怎么樣的呢？是會立即執行嗎？

我們可以通過以下一段代碼來進行測試。

測試代碼

如果和我們猜測的一樣，立即執行的話，上面的測試代碼會按照1 > 2 > 3的順序輸出，但是實際運行后，我們發現輸出結果的順序為1 > 3 > 2，而且不管運行多少次結果都不變。

出現了這樣的結果，就證明了setTimeout(0)并不是立即執行的，那這又該怎么解釋呢？

JS單線程執行

為了解釋上面這個問題，我們要追溯到JS執行過程，我們都知道JS是單線程執行，所有的異步事件，包括自定義的頁面DOM事件，定時器，Ajax請求都會被添加到一個任務列表按照順序執行。

因為JS腳本文件是運行在瀏覽器端的，我們的JS引擎雖然是單線程的，但是對于瀏覽器來說確是多線程的。瀏覽器中不僅包括JS引擎，還包括網絡請求Ajax，瀏覽器渲染等，它們都有特定的線程去執行。

setTimeout并不能作為多線程使用，可以通過以下一段代碼來證明。

測試代碼

對于以上一段代碼，如果setTimeout可以作為多線程使用，則新的線程會在一秒后將isEnd屬性設置false，那么在一秒后會alert出end字符串。

但是實際情況確是，頁面從未打印出end字符串，而且頁面會呈現鎖死狀態，這是因為isEnd變量值并未修改為false，相當于執行while(true)，最終頁面會崩潰。這也就能證明JS引擎是單線程執行狀態。

事件隊列

既然JS引擎是單線程執行，那么setTimeout定義的事件該具體何時觸發呢？

這里我們需要深入到瀏覽器內核設計，在內核中涉及到一個事件隊列的概念，我們可以直接看如下這張圖。

事件隊列

從上面這張圖很容易看出，在瀏覽器內核中包含了各式各樣的線程，有瀏覽器GUI渲染線程，Javascript引擎線程，網絡請求線程。

在當JS引擎執行到其他線程相關的代碼時，就會執行其他線程的代碼，在其他線程執行完畢后需要JS引擎重新運行時，就會在JS引擎的事件隊列里添加一個任務。

現在我們來看看setTimeout(0)做了什么？它會開啟一個定時器線程，并不會影響后續的代碼執行，這個定時器線程會在事件隊列后面添加一個任務，例如上面圖中的t3。等到前面的t1，t2執行完后再去執行t3，因此在前面第二部分內容中的輸出順序為1 > 3 > 2。

setInterval

既然說到了setTimeout，就不得不提到setInterval，setInterval同樣作為一種定時器，是在指定的時間間隔后執行相應的函數。

一種最常見的場景是頁面上的倒計時實現。這里我們實現一個簡單的效果，指定一個時間，并進行倒計時。

倒計時

對比

setTimeout與setInterval雖然都是定時器，但是在執行上還是有不一樣的。

setTimeout是指定的時間后執行一次；setInterval是在每隔指定的時間后執行多次。
setTimeout(fn1, t1)，fn1的執行時間是大于或等于t1的；setInterval(fn2, t2)，fn2的執行會始終嘗試在t2時間后執行，如果網絡請求較大的話，會出現fn2連續執行的情況。

總結

今天這篇文章主要講解了Javascript中的setTimeout用法和執行原理，以及與setInterval的簡單比較，大家學會了嗎？

、前言

2022年到了，祝大家虎年大吉喜氣臨，昂首擺尾迎春來。雙眼圓睜看世界，萬水千山盡開顏。胡須翹翹美姿態，人人開心祝平安。巨大身軀搖擺擺，坎坷困境當笑談。愿你虎年萬事順，吉星高照旺旺旺！

二、2022虎年計時

總體效果展示：

局部計時效果展示：

三、步驟

1.下載VSCode

下載鏈接：VSCodeVisual Studio Code - Code Editing. Redefined

在Hbuilder、idea運行也是可以的，這里推薦使用VSCode

2.配置插件

三個插件對應的功能：

改寫標簽后自動完善
切換成中文頁面
讓代碼在網頁中打開，默認鍵Alt+B

3.構建三個文件

在桌面新建一個空的文件夾，用VSCode打開

在VSCode新建三個文件 index .html style.css script.js （文件名字要和這個一樣，不然會出錯），把上面的圖片也加入到文件夾中，命名為2022.png（圖片可以自己選擇，文章中的圖片放到文章最下面了），最后保存別忘了

對于文件的層級問題，三個 index .html style.css script.js 在同一級文件夾內不要修改，如果在下一個層級或者上面一個層級需要改動選擇

在index.html代碼界面，默認鍵Alt+B 或者鼠標右擊，選擇倒數第三個Open In Default Browser默認瀏覽器打開

4.添加額外功能

更換背景圖：

在css代碼的第八行，html的第六行，更改圖片地址就行了

添加音樂：

在index.html代碼中添加下列代碼： <embed src="song.mp3" hidden="false" autostart="true" loop="true">

src="音樂地址"，把想要播放的音樂，提前放到這個文件夾中，把這個音樂的命名填入src中就可以播放音樂

hidden="true"表示隱藏音樂播放按鈕，hidden="false"開啟音樂播放按鈕

autostart="true" 打開網頁加載完后自動播放

loop="true"循環播放如僅想播放一次則為：loop="false"

四、編碼實現

CSS代碼：

@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
 
*{
    box-sizing: border-box;
}
 
body{
    background-image: url("2022.png"); 
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vm;
    font-family: 'Lobster', cursive, sans-serif;
    margin: 0;
}
 
.big-text{
    color: rgb(255, 215, 0);
    font-size: 3rem;
    font-weight: bold;
    line-height: 0.5;
    margin: 3rem;
}
 
h1{
    color: gold;
    font-size: 3rem;
    margin-top: 3rem;
}
 
.countdown-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
 
.countdel {
    color: black;
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
}

Html代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 下一行可以更換圖片地址 -->
    <link rel="shortcut icon" href="2022.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#0000" />
    <link href="https://fonts.googleapis.com/css2?family=DM+Mono&family=Inter:wght@400;500&display=swap" rel="stylesheet">
    <title>Burmese New Year's Day Countdown</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
    <meta name="author" content="Thiri San" />
    <meta name="keywords" content="Thiri San">
</head>
<body>
    <h1>2022新年倒計時</h1>
    <div  class="countdown-container">
        <div class="countdel days-c">
            <p class="big-text" id="days">0</p>
            <span>天</span>
        </div>
        <div class="countdel hours-c">
            <p class="big-text" id="hours">0</p>
            <span>時</span>
        </div>
        <div class="countdel minutes-c">
            <p class="big-text" id="minutes">0</p>
            <span>分</span>
        </div>
        <div class="countdel seconds-c">
            <p class="big-text" id="seconds">0</p>
            <span>秒</span>
        </div>
    </div>
 
 
</body>
</html>

JS代碼：

const daysEl=document.getElementById('days')
const hoursEl=document.getElementById('hours')
const minutesEl=document.getElementById('minutes')
const secondsEl=document.getElementById('seconds')
 
const x=new Date().getFullYear()
const y=x+1;
const newYear=new Date(y,0,1,0,0,0,0)
 
function countdown() {
    const newYearsDate=new Date(newYear);
    const currentDate=new Date();
 
    const totalSeconds=(newYearsDate - currentDate) / 1000;
 
    const days=Math.floor(totalSeconds / 3600 / 24);
    const hours=Math.floor(totalSeconds / 3600) % 24;
    const minutes=Math.floor(totalSeconds / 60) % 60;
    const seconds=Math.floor(totalSeconds % 60);
 
    daysEl.innerHTML=days;
    hoursEl.innerHTML=formatTime(hours);
    minutesEl.innerHTML=formatTime(minutes);
    secondsEl.innerHTML=formatTime(seconds);
 
}
 
function formatTime(time){
    return time < 10 ? (`0${time}`) : time;
}
 
countdown();
setInterval(countdown,1000)

最后，祝大家2022年新年快樂！需要Python配套學習資料私信“666”哦

在線咨詢

上一篇：基于HTML5的繪制貝塞爾曲線
下一篇：Php 中用phpmailer發送郵件

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

jQuery實現發送驗證碼的倒計時代碼

言

基本用法

setTimeout(fn, 0)

JS單線程執行

事件隊列

setInterval

對比

總結

您的項目需求