JavaScript实现秒杀倒计时

最新推荐文章于 2024-04-15 10:09:06 发布

.ASEN.

最新推荐文章于 2024-04-15 10:09:06 发布

阅读量1.3k

点赞数

分类专栏： JavaScript作业文章标签： html5

本文链接：https://blog.csdn.net/weixin_47304332/article/details/124334356

版权

JavaScript作业专栏收录该内容

14 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    div{
      width:300px;
      text-align: center;
      margin: 0 auto;
    }
    span{
      display: block;
      margin-left: 5px;
      font-size: 20px;
      float: left;
      width: 40px;
      height: 40px;
      line-height: 40px;
      background-color: #000000;
      color: #ffffff;
    }
  </style>
</head>
<body>
  <div>
  	<span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
  <script>
    function inputTime(dateTime){
      //取当前系统时间
      var nowTime = new Date();
      //转换输入时间
      var inputTime = new Date(dateTime);
      //时间差(毫秒数)
      var times = inputTime.getTime() - nowTime.getTime();

      times = times / 1000; //转换为秒数

      var day = parseInt(times / 60 / 60 / 24);        //天数
      var hour = parseInt(times / 60 / 60 % 24);      //小时数
      var minute = parseInt(times / 60 % 60);         //分钟数
      var second = parseInt(times % 60);              //秒数

      var spans = document.querySelectorAll("span");
      
	  spans[0].innerText = day ;   <!--例图和代码不符，代码后期修改后-->
      spans[1].innerText = hour ;  <!--图片懒得更新了-->-->
      spans[2].innerText = minute ;
      spans[3].innerText = second ;
    }

    window.setInterval(function (){
      inputTime("2022-04-21 00:00:00");
    },1000);

  </script>
</body>
<html>

在这里插入图片描述

.ASEN.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript实现秒杀倒计时

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width:300px; text-align: center; margin: 0 auto; } span{ display: block
复制链接

扫一扫

专栏目录