JS实战(京东秒杀)
<!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实战(京东秒杀)的更多相关文章
- 入门移动端混合开发 实战京东 APP(完整更新)
课程资料获取链接:点击这里 混合开发入门 主流开发方案实战京东移动端APP 无需原生开发基础,也能完美呈现京东商城.本课程融合vue.Android.IOS等目前流行的前端和移动端技术,混合开发经典电 ...
- 《Node.js实战(双色)》作者之一——吴中骅访谈录
- Webfrom 生成流水号 组合查询 Repeater中单选与复选控件的使用 JS实战应用
Default.aspx 网页界面 <%@ Page Language="C#" AutoE ...
- Webfrom 生成流水号 组合查询 Repeater中单选与复选控件的使用 JS实战应用
Default.aspx 网页界面 <%@ Page Language="C#" AutoE ...
- Js实现京东无延迟菜单效果(demo)
一个端午节,外面人山人海,又那么热,我认为宅在家里看看慕课网,充实自己来的实际... 这是一个js实现京东无延迟菜单效果,感觉很好,分享给大家... 1.开发基本的菜单结构 2.开发普通的二级菜单效果 ...
- iKcamp团队制作|基于Koa2搭建Node.js实战项目教学(含视频)☞ 环境准备
安装搭建项目的开发环境 视频地址:https://www.cctalk.com/v/15114357764004 文章 Koa 起手 - 环境准备 由于 koa2 已经开始使用 async/await ...
- vue.js实战——购物车练习(包含全选功能)
vue.js实战第5章 54页的练习1 直接放代码好了,全选的部分搞了好久,代码好像有点啰嗦,好在实现功能了(*^▽^*) HTML: <!DOCTYPE html> <html l ...
- 【Vue.js实战案例】- Vue.js递归组件实现组织架构树和选人功能
大家好!先上图看看本次案例的整体效果. 浪奔,浪流,万里涛涛江水永不休.如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不 ...
- Node.js实战(二)之HelloWorld示例
经过前面的Node.js实战(一)之概述 想必你应该对Node.js的概念.应用场景.优缺点等有个大致的了解,同时你本地Windows或者Linux上已经准备好了Node.js环境. 下面我们来进入每 ...
随机推荐
- [LC] 404. Sum of Left Leaves
Find the sum of all left leaves in a given binary tree. Example: 3 / \ 9 20 / \ 15 7 There are two l ...
- [LC] 167. Two Sum II - Input array is sorted
Given an array of integers that is already sorted in ascending order, find two numbers such that the ...
- [LC] 165. Compare Version Numbers
Compare two version numbers version1 and version2.If version1 > version2 return 1; if version1 &l ...
- HttpClient GET和POST请求
package com.rogue.hclient; import java.io.BufferedReader; import java.io.IOException; import java.io ...
- makefile中的变量赋值
在makefile中赋值方式有:'='.':='.'?='和'+='. A = a $(B) B = b all: echo $(A) #运行结果:echo a b a b 这种赋值方式是没有先后顺序 ...
- python自动化测试之函数(匿名函数lambda和三目运算等(高级用法))
''' 匿名函数: lambda ''' def Add(a,b): print(a+b) Add(2,3) per = lambda a,b:a+b print(per(2,3)) ''' 三目运算 ...
- ionic2踩坑之兼容android4.3及以下版本
一个命令就行了 ionic plugin add cordova-plugin-crosswalk-webview --save 执行完之后重新打包. 但是如果要兼容4.0及以下的话.... 帮不了你 ...
- Java - 面向对象练习 - market
Marketpackage market; public class Market { private String marname; private Product[] producta ...
- 学习和使用 Styled Layer Descriptor SLD样式文件
1. SLD 文件大致作用,可以浏览下示意图: 点要素的符号化:http://docs.geoserver.org/stable/en/user/styling/sld-cookbook/points ...
- drf分页组件补充
drf偏移分页组件 pahenations.py from rest_framework.pagination import LimitOffsetPagination class MyLimitOf ...