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 相关文章推荐
用js统计用户下载网页所需时间的脚本
Oct 15 Javascript
jQuery.clean使用方法及思路分析
Jan 07 Javascript
Jquery 的outerHeight方法使用介绍
Sep 11 Javascript
AngularJS语法详解
Jan 23 Javascript
JavaScript使用RegExp进行正则匹配的方法
Jul 11 Javascript
Sort()函数的多种用法
Mar 20 Javascript
JavaScript继承学习笔记【新手必看】
May 10 Javascript
史上最全JavaScript数组去重的十种方法(推荐)
Aug 17 Javascript
详解Angular6 热加载配置方案
Aug 18 Javascript
JavaScript如何处理移动端拍摄图片旋转问题
Nov 16 Javascript
jQuery实现购物车全功能
Jan 11 jQuery
React-vscode使用jsx语法的问题及解决方法
Jun 21 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
Windows下PHP5和Apache的安装与配置
2006/09/05 PHP
ThinkPHP关于session的操作方法汇总
2014/07/18 PHP
php文件上传后端处理小技巧
2016/05/22 PHP
微信公众平台开发教程④ ThinkPHP框架下微信支付功能图文详解
2019/04/10 PHP
PHP文件类型检查及fileinfo模块安装使用详解
2019/05/09 PHP
通过PHP实现用户注册后邮箱验证激活
2020/11/10 PHP
Google Map V3 绑定气泡窗口(infowindow)Dom事件实现代码
2013/04/26 Javascript
jQuery之选项卡的简单实现
2014/02/28 Javascript
jquery的父子兄弟节点查找示例代码
2014/03/03 Javascript
jQuery trigger()方法用法介绍
2015/01/13 Javascript
基于jquery实现导航菜单高亮显示(两种方法)
2015/08/23 Javascript
JavaScript该如何学习 怎样轻松学习JavaScript
2017/06/12 Javascript
angular select 默认值设置方法
2017/06/23 Javascript
jQuery实现拖动效果的实例代码
2017/06/25 jQuery
Node.js API详解之 dgram模块用法实例分析
2020/06/05 Javascript
vue用elementui写form表单时,在label里添加空格操作
2020/08/13 Javascript
javascript使用正则表达式实现注册登入校验
2020/09/23 Javascript
vue 图片裁剪上传组件的实现
2020/11/12 Javascript
python实现的系统实用log类实例
2015/06/30 Python
Tensorflow 训练自己的数据集将数据直接导入到内存
2018/06/19 Python
pycharm修改界面主题颜色的方法
2019/01/17 Python
CSS3正方体旋转示例代码
2013/08/08 HTML / CSS
英国口碑最好的的维他命胶囊品牌:Myvitamins(有中文站)
2016/12/03 全球购物
法国创作个性化T恤衫和其他定制产品平台:Tostadora
2018/04/08 全球购物
世界上最大的高分辨率在线图片库:Alamy
2018/07/07 全球购物
澳大利亚儿童精品仓库:Goo & Co.
2019/06/20 全球购物
美国珠宝精品店:Opulent Jewelers
2019/08/20 全球购物
英国伦敦的睡衣品牌:Asceno
2019/10/06 全球购物
LINUX下线程,GDI类的解释
2016/12/14 面试题
质检部经理岗位职责
2014/02/19 职场文书
财务管理专业毕业生求职信
2014/06/02 职场文书
服务行业口号
2014/06/11 职场文书
董事长秘书工作总结
2015/08/14 职场文书
Apache压力测试工具的安装使用
2021/03/31 Servers
一文彻底理解js原生语法prototype,__proto__和constructor
2021/10/24 Javascript
yyds什么意思?90后已经听不懂00后讲话了……
2022/02/03 杂记