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 相关文章推荐
延时重复执行函数 lLoopRun.js
May 08 Javascript
jQuery 获取URL的GET参数值的小例子
Apr 18 Javascript
javascript页面上使用动态时间具体实现
Mar 18 Javascript
JavaScript strike方法入门实例(给字符串加上删除线)
Oct 17 Javascript
基于jQuery实现的无刷新表格分页实例
Feb 17 Javascript
基于jQuery倒计时插件实现团购秒杀效果
May 13 Javascript
jQuery+CSS实现的table表格行列转置功能示例
Jan 08 jQuery
微信小程序实现折叠与展开文章功能
Jun 12 Javascript
详解Vue-cli中的静态资源管理(src/assets和static/的区别)
Jun 19 Javascript
vue中轮训器的使用
Jan 27 Javascript
微信小程序 自定义复选框实现代码实例
Sep 04 Javascript
vue 手机物理监听键+退出提示代码
Sep 09 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
pw的一个放后门的方法分析
2007/10/08 PHP
Windows下XDebug 手工配置与使用说明
2010/07/11 PHP
PHP开发框架kohana3 自定义路由设置示例
2014/07/14 PHP
完美解决thinkphp验证码出错无法显示的方法
2014/12/09 PHP
php+mysql查询优化简单实例
2015/01/13 PHP
简单谈谈php浮点数精确运算
2016/03/10 PHP
Thinkphp开发--集成极光推送
2017/09/15 PHP
PHP+swoole+linux实现系统监控和性能优化操作示例
2019/04/15 PHP
laravel框架数据库配置及操作数据库示例
2019/10/10 PHP
利用onresize使得div可以随着屏幕大小而自适应的代码
2010/01/15 Javascript
6个DIV 135或246间隔一秒轮番显示效果
2010/07/24 Javascript
javascript动态改变img的src属性图片不显示的解决方法
2010/10/20 Javascript
让人期待的2011年度最佳 jQuery 插件分享
2012/03/16 Javascript
jquery datepicker参数介绍和示例
2014/04/15 Javascript
JavaScript关于提高网站性能的几点建议(一)
2016/07/24 Javascript
easyui导出excel无法弹出下载框的快速解决方法
2016/11/10 Javascript
js定时器实例分享
2016/12/20 Javascript
学习使用Bootstrap栅格系统
2017/05/11 Javascript
Vue+Jwt+SpringBoot+Ldap完成登录认证的示例代码
2018/05/21 Javascript
vue使用laydate时间插件的方法
2018/11/14 Javascript
使用 vue 实例更好的监听事件及vue实例的方法
2019/04/22 Javascript
layer弹出层自定义提交取消按钮的例子
2019/09/10 Javascript
python中wx将图标显示在右下角的脚本代码
2013/03/08 Python
python的三目运算符和not in运算符使用示例
2014/03/03 Python
python 添加用户设置密码并发邮件给root用户
2016/07/25 Python
Scrapy-Redis结合POST请求获取数据的方法示例
2019/05/07 Python
python的pytest框架之命令行参数详解(上)
2019/06/27 Python
浅谈Pytorch中的torch.gather函数的含义
2019/08/18 Python
Python环境配置实现pip加速过程解析
2020/11/27 Python
全球最受追捧的运动服品牌领先数字目的地:Stylerunner
2020/11/25 全球购物
最新会计专业求职信范文
2014/01/28 职场文书
大学生毕业自我鉴定范文
2014/02/03 职场文书
关于爱国的标语
2014/06/24 职场文书
MySQL索引知识的一些小妙招总结
2021/05/10 MySQL
MySQL大小写敏感的注意事项
2021/05/24 MySQL
MySQL中TIMESTAMP类型返回日期时间数据中带有T的解决
2022/12/24 MySQL