<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>js京东秒杀</title>

     <style>

         * {

             margin: 0;

             padding: 0;

         }

         .box {

             width: 190px;

             height: 270px;

             text-align: center;

             margin: 100px auto;

             background: #dd0000;

             color: white;

             padding-top: 40px;

             box-sizing: border-box;

         }

         .box > h3 {

             font-size: 26px;

         }

         .box > p:nth-of-type(1) {

             margin-top: 5px;

             color: rgba(255, 255, 255, 0.5);

         }

         .box > i {

             display: inline-block;

             margin-top: 5px;

             margin-bottom: 5px;

             font-size: 40px;

         }

         .box > .time {

             margin-top: 10px;

             display: flex;

             justify-content: center;

         }

         .time > div {

             width: 40px;

             height: 40px;

             line-height: 40px;

             text-align: center;

             font-weight: bold;

             background: #333;

             position: relative;

         }

         .time > .minute {

             margin: 0 10px;

         }

         .time > div::before {

             content: "";

             display: block;

             width: 100%;

             height: 2px;

             background: #d00;

             position: absolute;

             left: 0;

             top: 50%;

             transform: translateY(-50%);

         }

     </style>

     <link rel="stylesheet" href="fonts/iconfont.css">

 </head>

 <body>

 <div class="box">

     <h3>京东秒杀</h3>

     <p>FLASH DEALS</p>

     <i class="iconfont icon-lightningbshandian"></i>

     <p>本场距离结束还剩</p>

     <div class="time">

         <div class="hour"></div>

         <div class="minute"></div>

         <div class="second"></div>

     </div>

 </div>

 <script>

     //1.获取到需要操作的元素

     let oHour = document.querySelector(".hour");

     let oMinute = document.querySelector(".minute");

     let oSecond = document.querySelector(".second");

     //2.获取时间的差值

     let remDate = new Date("2020-3-14 22:00:00");

     setTime(remDate);//设置初始化时间

     //4.利用定时器实现倒计时

     setInterval(function () {

         setTime(remDate);

     }, 1000);

     /**

      * 3.将差值设置给元素

      */

     function setTime(remDate) {

         let obj = getDifferTime(remDate);

         oHour.innerText = obj.hour;

         oMinute.innerText = obj.minute;

         oSecond.innerText = obj.second;

     }

     /**

      * 获得时间差值

      * @param remDate 未来的时间

      * @param curDate 当前的时间

      * @returns {{hour: any | number, day: any | number, minute: any | number, second: any | number}}

      */

     function getDifferTime(remDate, curDate = new Date()) {

         // 1.得到两个时间之间的差值(毫秒)

         let differTime = remDate - curDate;

         // 2.得到两个时间之间的差值(秒)

         let differSecond = differTime / 1000;

         // 3.利用相差的总秒数 / 每一天的秒数 = 相差的天数

         let day = Math.floor(differSecond / (60 * 60 * 24));

         day = day >= 10 ? day : "0" + day;

         // 4.利用相差的总秒数 / 小时 % 24;

         let hour = Math.floor(differSecond / (60 * 60) % 24);

         hour = hour >= 10 ? hour : "0" + hour;

         // 5.利用相差的总秒数 / 分钟 % 60;

         let minute = Math.floor(differSecond / 60 % 60);

         minute = minute >= 10 ? minute : "0" + minute;

         // 6.利用相差的总秒数 % 秒数

         let second = Math.floor(differSecond % 60);

         second = second >= 10 ? second : "0" + second;

         return {

             day: day,

             hour: hour,

             minute: minute,

             second: second,

         }

     }

 </script>

 </body>

 </html>

