zoukankan      html  css  js  c++  java
  • 使用moment实现倒计时

    代码:

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
      </head>

      <body>
        <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
        <script>
          // 再来一个使用了moment库实现的倒计时
          function showTime(time) {
            let start = moment(new Date()); //获取开始时间
            let end = moment(new Date(time)); //结束时间
            let diff = end.diff(start); //时间差
            var timediff = Math.round(diff / 1000);
            //获取还剩多少天
            var day = parseInt(timediff / 3600 / 24);
            //获取还剩多少小时
            var hour = parseInt((timediff / 3600) % 24);
            //获取还剩多少分钟
            var minute = parseInt((timediff / 60) % 60);
            //获取还剩多少秒
            var second = timediff % 60;
            //输出还剩多少时间
            console.log(
              day + "天" + timerFilter(hour) + "时" + timerFilter(minute) + "分" + timerFilter(second) + "秒"
            );
            //给小于10的数值前面加 0
            function timerFilter(params) {
              if (params - 0 < 10) {
                return "0" + params;
              } else {
                return params;
              }
            }
            window.requestAnimationFrame(() => {
              showTime(time);
            });
          }
          showTime("2021/8/4");   //  showTime("2021/8/4 11:12:13");
        </script>
      </body>
    </html>
  • 相关阅读:
    springMVC中@RequestParam和@RequestBody的作用
    java 中Excel的导入导出
    数据库字段名称与实体类属性不一致的处理措施
    linux下解压命令大全
    linux 下 cat
    mysqli
    解析php mysql 事务处理回滚操作(附实例)
    css 样式(checkbox开关、css按钮)
    cetons 怎么强制卸载 PHP
    yhdsir@function:php
  • 原文地址:https://www.cnblogs.com/shidawang/p/15091001.html
Copyright © 2011-2022 走看看