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 相关文章推荐
javascript call和apply方法
Nov 24 Javascript
jQuery 注意事项 与原因分析
Apr 24 Javascript
javascript Base类 包含基本的方法
Jul 22 Javascript
javascript实现的像java、c#之类的sleep暂停的函数代码
Mar 04 Javascript
JQuery onload、ready概念介绍及使用方法
Apr 27 Javascript
用js写的一个路由(简单实例)
Sep 24 Javascript
JQuery Ajax WebService传递参数的简单实例
Nov 02 Javascript
angular.js指令中transclude选项及ng-transclude指令详解
May 24 Javascript
Node实战之不同环境下配置文件使用教程
Jan 02 Javascript
vue中引用阿里字体图标的方法
Feb 10 Javascript
node.js使用http模块创建服务器和客户端完整示例
Feb 10 Javascript
基于Vue中的父子传值问题解决
Jul 27 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
WordPress网站性能优化指南
2015/11/18 PHP
PHP输出多个元素的排列或组合的方法
2017/03/14 PHP
PHP PDOStatement::fetch讲解
2019/01/31 PHP
解决laravel session失效的问题
2019/10/14 PHP
js中几种去掉字串左右空格的方法
2006/12/25 Javascript
jQuery帮助之筛选查找 children([expr])
2011/01/31 Javascript
情人节专属 纯js脚本1k大小的3D玫瑰效果
2012/02/11 Javascript
JQUERY 设置SELECT选中项代码
2014/02/07 Javascript
JavaScript也谈内存优化
2014/06/06 Javascript
node.js中的fs.futimesSync方法使用说明
2014/12/17 Javascript
jQuery获取标签文本内容和html内容的方法
2015/03/27 Javascript
jquery.map()方法的使用详解
2015/07/09 Javascript
JavaScript实现节点的删除与序号重建实例
2015/08/05 Javascript
关于JavaScript 原型链的一点个人理解
2016/07/31 Javascript
Ajax高级笔记 JavaScript高级程序设计笔记
2017/06/22 Javascript
JS实现移动端按首字母检索城市列表附源码下载
2017/07/05 Javascript
详解React 服务端渲染方案完美的解决方案
2018/12/14 Javascript
[01:14]2014DOTA2展望TI 剑指西雅图newbee战队专访
2014/06/30 DOTA
Python 3.x 新特性及10大变化
2015/06/12 Python
Python中常用操作字符串的函数与方法总结
2016/02/04 Python
Python字符串拼接六种方法介绍
2017/12/18 Python
Django REST Framework 分页(Pagination)详解
2020/11/30 Python
HTML5和CSS3让网页设计提升到下一个高度
2009/08/14 HTML / CSS
html5 css3 动态气泡按钮实例演示
2012/12/02 HTML / CSS
日本最大的眼镜购物网站:Oh My Glasses
2016/11/13 全球购物
Linux如何压缩可执行文件
2013/10/21 面试题
中医药大学市场营销专业自荐信
2013/09/29 职场文书
求职意向书范文
2014/04/01 职场文书
商家认证委托书格式
2014/10/16 职场文书
工作检讨书500字
2014/10/19 职场文书
领导参观欢迎词
2015/01/26 职场文书
2015年新教师工作总结
2015/04/28 职场文书
复兴之路观后感3000字
2015/06/02 职场文书
会计主管竞聘书
2015/09/15 职场文书
范文之农村基层党建工作报告
2019/10/24 职场文书
JavaScript模拟实现网易云轮播效果
2022/04/04 Javascript