JS实战（京东秒杀）的更多相关文章

  1. 入门移动端混合开发 实战京东 APP（完整更新）

    课程资料获取链接:点击这里 混合开发入门 主流开发方案实战京东移动端APP 无需原生开发基础,也能完美呈现京东商城.本课程融合vue.Android.IOS等目前流行的前端和移动端技术,混合开发经典电 ...

  2. 《Node.js实战（双色）》作者之一——吴中骅访谈录

  3. Webfrom 生成流水号 组合查询 Repeater中单选与复选控件的使用 JS实战应用

                                             Default.aspx 网页界面 <%@ Page Language="C#" AutoE ...

  4. Webfrom 生成流水号 组合查询 Repeater中单选与复选控件的使用 JS实战应用

                                             Default.aspx 网页界面 <%@ Page Language="C#" AutoE ...

  5. Js实现京东无延迟菜单效果(demo)

    一个端午节,外面人山人海,又那么热,我认为宅在家里看看慕课网,充实自己来的实际... 这是一个js实现京东无延迟菜单效果,感觉很好,分享给大家... 1.开发基本的菜单结构 2.开发普通的二级菜单效果 ...

  6. iKcamp团队制作｜基于Koa2搭建Node.js实战项目教学（含视频）☞ 环境准备

    安装搭建项目的开发环境 视频地址:https://www.cctalk.com/v/15114357764004 文章 Koa 起手 - 环境准备 由于 koa2 已经开始使用 async/await ...

  7. vue.js实战——购物车练习（包含全选功能）

    vue.js实战第5章 54页的练习1 直接放代码好了,全选的部分搞了好久,代码好像有点啰嗦,好在实现功能了(*^▽^*) HTML: <!DOCTYPE html> <html l ...

  8. 【Vue.js实战案例】- Vue.js递归组件实现组织架构树和选人功能

    大家好!先上图看看本次案例的整体效果. 浪奔,浪流,万里涛涛江水永不休.如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不 ...

  9. Node.js实战(二)之HelloWorld示例

    经过前面的Node.js实战(一)之概述 想必你应该对Node.js的概念.应用场景.优缺点等有个大致的了解,同时你本地Windows或者Linux上已经准备好了Node.js环境. 下面我们来进入每 ...

随机推荐

  1. C#函数的基础应用

    C#函数的基础应用 函数之前的知识回顾 数据类型--变量常量--运算符表达式--语句(顺序,分支,循环)--数组--函数 程序里的函数:能完成一个相对独立功能的代码模块. 数学里的函数:高度抽象. 函 ...

  2. cs231n spring 2017 lecture16 Adversarial Examples and Adversarial Training

    (没太听明白,以后再听) 1. 如何欺骗神经网络? 这部分研究最开始是想探究神经网络到底是如何工作的.结果人们意外的发现,可以只改变原图一点点,人眼根本看不出变化,但是神经网络会给出完全不同的答案.比 ...

  3. ASP.NET ASHX 一般处理程序教程

    你不想创建一个普通ASP.NET的Web窗体页.而又要通过一个查询字符串返回一个动态的图片.XML或者非HTML网页.这是一个用C#编程语言编写的使用ASHX(一般处理程序)的简单教程. 简介 首先, ...

  4. [LC] 64. Minimum Path Sum

    Given a m x n grid filled with non-negative numbers, find a path from top left to bottom right which ...

  5. 输入一个url之后到底发生了什么 - Hurry

    背景 最近学习到 nginx 方向代理发现,nginx 可以将你的请求以 http 块的 server 形式代理到请求的域名或者 ip 地址. 一个简单的 nigx 配置如下: 12345678 se ...

  6. python开发之Pandas

    正确的对DataFrame reverse运算 data.reindex(index=data.index[::-]) or simply: data.iloc[::-] will reverse y ...

  7. 题解 P1951 【收费站_NOI导刊2009提高（2）】

    查看原题请戳这里 核心思路 题目让求最大费用的最小值,很显然这道题可以二分,于是我们可以二分花费的最大值. check函数 那么,我们该怎么写check函数呢? 我们可以删去费用大于mid的点以及与其 ...

  8. Proto3使用指南

    这篇指南讲述如何使用Protocol Buffers来结构化你的Protocol Buffer数据,包括.proto文件语法以及如何从.proto文件生成你的访问类型.本文主要涵盖了proto3的语法 ...

  9. runR

    Linux下使用R 运行linux下的R脚本 编写R文件 新建后缀名为R的文件 写入R程序 在脚本首行加入 1 运行R文件 这里有两种方式 大专栏  runR进入R的环境">进入R的环 ...

  10. SurfaceView和TextureView的区别

    SurfaceView和TextureView均继承于android.view.View,与其它View不同的是,两者都能在独立的线程中绘制和渲染,在专用的GPU线程中大大提高渲染的性能.Surfac ...