JavaScript倒计时

最新推荐文章于 2023-02-11 17:17:44 发布

正在努力的路路

最新推荐文章于 2023-02-11 17:17:44 发布

阅读量133

点赞数 2

分类专栏：笔记

本文链接：https://blog.csdn.net/m0_51562385/article/details/110939336

版权

笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

利用JavaScript基础写一个倒计时

// An highlighted block
<!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>
    <style>
    *{
        margin: 0;
        padding: 0;
    }
    div{
        width: 200px;
        height: 50px;
        margin: 50px auto;
        display: flex;
    }
    div span{
        background: #333333;
        color: white;
        flex: 1;
        width: 55px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        border: 1px solid #000;
        margin-left: 10px;
        border-radius: 5px;
        box-shadow: 0 0 3px 3px rgb(102, 102, 155),0 0 3px 3px green;
    }
    </style>
</head>
<body>
    <div>
        <!-- 设置四个小盒子分别显示 天数,时,分,秒 -->
        <span class="day"></span>
        <span class="hour"></span>
        <span class="minute"></span>
        <span class="second"></span>
    </div>
    <script>
        // 分别获取四个盒子
        var days=document.querySelector('.day');
        var hour=document.querySelector('.hour');
        var minute=document.querySelector('.minute');
        var second=document.querySelector('.second');
        var inputTime= +new Date('2020-12-15 18:00:00');//设置目标日期
        countDown();
        // 第一次执行也是也是间隔了一秒因此页面会有空白,所以在此之前调用一次countDown
        setInterval(countDown,1000);
      function countDown(){
          var nowTime= +new Date();//获取当前的时间 并转为毫秒 以便于后面的计算
          var times=(inputTime-nowTime)/1000;// 将目标日期与目前日期做差得到 倒计时时间 并转为时
          var day=parseInt(times/60/60/24);//取整得到天数
          day=day<10?'0'+day:day;
          days.innerHTML=day+"天";//赋值给days框显示
          var h=parseInt(times/60/60%24);//取整得到时
          h=h<10?'0'+h:h;
          hour.innerHTML=h+"时";//赋值给hour框显示
          var m=parseInt(times/60%60);//取整得到分
          m=m<10?'0'+m:m;
          minute.innerHTML=m+"分";//赋值给minute框
          var s=parseInt(times%60);//取整得到秒
          s=s<10?'0'+s:s;
          second.innerHTML=s+"秒";//赋值给seccend框
      }