蝙蝠岛资源网 Design By www.hbtsch.com

本文实例为大家分享了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"text-align: center">JavaScript仿京东秒杀倒计时

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

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

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

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

标签:
js京东秒杀倒计时,js秒杀倒计时,js倒计时

蝙蝠岛资源网 Design By www.hbtsch.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
蝙蝠岛资源网 Design By www.hbtsch.com

评论“JavaScript仿京东秒杀倒计时”

暂无JavaScript仿京东秒杀倒计时的评论...