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

对比

总结

您的项目需求