Js时间倒计时

news2024/11/20 1:29:40

😇作者介绍：一个有梦想、有理想、有目标的，且渴望能够学有所成的追梦人。

🎆学习格言：不读书的人,思想就会停止。——狄德罗

⛪️个人主页：进入博主主页

🗼推荐系列：点击进入

🌼欢迎小伙伴们访问到博主的文章内容，在浏览阅读过程发现需要纠正的地方，烦请指出，愿能与诸君一同成长！

文章内容如下

✏️前言

✏️一、倒计时

✏️二、按钮点击发送，10秒内被禁用

✏️总结

文章内容如下

✏️前言

在JavaScript中，时间倒计时下面代码会创建一个定时器，每秒钟更新一次倒计时，不是能难，记住关键字，运用关键字。

✏️一、倒计时

🚀首先附上源码

// 目标日期和时间
var targetDate = new Date('2022-12-31 23:59:59');

// 更新倒计时
function updateCountdown() {
  // 当前日期和时间
  var currentDate = new Date();

  // 计算剩余时间（单位：毫秒）
  var remainingTime = targetDate - currentDate;

  // 如果剩余时间小于等于0，则倒计时结束
  if (remainingTime <= 0) {
    clearInterval(timer); // 停止定时器
    console.log('倒计时结束');
    return;
  }

  // 将剩余时间转换为天、小时、分钟和秒
  var days = Math.floor(remainingTime / (1000 * 60 * 60 * 24));
  var hours = Math.floor((remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((remainingTime % (1000 * 60)) / 1000);

  // 输出倒计时
  console.log('剩余时间：' + days + ' 天 ' + hours + ' 小时 ' + minutes + ' 分钟 ' + seconds + ' 秒');
}

// 每秒钟更新一次倒计时
var timer = setInterval(updateCountdown, 1000);

🚀下面我解读一下关键字：clearInterval 和 setInterval，看下面解释

👉setInterval 和 clearInterval 是 JavaScript 中用于处理定时任务的函数。

setInterval 函数用于设置一个周期性的定时任务，它接受两个参数：一个函数和一个时间间隔（以毫秒为单位）。该函数会在每个时间间隔之后被调用一次，从而创建一个循环执行的效果。例如，setInterval(updateCountdown, 1000) 将会每秒钟调用一次 updateCountdown 函数。

clearInterval 函数用于停止由 setInterval 创建的定时任务。它接受一个参数，即要停止的定时任务的标识符（也就是 setInterval 返回的值）。通过调用 clearInterval 并传递定时任务的标识符，可以停止这个定时任务的执行。

使用 setInterval 和 clearInterval 可以实现各种定时任务，比如定时更新页面内容、实现动画效果或者计时器等

👉以上代码会创建一个定时器，每秒钟更新一次倒计时。你可以将目标日期和时间修改为你希望的倒计时结束时间。在控制台输出中，你将看到剩余的天数、小时、分钟和秒数。当倒计时结束后，定时器会被停止，并输出"倒计时结束"。

✏️二、按钮点击发送，10秒内被禁用

🚀首先附上源码

效果图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="//unpkg.com/layui@2.8.8/dist/css/layui.css" rel="stylesheet">
    <style>
 .sendingEmailCode{
    border: 1px solid grey;
    border-radius: 5px;
    height: 30px;
    width: 70px;
    background: white;
    /* cursor:no-drop */
    cursor: pointer;
    transition: all 0.2s ease-out;
}
.sendingEmailCode:hover{
    background: rgb(195, 236, 177);
    border: 1px solid rgb(195, 236, 177);
    font-weight: bold;
}
    </style>
</head>
<body>
    
    <button  class = "sendingEmailCode" onclick="sendingEmailCodes()">发送</button>


</body>
<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<script src="//unpkg.com/layui@2.8.8/dist/layui.js"></script>
<script>

/***
 * 发送邮件
 */
 function sendingEmailCodes(){


layui.use(['layer','jquery'],function(){
    //调用jquery里面封装的方法
    var element = layui.element ;
    var layer = layui.layer ;
    var $ = layui.jquery ;
 
    //定义一个变量存放时长
    var total = 10 ;

    //三十秒禁用按钮
   var time = setInterval(function(){
        total-- ;
        $(".sendingEmailCode").text("发送("+total+"秒)")
        .attr('disabled',true)
        .css('background','rgb(195, 236, 177)')
        .css('border','1px solid rgb(195, 236, 177)')
        .css('cursor','no-drop') ;    
        if(total===0){
            clearInterval(time) ;//清除定时器
             $(".sendingEmailCode").text("重新发送")
            .attr('disabled',false)
            .css('background','white')
            .css('border','1px solid grey')
            .css('cursor','pointer') ; 
            $(".sendingEmailCode").hover(function(){
                $(this)
                .attr('disabled',false)
                .css('background','rgb(195, 236, 177)')
                .css('border','1px solid rgb(195, 236, 177)')
                .css('cursor','pointer') ; 
            },function(){
                $(this)
                .attr('disabled',false)
                .css('background','white')
                .css('border','1px solid grey')
                .css('cursor','pointer') ;
            })
        }
    },1000)
})
}
</script>
</html>

👉附上源码，不过多解读了，大家可以C+V去测试测试

🚀同样我也解读一下相关的关键字吧

👉setInterval 和 clearInterval 是 JavaScript 中用于处理定时任务的函数。

setInterval 函数用于设置一个周期性的定时任务，它接受两个参数：一个函数和一个时间间隔（以毫秒为单位）。该函数会在每个时间间隔之后被调用一次，从而创建一个循环执行的效果。例如，setInterval(updateCountdown, 1000) 将会每秒钟调用一次 updateCountdown 函数。

clearInterval 函数用于停止由 setInterval 创建的定时任务。它接受一个参数，即要停止的定时任务的标识符（也就是 setInterval 返回的值）。通过调用 clearInterval 并传递定时任务的标识符，可以停止这个定时任务的执行。

使用 setInterval 和 clearInterval 可以实现各种定时任务，比如定时更新页面内容、实现动画效果或者计时器等