JavaScript仿京东秒杀倒计时

 更新时间:2020年03月17日 17:00:42   作者:牛先森  
这篇文章主要为大家详细介绍了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倒计时专题

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

相关文章

  • webpack打包js文件及部署的实现方法

    webpack打包js文件及部署的实现方法

    这篇文章主要介绍了webpack打包js文件的方法及webpack打包后的JS文件如何部署,需要的朋友可以参考下
    2017-12-12
  • 详解如何提升JSON.stringify()的性能

    详解如何提升JSON.stringify()的性能

    这篇文章主要介绍了详解如何提升JSON.stringify()的性能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-06-06
  • javascript 具名函数的四种调用方式 推荐

    javascript 具名函数的四种调用方式 推荐

    看四种方式执行结果没有区别。但如果函数有返回值的话,用new方式调用时可能会让你有些失望。
    2009-07-07
  • js拖拽效果的原理及实现

    js拖拽效果的原理及实现

    这篇文章主要为大家详细介绍了js拖拽效果的原理及实现,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • JavaScript实现简易的水印覆盖功能

    JavaScript实现简易的水印覆盖功能

    本文将简单实现一个覆盖水印的小功能,水印一般都是添加在图片上,然后直接加载处理过的图片url即可,这里并没有修改图片,而是直接的在待添加水印的 dom 上添加一个 canvas 蒙版,需要的可以参考一下
    2022-12-12
  • element ui分页多选,翻页记忆的实例

    element ui分页多选,翻页记忆的实例

    今天小编就为大家分享一篇element ui分页多选,翻页记忆的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 如何使用less实现随机下雪动画详解

    如何使用less实现随机下雪动画详解

    这篇文章主要给大家介绍了关于如何使用less实现随机下雪动画的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-01-01
  • JavaScript中的isXX系列是否继续使用的分析

    JavaScript中的isXX系列是否继续使用的分析

    我们很容易被漂亮的代码吸引,也不知不觉的在自己的代码库中加入这些。却没有冷静的想过它们的优劣。这不,我就收集了一系列形如 “是否为……?” 的判断的boolean函数。
    2011-04-04
  • Javascript的getYear、getFullYear、getUTCFullYear异同分享

    Javascript的getYear、getFullYear、getUTCFullYear异同分享

    getYear、getFullYear、getUTCFullYear都是Javascript的Date对象的方法函数
    2011-11-11
  • 使用js原生实现年份轮播选择效果实例

    使用js原生实现年份轮播选择效果实例

    这篇文章主要给大家介绍了关于如何使用js原生实现年份轮播选择效果的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01

最新评论