zoukankan      html  css  js  c++  java
  • 简单倒计时

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    * {
    margin: 0;
    padding: 0;
    }

    .box {
    text-align: center;
    margin: 20px auto;
    300px;
    height: 300px;
    border: 3px dashed orange;
    }

    p {
    padding: 50px;
    }
    </style>
    </head>
    <script src="jquery.js" type="text/javascript"></script>
    <body>
    <div class="box">
    <p class="time">倒计时</p>
    <button>抢购</button>
    </div>
    <script type="text/javascript">
    $(function () {
    var now = new Date();//获取当前时间
    var end = new Date(2018, 8, 12, 0, 0, 0);//结束的时间:年,月,日,分,秒(月的索引是0~11)注意月份要在当前月份-1
    /*两个时间相减,得到的是毫秒ms,变成秒*/
    var result = Math.floor(end - now) / 1000;

    var interval = setInterval(fn, 1000); //定时器
    /*封装减1秒的函数*/
    function fn() {
    if (result > 1) { //如果结果>1
    result = result - 1;//就让结果每秒减1
    var second = Math.floor(result % 60); // 计算秒 ,取余
    var minite = Math.floor((result / 60) % 60); //计算分 ,换算有多少分,取余,余出多少秒
    var hour = Math.floor((result / 3600) % 24); //计算小时,换算有多少小时,取余,24小时制除以24,余出多少小时
    var day = Math.floor(result / (3600 * 24)); //计算天 ,换算有多少天

    $(".time").html(day + "天" + hour + "小时" + minite + "分" + second + "秒");
    } else {
    alert("倒计时结束!");
    window.clearInterval(interval);//这里可以添加倒计时结束后需要执行的事件
    }
    }
    });
    </script>
    </body>
    </html>
  • 相关阅读:
    Repository中进行模糊查询
    Spring jpa添加查询条件
    java后端repository层中进行模糊查询
    MyBatis小白问题 1、Invalid bound statement (not found): com.itheima.dao.UserDao.findAll,2、Resources.getResourceAsStream()报错
    Date类型做加减运算
    时间格式转换
    mysql-支持的数据类型
    mysql—表的完整性约束
    数据库—表操作(第二章)
    mysql—使用python操作mysql数据库(第五章)
  • 原文地址:https://www.cnblogs.com/zyyweb/p/9629896.html
Copyright © 2011-2022 走看看