JS实现京东倒计时(完整代码)

JS实现京东秒杀倒计时(完整代码)

一.获取图片

二.css实现外观
这里比较简单，就不细说了

三.JS实现倒计时
基本思路：
1.首先使用Date()对象获取当前时间(时间戳)
2.传递参数获取活动开始的时间，两次时间的单位都是秒
3.两个时间相减可得到相距的时间
4.通过计算得到天数，小时，分钟，秒钟
5.使用setInterval(function(){},1000)函数每1秒调用一次倒计时函数(1000为毫秒)
6.调用倒计时函数

四.完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>京东倒计时</title><style>.timeDown-box {position: relative;width: 200px;height: 270px;background: url(../秒杀.png);}.text1 {text-align: center;padding-top: 30px;font-size: 35px;font-weight: 1000;color: white;}.text2 {text-align: center;padding-top: 100px;font-size: 17px;font-weight: 1000;color: white;}#box1,#box2,#box3{position: relative;display: inline-block;width: 30px;height: 30px;background-color: black;padding: 5px;margin-left: 18px;margin-top: 12px;color: white;text-align: center;font-size: 20px;}i {position: absolute;width: 7px;height: 7px;border-radius: 50%;background-color: white;left: 48px;} </style>
</head>
<body><div class="timeDown-box"><div class="text1">京东秒杀</div><div class="text2">18:00点场 距结束</div><div class="timeDown" style="position: relative;"><span id="box1"></span><span id="box2"></span><span id="box3"></span><i style="left: 65px;top: 36px;"></i><i style="left: 65px;top: 23px;"></i><i style="left: 127px;top: 36px;"></i><i style="left: 127px;top: 23px;"></i></div></div><div id = "timer"></div><script>function timeDown(endTime) {var nowTime = new Date();  //开始时间var endTimer = new Date(endTime); //结束时间var totalS = parseInt((endTimer - nowTime) / 1000);  //总的秒数var Days = parseInt(totalS/(60*60*24)); //天数    var mol = totalS % (60*60*24); //取余数var Hours = parseInt(mol / (60*60));if(Hours < 10){Hours = '0' + Hours;}mol = mol % (60*60);var Minutes = parseInt(mol / 60); //分钟if(Minutes < 10){Minutes = '0' + Minutes;}var Seconds = mol % 60;if(Seconds < 10){Seconds = '0' + Seconds;}var id = document.getElementById('timer');var span = document.querySelector('.timeDown').children; //获取spanspan[0].innerHTML = Hours;span[1].innerHTML = Minutes;span[2].innerHTML = Seconds;setInterval(function() {timeDown(endTime);},1000);}timeDown('2021-5-28 10:04:00');</script>
</body>
</html>

JS实现京东倒计时(完整代码)相关推荐

Html+Css+Js五星好评（完整代码+详解）
一,问题描述当鼠标滑过空白的五颗星星时,有预览的颜色填充,当点击鼠标后,颜色填充确定,确定的颜色是绿色,当鼠标预览时,依然有预览色,没有点击鼠标确定时,颜色依然是,上一次的记录,点击了则是当次的好评 ...
前端案例：像素鸟小游戏（js+dom操作，完整代码，附案例素材）
目录一.案例效果二.实现思路三.完整代码+详细注释四.案例素材一.案例效果二.实现思路创建游戏背景板和小鸟,并分别设置相对定位与绝对定位: 初始化背景图的位置: 初始化小鸟的位置: 设置 ...
JS彩色方块倒计时插件代码
下载地址 JS彩色方块倒计时插件,一款适于用各种时间类的倒计时,或者计时功能. dd:
android京东秒杀倒计时,js实现京东秒杀倒计时功能
本文实例为大家分享了js实现京东秒杀倒计时功能的具体代码,供大家参考,具体内容如下首先给大家看看效果图,因为是做的移动端的,所以放大给大家看看局部就行: 关于实现京东秒杀,之前用过其他的方法,今天给 ...
php京东秒杀,js实现京东秒杀倒计时功能
本文实例为大家分享了js实现京东秒杀倒计时功能的具体代码,供大家参考,具体内容如下首先给大家看看效果图,因为是做的移动端的,所以放大给大家看看局部就行: 关于实现京东秒杀,之前用过其他的方法,今天给 ...
Three.js实例详解___旋转的精灵女孩(附完整代码和资源)（三）
Three.js实例详解___旋转的精灵女孩(附完整代码和资源)(三) 本篇目录: 六.完整构建整个[旋转的精灵女孩]实例 (1).新建.启动webGL工程空间 (2).构建项目的目录层次结构 (2. ...
Three.js实例详解___旋转的精灵女孩(附完整代码和资源)（二）
Three.js实例详解___旋转的精灵女孩(附完整代码和资源)(二) 本篇目录: 五.实例中所使用的代码语法详细解释 (1).构建一个三维空间场景 (2).选择一个透视投影相机作为观察点 (a).创 ...
js读取外部json指定字段值完整代码_前端工程化剖析npm的包管理机制（完整版）...
导读现如今,前端开发的同学已经离不开 npm 这个包管理工具,其优秀的包版本管理机制承载了整个繁荣发展的NodeJS社区,理解其内部机制非常有利于加深我们对模块开发的理解.各项前端工程化的配置以加快 ...
Three.js实例详解___旋转的精灵女孩(附完整代码和资源)（一）
Three.js实例详解___旋转的精灵女孩(附完整代码和资源)(一) 本文目录: 一.[旋转的精灵女孩]案例运行效果二.Three.js简介三.Three.js代码正常运行显示条件 (1)不载入 ...

JS实现京东倒计时(完整代码)

JS实现京东倒计时(完整代码)相关推荐

最新文章

热门文章