JavaScript仿京东秒杀倒计时


Posted in Javascript onMarch 17, 2020

本文实例为大家分享了JavaScript仿京东秒杀倒计时的具体代码,供大家参考,具体内容如下

仿京东秒杀倒计时

JavaScript仿京东秒杀倒计时

html代码

<div id="box">
  <div class="txt">秒杀倒计时</div>
  <div class="hour"></div>
  <!-- 小时与分钟之间的冒号 -->
  <span class="h_m">:</span>
  <div class="minute"></div>
  <!-- 分钟与秒之间的冒号 -->
  <span class="m_s">:</span>
  <div class="second"></div>
</div>

css样式代码

*{
   margin: 0;
   padding: 0;
  }
  #box{
   width: 200px;
   height:300px;
   margin: 200px 200px;
   background: red;
   position: relative;
  }
  .txt{
   width: 150px;
   height:50px;
   text-align: center;
   line-height: 50px;
   color: #fff;
   font-size: 30px;
   font-weight: 900;
   position: absolute;
   left: 25px;
   top: 50px;

  }
  .hour{
   left: 20px;
  }
  .h_m{
   left: 68px;
  }
  .minute{
   left: 80px;
  }
  .m_s{
   right: 68px;
  }
  .second{
   left: 140px;
   
  }
  .hour,.minute,.second{
   position: absolute;
   top:200px;
   color: #fff;
   font-size: 20px;
   text-align: center;
   line-height: 40px;
   width: 40px;
   height: 40px;
   background: black;
  }
  .h_m, .m_s{
   color: #fff;
   font-size: 20px;
   font-weight: 900;
   position: absolute;
   bottom: 70px;
  }

js调用函数倒计时代码

//1、获取元素
var hour=document.querySelector('.hour');
var minute=document.querySelector('.minute');
var second=document.querySelector('.second');
var inputTime=+new Date('2020-3-11 20:00:00');//倒计时的结束时间,自己设置时间
countDown();//先调用一次这个函数 防止第一次刷新页面有空白
//2、开启定时器
setInterval(countDown,1000);//1000毫秒,每一秒钟调用一次函数
//3、倒计时-时分秒函数
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;//判断数值小于10的情况 如 0-9改为 00-09
   hour.innerHTML=h;//更改div里面的内容 把h给获取元素hour的内容
   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;//同上
}

效果图

JavaScript仿京东秒杀倒计时

最后代码过程就不过多讲解,比较简单易写,如需改进的地方,请评论再改进,谢谢

更多JavaScript时钟特效点击查看:JavaScript时钟特效专题

更多JavaScript倒计时特效点击查看:JavaScript倒计时专题

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 子窗口操作父窗口的代码
Sep 21 Javascript
使用jQuery实现dropdownlist的联动效果(sharepoint 2007)
Mar 30 Javascript
JavaScript网页定位详解
Jan 13 Javascript
JavaScript中的replace()方法使用详解
Jun 06 Javascript
jQuery实现图片局部放大镜效果
Mar 17 Javascript
针对后台列表table拖拽比较实用的jquery拖动排序
Oct 10 Javascript
jQuery弹出层插件popShow用法示例
Jan 23 Javascript
Bootstrap fileinput文件上传预览插件使用详解
May 16 Javascript
微信小程序实现根据字母选择城市功能
Aug 16 Javascript
原生JS实现手动轮播图效果实例代码
Nov 22 Javascript
JS数组方法reduce的用法实例分析
Mar 03 Javascript
elementui实现预览图片组件二次封装
Dec 29 Javascript
JavaScript写个贪吃蛇小游戏(超详细)
Mar 17 #Javascript
JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果
Mar 17 #Javascript
js实现简单点赞操作
Mar 17 #Javascript
vue+ESLint 配置保存 自动格式化代码
Mar 17 #Javascript
HTML+JS实现“代码雨”效果源码(黑客帝国文字下落效果)
Mar 17 #Javascript
JavaScript实现横版菜单栏
Mar 17 #Javascript
JavaScript实现留言板案例
Mar 17 #Javascript
You might like
生成静态页面的php函数,php爱好者站推荐
2007/03/19 PHP
PHP基于文件存储实现缓存的方法
2015/07/20 PHP
Laravel 框架路由原理与路由访问实例分析
2020/04/14 PHP
最简单的js图片切换效果实现代码
2011/09/24 Javascript
jQuery中animate用法实例分析
2015/03/09 Javascript
javascript 使用for循环时该注意的问题-附问题总结
2015/08/19 Javascript
jquery实现网页的页面平滑滚动效果代码
2015/11/02 Javascript
json实现添加、遍历与删除属性的方法
2016/06/17 Javascript
angularjs实现的购物金额计算工具示例
2018/05/08 Javascript
基于webpack4搭建的react项目框架的方法
2018/06/30 Javascript
vue中的适配px2rem示例代码
2018/11/19 Javascript
jquery实现选项卡切换代码实例
2019/05/14 jQuery
JavaScript基于用户照片姓名生成海报
2020/05/29 Javascript
JS实现简单打字测试
2020/06/24 Javascript
k8s node节点重新加入master集群的实现
2021/02/22 Javascript
python解析json实例方法
2013/11/19 Python
django自定义Field实现一个字段存储以逗号分隔的字符串
2014/04/27 Python
Python中使用urllib2模块编写爬虫的简单上手示例
2016/01/20 Python
对numpy.append()里的axis的用法详解
2018/06/28 Python
Python实现基于C/S架构的聊天室功能详解
2018/07/07 Python
python引入不同文件夹下的自定义模块方法
2018/10/27 Python
Python 如何查找特定类型文件
2020/08/17 Python
python3:excel操作之读取数据并返回字典 + 写入的案例
2020/09/01 Python
Python下载的11种姿势(小结)
2020/11/18 Python
美国汽车性能部件和赛车零件网站:Vivid Racing
2018/03/27 全球购物
Agoda.com官方网站:便宜预订全球酒店,高达80%的折扣
2018/04/04 全球购物
意大利一家专营包包和配饰的网上商店:Borse Last Minute
2019/08/26 全球购物
美国办公用品折扣网站:Shoplet.com
2019/11/24 全球购物
荷兰DOD药房中文官网:DeOnlineDrogist
2020/12/27 全球购物
远程网络教育毕业生自我鉴定
2014/04/14 职场文书
音乐节策划方案
2014/06/09 职场文书
报效祖国演讲稿
2014/09/15 职场文书
初中生思想道德自我评价
2015/03/09 职场文书
安全教育观后感
2015/06/17 职场文书
《比尾巴》教学反思
2016/02/24 职场文书
Python加密与解密模块hashlib与hmac
2022/06/05 Python