zoukankan      html  css  js  c++  java
  • JS 实现春节倒计时效果

     1 <script>
     2         // 获取元素
     3         var tian = document.querySelector('.tian')
     4         var shi = document.querySelector('.shi')
     5         var fen = document.querySelector('.fen')
     6         var miao = document.querySelector('.miao')
     7 
     8         //春节日期
     9         var NewYearTime = +new Date('2021-02-12 00:00:00')
    10 
    11         GetTime()
    12         // 自动重复调用函数,间隔一秒
    13         setInterval(GetTime, 1000)
    14 
    15         // 获取时间函数
    16         function GetTime() {
    17             var nowtime = +new Date()                   //返回自1970年1月1日至今的总毫秒数
    18             var times = (NewYearTime - nowtime) / 1000 //得到用户输入的时间-当前时间的毫秒值 / 1000 = 剩余秒总数
    19 
    20             var t = parseInt(times / 60 / 60 / 24)  //得到天
    21             t = t < 10 ? '0' + t : t
    22             tian.innerHTML = t + ' 天'
    23             var h = parseInt(times / 60 / 60 % 24)  //得到小时
    24             h = h < 10 ? '0' + h : h                //三元运算,如果小于10,就在十位补0,如果大于10 就正常输出
    25             shi.innerHTML = h + ' 小时'
    26             var m = parseInt(times / 60 % 60)       //取得分钟
    27             m = m < 10 ? '0' + m : m
    28             fen.innerHTML = m + ' 分钟'
    29             var s = parseInt(times % 60)            //取得秒
    30             s = s < 10 ? '0' + s : s
    31             miao.innerHTML = s + ' 秒'
    32         }
    33     </script>

    效果图

    时间若流水,恍惚间逝去
  • 相关阅读:
    单元测试笔记
    centos7安装rabbitmq
    spring cache之redis使用示例
    ObjectMapper序列化时间
    安装alertmanager
    prometheus安装
    Ribbon配置随访问策略
    优化if..else代码的两种方式
    spring bean的生命周期
    idea热部署
  • 原文地址:https://www.cnblogs.com/alanshreck/p/14267388.html
Copyright © 2011-2022 走看看