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数组的扩展实现代码集合
Jun 01 Javascript
JQuery 学习笔记 选择器之五
Jul 23 Javascript
Javascript 日期处理之时区问题
Oct 08 Javascript
基于jquery的禁用右键、文本选择功能、复制按键的实现代码
Aug 27 Javascript
jquery实现图片翻页效果
Dec 23 Javascript
JS实现简易图片轮播效果的方法
Mar 25 Javascript
JavaScript弹出对话框的三种方式
Mar 23 Javascript
KnockoutJS 3.X API 第四章之数据控制流foreach绑定
Oct 10 Javascript
纯js实现动态时间显示
Sep 07 Javascript
layui数据表格跨行自动合并的例子
Sep 02 Javascript
js实现幻灯片轮播图
Aug 14 Javascript
前端JavaScript大管家 package.json
Nov 02 Javascript
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 下载保存文件保存到本地的两种实现方法
2013/08/12 PHP
CodeIgniter配置之config.php用法实例分析
2016/01/19 PHP
php实现页面纯静态的实例代码
2017/06/21 PHP
CakePHP框架Model函数定义方法示例
2017/08/04 PHP
laravel实现图片上传预览,及编辑时可更换图片,并实时变化的例子
2019/11/14 PHP
实用的JS正则表达式(手机号码/IP正则/邮编正则/电话等)
2013/01/11 Javascript
JQuery表格内容过滤的实现方法
2013/07/05 Javascript
Angular Js文件上传之form-data
2015/08/28 Javascript
javascript实现九宫格相加数值相等
2020/05/28 Javascript
vuejs实现递归树型菜单组件
2018/01/13 Javascript
babel的使用及安装配置教程
2018/02/22 Javascript
nodejs更改项目端口号的方法
2018/05/13 NodeJs
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
2018/08/25 Javascript
Nodejs实现WebSocket代码实例
2020/05/19 NodeJs
python抓取百度首页的方法
2015/05/19 Python
举例讲解Python设计模式编程的代理模式与抽象工厂模式
2016/01/16 Python
python处理按钮消息的实例详解
2017/07/11 Python
Python多线程中阻塞(join)与锁(Lock)使用误区解析
2018/04/27 Python
对sklearn的使用之数据集的拆分与训练详解(python3.6)
2018/12/14 Python
Python匿名函数及应用示例
2019/04/09 Python
简单介绍python封装的基本知识
2019/08/10 Python
Python对称的二叉树多种思路实现方法
2020/02/28 Python
Python限制内存和CPU使用量的方法(Unix系统适用)
2020/08/04 Python
欢送退休感言
2014/02/08 职场文书
顶碗少年教学反思
2014/02/21 职场文书
道路交通安全实施方案
2014/03/12 职场文书
保护地球的标语
2014/06/17 职场文书
党课培训心得体会
2014/09/02 职场文书
2014教师教育实践活动对照检查材料思想汇报
2014/09/21 职场文书
2014年学校党建工作汇报材料
2014/11/02 职场文书
安全隐患整改报告
2014/11/06 职场文书
2014年物流工作总结
2014/11/25 职场文书
小学生暑假安全公约
2015/07/14 职场文书
创业开店,这样方式更合理
2019/08/26 职场文书
Element-ui Layout布局(Row和Col组件)的实现
2021/12/06 Vue.js
让JavaScript代码更加精简的方法技巧
2022/06/01 Javascript