JavaScript实现秒杀倒计时效果（附源码）

正文

整体效果如图

HTML结构如下：

<div class="box"><span class="hour">1</span>:<span class="minute">2</span>:<span class="second">3</span></div>

大盒子装着三个小盒子，小盒子1、2、3依次为时、分、秒

js代码

<script>// 1.获取元素var hour = document.querySelector('.hour');          //小时的盒子var minute = document.querySelector('.minute');     //分钟的盒子var second = document.querySelector('.second');     //秒数var inputTime = +new Date('2020-8-15 18:00:00');   //返回的是用户输入时间总的毫秒数console.log(inputTime);countDown();  //我们先调用一次这个函数，防止第一次刷新页面有空白// 2.开启定时器setInterval(countDown,1000);function countDown() {var nowTime = +new Date();   //返回的是当前时间总的总的毫秒数var times = (inputTime - nowTime) /1000;  //times是剩余的总的秒数var h = parseInt(times / 60 / 60 % 24);    //时h = h < 10 ? '0' + h : h;hour.innerHTML = h;   //把剩余的小时 给小时的盒子var  m = parseInt(times / 60 % 60);  //分m = m < 10 ? '0' + m : m;minute.innerHTML = m;var s = parseInt(times % 60);   //当前的秒s = s < 10 ? '0' + s : s;second.innerHTML = s;}</script>

inputTime设置目标时间

设置一个定时器，每1000毫秒（也就是1秒）执行一次countTime函数，countTime函数获取当前时间再，将目标时间减去当前时间就是倒数时间，再对该时间进行具体操作

页面一开启就打开定时器

JavaScript实现秒杀倒计时效果（附源码）相关推荐

JAVA计算机毕业设计商品限时秒杀系统（附源码、数据库）
JAVA计算机毕业设计商品限时秒杀系统(附源码.数据库) 目运行环境项配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webstorm也行)+ Eclispe( ...
html仿微信滑动删除,使用Vue实现移动端左滑删除效果附源码
左滑删除在移动端是很常见的一种操作,常见于删除购物车中的商品,删除收藏夹中文章等等场景.我们只需要手指按住要删除的对象,然后轻轻向左滑动,便会出现删除按钮,然后点击删除按钮即可删除对象. 点击下载源码 ...
php jquery ajax登录,jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)
弹出层主要用于展示丰富的页面信息,还有一个更好的应用是弹出表单层丰富交互应用.常见的应用有弹出登录表单层,用户提交登录信息,后台验证登录成功后,弹出层消失,主页面局部刷新用户信息.本文我们将给大家介绍 ...
Android简单、高性能的高斯模糊（毛玻璃）效果(附源码)
毛玻璃效果相信很多朋友都眼红很久了, 隔壁ios系统对高斯模糊早就大范围使用了, 咱们Android却丝毫不为所动, 于是就只能靠广大开发者咯. 这是目前市面上性能最高的方案, 也不知道最初是哪位大神 ...
CSS篇--水滴效果(附源码)
效果展示源码 <!DOCTYPE html> <html lang="en"> <head><meta charset="UT ...
一个炫酷的opengles2.0翻页效果（安卓上opengles2.0 翻书效果附源码）
写了一个opengles2.0的小效果,平台是安卓,给各位朋友们看一看,有兴趣想要源码的朋友可以email我 5358951@qq.com. 先看效果前言 1.在安卓上实用opengles进行开 ...
html5 相册系统php源码,HTML5 CSS3打造相册效果附源码下载
今天偶然发现电脑里面还有这样的一个例子,感觉效果还不错,不记得啥时候下载的了,也好久没上w3cfuns了,怀念学习前台的日子,给大家分享下. 效果图: 效果是不是还是很不错的,最主要的是没有使用一行j ...
html5效果源码,10款web前端值得学习的 HTML5 效果附源码
1.jQuery右侧Tab选项卡的焦点图插件这是一款基于jQuery的焦点图插件,和之前介绍的jQuery焦点图插件类似,它以淡入淡出的动画方式来切换图片,该焦点图插件的特点是右侧有一排Tab选项卡 ...
html图片自动滚动播放器,jQuery+css实现图片滚动效果(附源码)
bxCarousel参数说明: move:每次滚动移动图片的数量,默认为4. display_num:展示图片的数量,默认为4. speed:图片滚动速度,默认为500毫秒. margin:图片间的间 ...
简单玩转ViewPager+Fragment动画效果，实现京东淘宝物流卡片效果 (附源码)
物流卡片Demo 新版的京东和淘宝有一个交互感觉不错, 待收货订单会有类似探探那样的卡片效果, 滑动查看下一条物流的信息, 近期UI部门说要做这个效果, 于是我就写了一个Demo, 现在分享出来和大家 ...

JavaScript实现秒杀倒计时效果（附源码）

JavaScript实现秒杀倒计时效果（附源码）相关推荐

最新文章

热门文章