<!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. [LC] 222. Count Complete Tree Nodes

    Given a complete binary tree, count the number of nodes. Note: Definition of a complete binary tree ...

  2. ACG记录整理

    资料来源 日文维基百科 bangumi番组计划 中文维基百科 百度百科 豆瓣电影 资料类型 テレビアニメ‎ OVA‎ アニメ映画‎ Webアニメ‎ 内容说明 番名,带超链接介绍,尽量选用国内网站介绍, ...

  3. 二、RabbitMQ简介及AMQP协议

    RabbitMQ简介 RabbitMQ是开源的消息代理和队列服务器,是由Erlang语言开发的,基于AMQP协议(Advanced Message Queuing Protocol高级消息队列协议)的 ...

  4. java基础之异常 · fossi

    在开发中,异常处理是一个不可绕开的话题,我们对于异常的处理已经非常熟练了,对于异常本身的概念.用法等不再赘述了,直接结合面试问题来加深对异常的理解吧. Throwable 可以用来表示任何可以作为异常 ...

  5. 如何在sublime中调试html文件

    一.安装View In Browser插件 快捷键 Ctrl+Shift+P(菜单栏Tools->Command Paletter),输入 pcip选中Install Package并回车,输入 ...

  6. Laravel 队列使用

    触发 任务的触发,主要的实现是在IlluminateFoundationBusDispatchesJobs这个trait中实现的,其只包含两个方法 protected function dispatc ...

  7. 免密码 ssh 到其它机器

    背景:在配置 hadoop 的时候这样设置会比较方便.目标:A 机器上输入 ssh root@B 可以直接访问,不需要输入密码 步骤: 首先在 A 机器上生成密钥对,一路回车 1 ssh-keygen ...

  8. JavaScript中的document.fullscreenEnabled

    本文主要讲述了: 什么是document.fullscreenEnabled 作用 兼容性 正文 什么是document.fullscreenEnabled document.fullscreenEn ...

  9. Android Pay正式启用 支付宝们还好吗

    Pay正式启用 支付宝们还好吗" title="Android Pay正式启用 支付宝们还好吗"> 苹果发布会上能够真正让人眼前一亮的产品并不多,但对于" ...

  10. 安卓权威编程指南 挑战练习 25章 深度优化 PhotoGallery 应用

    你可能已经注意到了,提交搜索时, RecyclerView 要等好一会才能刷新显示搜索结果.请接受挑战,让搜索过程更流畅一些.用户一提交搜索,就隐藏软键盘,收起 SearchView 视图(回到只显示 ...