zoukankan      html  css  js  c++  java
  • JS实战(京东秒杀)

      1 <!DOCTYPE html>
      2 <html lang="en">
      3 <head>
      4     <meta charset="UTF-8">
      5     <title>js京东秒杀</title>
      6 
      7     <style>
      8         * {
      9             margin: 0;
     10             padding: 0;
     11         }
     12 
     13         .box {
     14              190px;
     15             height: 270px;
     16             text-align: center;
     17             margin: 100px auto;
     18             background: #dd0000;
     19             color: white;
     20             padding-top: 40px;
     21             box-sizing: border-box;
     22         }
     23 
     24         .box > h3 {
     25             font-size: 26px;
     26         }
     27 
     28         .box > p:nth-of-type(1) {
     29             margin-top: 5px;
     30             color: rgba(255, 255, 255, 0.5);
     31         }
     32 
     33         .box > i {
     34             display: inline-block;
     35             margin-top: 5px;
     36             margin-bottom: 5px;
     37             font-size: 40px;
     38         }
     39 
     40         .box > .time {
     41             margin-top: 10px;
     42             display: flex;
     43             justify-content: center;
     44         }
     45 
     46         .time > div {
     47              40px;
     48             height: 40px;
     49             line-height: 40px;
     50             text-align: center;
     51             font-weight: bold;
     52             background: #333;
     53             position: relative;
     54         }
     55 
     56         .time > .minute {
     57             margin: 0 10px;
     58         }
     59 
     60         .time > div::before {
     61             content: "";
     62             display: block;
     63              100%;
     64             height: 2px;
     65             background: #d00;
     66             position: absolute;
     67             left: 0;
     68             top: 50%;
     69             transform: translateY(-50%);
     70         }
     71     </style>
     72     <link rel="stylesheet" href="fonts/iconfont.css">
     73 </head>
     74 <body>
     75 <div class="box">
     76     <h3>京东秒杀</h3>
     77     <p>FLASH DEALS</p>
     78     <i class="iconfont icon-lightningbshandian"></i>
     79     <p>本场距离结束还剩</p>
     80     <div class="time">
     81         <div class="hour"></div>
     82         <div class="minute"></div>
     83         <div class="second"></div>
     84     </div>
     85 </div>
     86 <script>
     87     //1.获取到需要操作的元素
     88     let oHour = document.querySelector(".hour");
     89     let oMinute = document.querySelector(".minute");
     90     let oSecond = document.querySelector(".second");
     91 
     92     //2.获取时间的差值
     93     let remDate = new Date("2020-3-14 22:00:00");
     94     setTime(remDate);//设置初始化时间
     95     //4.利用定时器实现倒计时
     96     setInterval(function () {
     97         setTime(remDate);
     98     }, 1000);
     99 
    100     /**
    101      * 3.将差值设置给元素
    102      */
    103     function setTime(remDate) {
    104         let obj = getDifferTime(remDate);
    105         oHour.innerText = obj.hour;
    106         oMinute.innerText = obj.minute;
    107         oSecond.innerText = obj.second;
    108     }
    109 
    110 
    111     /**
    112      * 获得时间差值
    113      * @param remDate 未来的时间
    114      * @param curDate 当前的时间
    115      * @returns {{hour: any | number, day: any | number, minute: any | number, second: any | number}}
    116      */
    117     function getDifferTime(remDate, curDate = new Date()) {
    118         // 1.得到两个时间之间的差值(毫秒)
    119         let differTime = remDate - curDate;
    120         // 2.得到两个时间之间的差值(秒)
    121         let differSecond = differTime / 1000;
    122         // 3.利用相差的总秒数 / 每一天的秒数 = 相差的天数
    123         let day = Math.floor(differSecond / (60 * 60 * 24));
    124         day = day >= 10 ? day : "0" + day;
    125         // 4.利用相差的总秒数 / 小时 % 24;
    126         let hour = Math.floor(differSecond / (60 * 60) % 24);
    127         hour = hour >= 10 ? hour : "0" + hour;
    128         // 5.利用相差的总秒数 / 分钟 % 60;
    129         let minute = Math.floor(differSecond / 60 % 60);
    130         minute = minute >= 10 ? minute : "0" + minute;
    131         // 6.利用相差的总秒数 % 秒数
    132         let second = Math.floor(differSecond % 60);
    133         second = second >= 10 ? second : "0" + second;
    134         return {
    135             day: day,
    136             hour: hour,
    137             minute: minute,
    138             second: second,
    139         }
    140     }
    141 </script>
    142 </body>
    143 </html>
  • 相关阅读:
    修复 Visual Studio Error “No exports were found that match the constraint”
    RabbitMQ Config
    Entity Framework Extended Library
    Navisworks API 简单二次开发 (自定义工具条)
    NavisWorks Api 简单使用与Gantt
    SQL SERVER 竖表变成横表
    SQL SERVER 多数据导入
    Devexpress GridControl.Export
    mongo DB for C#
    Devexress XPO xpPageSelector 使用
  • 原文地址:https://www.cnblogs.com/edcoder/p/12492608.html
Copyright © 2011-2022 走看看