倒计时案例

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

egg55

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

阅读量70

点赞数

分类专栏：动态网页

本文链接：https://blog.csdn.net/qq_41619968/article/details/124306179

版权

javascript html5

动态网页专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style>
  div {
    margin: 200px;
  }

  span {
    /* 转换为行内块元素 */
    display: inline-block;
    width: 40px;
    height: 40px;
    background-color: #333;
    font-size: 20px;
    color: #fff;
    text-align: center;
    line-height: 40px;
  }
</style>
</head>
<body>
<div>
  <!-- 行内元素 -->
  <span class="hour">时</span>
  <span class="minute">分</span>
  <span class="second">秒</span>
</div>
<script>
  var hour=document.querySelector('.hour');
  var minute=document.querySelector('.minute');
  var second=document.querySelector('.second');
  var times1=+new Date('2022-4-20 20:10:00');
  function jishi(){
    var nowtime=+new Date();
    var time=(times1-nowtime)/1000;
    var h=parseInt(time/60/60%24);
    h=h<10 ? '0'+h : h;
    hour.innerHTML=h;
    var m=parseInt(time/60%60);
    m=m<10 ? '0'+m : m;
    minute.innerHTML=m;
    var s=parseInt(time%60);
    s=s<10 ? '0'+s : s;
    second.innerHTML=s;
  }
  jishi();
  setInterval(jishi,1000);
</script>
</body>
</html>