js定时器实现倒计时效果

所属分类: 网络编程 / JavaScript 阅读数: 656
收藏 0 赞 0 分享

本文实例为大家分享了js定时器实现倒计时效果展示的具体代码,供大家参考,具体内容如下

日期函数

倒计时 =  用 将来的时间  -   现在的时间 

问题:将来时间 距离 1970 毫秒数   -     现在距离 1970年1           

用将来的毫秒数 -  现在的毫秒数   不断转换就可以了

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <style>
 body{
  font-size:30px;
  text-align: center;
  color:red;
 }
 </style>
 <script>
 window.onload = function(){
  var demo = document.getElementById("demo");
  var endTime = new Date("2017/11/12 17:30:00"); // 最终时间
  setInterval(clock,1000); // 开启定时器
  function clock(){
  var nowTime = new Date(); // 一定是要获取最新的时间
  // console.log(nowTime.getTime()); 获得自己的毫秒
  var second = parseInt((endTime.getTime() - nowTime.getTime()) / 1000);
  // 用将来的时间毫秒 - 现在的毫秒 / 1000 得到的 还剩下的秒 可能处不断 取整
  // console.log(second);
   // 一小时 3600 秒
  // second / 3600 一共的小时数 /24 天数
  var d = parseInt(second / 3600 / 24); //天数
  //console.log(d);
  var h = parseInt(second / 3600 % 24) // 小时
  // console.log(h);
  var m = parseInt(second / 60 );
  //console.log(m);
  var s = parseInt(second ); // 当前的秒
  console.log(s);
  /* if(d<10)
  {
   d = "0" + d;
  }*/
  d<10 ? d="0"+d : d;
  h<10 ? h="0"+h : h;
  m<10 ? m="0"+m : m;
  s<10 ? s="0"+s : s;
  demo.innerHTML = "距离抢购时间还剩: "+d+"天 "+h+"小时 "+m+"分钟 "+s+"秒";

  }
 }
 </script>
</head>
<body>
<div id="demo"></div>
</body>
</html>

更多内容请参考:js实现倒计时功能汇总

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

更多精彩内容其他人还在看

浅谈Koa2框架利用CORS完成跨域ajax请求

这篇文章主要介绍了浅谈Koa2框架利用CORS完成跨域ajax请求,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

浅析Vue中method与computed的区别

在new Vue的配置参数中的computed和methods都可以处理大量的逻辑代码,但是什么时候用哪个属性,要好好区分一下才能做到正确的运用vue。这篇文章主要介绍了Vue中method与computed的区别,需要的朋友可以参考下
收藏 0 赞 0 分享

Vue2.0 http请求以及loading展示实例

下面小编就为大家分享一篇Vue2.0 http请求以及loading展示实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

轻松搞定jQuery+JSONP跨域请求的解决方案

了解了jsonp之后,大家应该也都明白了,jsonp主要就是用来实现跨域的获取数据,今天我们就来详细探讨下如何在实际中应用jsonp实现跨域
收藏 0 赞 0 分享

Vue2.0实现组件数据的双向绑定问题

这篇文章主要介绍了Vue2.0实现组件数据的双向绑定问题,非常不错,具有参考借鉴价值,需要的朋友可以参考下
收藏 0 赞 0 分享

node的process以及child_process模块学习笔记

这篇文章主要介绍了node的process以及child_process模块学习笔记,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

vue2.0 循环遍历加载不同图片的方法

下面小编就为大家分享一篇vue2.0 循环遍历加载不同图片的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

浅谈Vue2.0中v-for迭代语法的变化(key、index)

下面小编就为大家分享一篇浅谈Vue2.0中v-for迭代语法的变化(key、index),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

使用vue-aplayer插件时出现的问题的解决

这篇文章主要介绍了使用vue-aplayer插件时出现的问题的解决,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

Element-ui table中过滤条件变更表格内容的方法

下面小编就为大家分享一篇Element-ui table中过滤条件变更表格内容的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享
查看更多