js定时器实现倒计时效果


Posted in Javascript onNovember 05, 2017

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

日期函数

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实现倒计时功能汇总

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

Javascript 相关文章推荐
原生javascript实现图片轮播效果代码
Sep 03 Javascript
jquery不会自动回收xmlHttpRequest对象 导致了内存溢出
Jun 18 Javascript
ionic+AngularJs实现获取验证码倒计时按钮
Apr 22 Javascript
详解JS中的柯里化(currying)
Aug 17 Javascript
VUE 全局变量的几种实现方式
Aug 22 Javascript
在Vue项目中取消ESLint代码检测的步骤讲解
Jan 27 Javascript
vue3实现v-model原理详解
Oct 09 Javascript
JavaScript实现好看的跟随彩色气泡效果
Feb 06 Javascript
Node.JS获取GET,POST数据之queryString模块使用方法详解
Feb 06 Javascript
JavaScript日期库date-fn.js使用方法解析
Sep 09 Javascript
原生js生成图片验证码
Oct 11 Javascript
如何优化vue打包文件过大
Apr 13 Vue.js
Vuejs实现购物车功能
Nov 05 #Javascript
JavaScript实现音乐自动切换和轮播
Nov 05 #Javascript
vue+node+webpack环境搭建教程
Nov 05 #Javascript
JavaScript实现三级级联特效
Nov 05 #Javascript
angular中不同的组件间传值与通信的方法
Nov 04 #Javascript
详解使用React全家桶搭建一个后台管理系统
Nov 04 #Javascript
JavaScript中立即执行函数实例详解
Nov 04 #Javascript
You might like
php检查字符串中是否有外链的方法
2015/07/29 PHP
php析构函数的简单使用说明
2015/08/24 PHP
php实现根据身份证获取精准年龄
2020/02/26 PHP
jquery隐藏标签和显示标签的实例
2013/11/11 Javascript
JavaScript制作简单的日历效果
2016/03/10 Javascript
ES6新特征数字、数组、字符串
2016/10/01 Javascript
纯JS实现表单验证实例
2016/12/24 Javascript
javascript笔记之匿名函数和闭包
2017/02/06 Javascript
Javascript网页抢红包外挂实现分享
2018/01/11 Javascript
vue 实现全选全不选的示例代码
2018/03/29 Javascript
vue项目打包后上传至GitHub并实现github-pages的预览
2019/05/06 Javascript
react中Suspense的使用详解
2019/09/01 Javascript
TypeScript 引用资源文件后提示找不到的异常处理技巧
2020/07/15 Javascript
js实现随机点名
2021/01/19 Javascript
[03:03]DOTA2校园争霸赛 济南城市决赛欢乐发奖活动
2013/10/21 DOTA
[00:36]DOTA2上海特级锦标赛 LGD战队宣传片
2016/03/04 DOTA
python optparse模块使用实例
2015/04/09 Python
Python新手们容易犯的几个错误总结
2017/04/01 Python
Pycharm编辑器技巧之自动导入模块详解
2017/07/18 Python
python+POP3实现批量下载邮件附件
2018/06/19 Python
Python目录和文件处理总结详解
2019/09/02 Python
Linux下通过python获取本机ip方法示例
2019/09/06 Python
python  ceiling divide 除法向上取整(或小数向上取整)的实例
2019/12/27 Python
如何理解Python中的变量
2020/06/01 Python
详解Canvas实用库Fabric.js使用手册
2019/01/07 HTML / CSS
比驿:全球酒店比价网
2018/06/20 全球购物
理肤泉俄罗斯官网:La Roche-Posay俄罗斯
2018/07/24 全球购物
英国No.1体育用品零售商:SportsDirect.com
2019/10/16 全球购物
英国运动风奢侈品购物网站:Maison De Fashion
2020/08/28 全球购物
网络体系结构及协议的定义
2014/03/13 面试题
会计专业自我鉴定范文
2013/10/06 职场文书
2015年信息中心工作总结
2015/05/25 职场文书
python3.9之你应该知道的新特性详解
2021/04/29 Python
浅谈tf.train.Saver()与tf.train.import_meta_graph的要点
2021/05/26 Python
python代码实现备忘录案例讲解
2021/07/26 Python
《宝可梦》动画制作25周年到来 官方发布特别纪念视频
2022/04/01 日漫