调用方法

  1. var _TimeCountDown = new TimeCountDown("sttime1",{
  2. startTime:'2016-07-30 10:07:55', //开始时间
  3. endTime:'2016-07-30 10:08:00', //结束时间
  4. timeCallBack:"timeOverfun", //回调函数
  5. });

countDown.js

  1. /**
  2. * @author wanghaitao
  3. * @param sttime1 id
  4. * @param startTime 开始时间
  5. * @param endTime 结束时间
  6. * @param timeCallBack 回调函数
  7. *
  8. * var _TimeCountDown = new TimeCountDown("sttime1",{
  9. startTime:'2016-07-30 10:07:55', //开始时间
  10. endTime:'2016-07-30 10:08:00', //结束时间
  11. timeCallBack:"timeOverfun", //回调函数
  12. });
  13. */
  14.  
  15. (function(window,undefined){
  16. var TimeCountDown = function(container, params){
  17. if(!(this instanceof TimeCountDown)) return new TimeCountDown(container, params);
  18.  
  19. var defaults = {
  20. endTime:'', //title
  21. startTime:'', //请传入ID,或DOM对象
  22. Lid:'',
  23. leftTitle:"倒计时:",//左侧名称
  24. colonStat:false,//是否把小时分转换成:
  25. timeCallBack:null //关闭执行的回调函数
  26. }
  27. params = params || {};
  28. var originalParams = {};
  29. for (var param in params) {
  30.  
  31. if (typeof params[param] === 'object' && params[param] !== null && !(params[param].nodeType || params[param] === window || params[param] === document || (typeof Dom7 !== 'undefined' && params[param] instanceof Dom7) || (typeof jQuery !== 'undefined' && params[param] instanceof jQuery))) {
  32. originalParams[param] = {};
  33. for (var deepParam in params[param]) {
  34. originalParams[param][deepParam] = params[param][deepParam];
  35. }
  36. }
  37. else {
  38. originalParams[param] = params[param];
  39. }
  40. }
  41. for (var def in defaults) {
  42. if (typeof params[def] === 'undefined') {
  43. params[def] = defaults[def];
  44. }
  45. else if (typeof params[def] === 'object') {
  46. for (var deepDef in defaults[def]) {
  47. if (typeof params[def][deepDef] === 'undefined') {
  48. params[def][deepDef] = defaults[def][deepDef];
  49. }
  50. }
  51. }
  52. }
  53. var s = this;
  54. // Params
  55. s.params = params;
  56. s.container = container;
  57. s.currentBreakpoint = undefined;
  58. s.calculateTime = function(){
  59. var startTime = s.vert(this.params.startTime);
  60. var endTime = s.vert(this.params.endTime);
  61. var time = endTime - startTime; //时间差的毫秒数 ;
  62. return time;
  63. }
  64. s.vert = function(time){
  65. if(typeof time == "undefined" || time==""){
  66. return false;
  67. }
  68. var strtime = (time).replace(/-/g,"/");
  69. var date1 = new Date(strtime);
  70. return parseInt(date1.getTime());
  71. }
  72. s.nTime = s.calculateTime();
  73. s.countdown();
  74.  
  75. };
  76.  
  77. TimeCountDown.prototype = {
  78. countdown:function(){
  79. var interval = 1000; //毫秒
  80. var time;
  81. this.nTime = this.nTime - interval;
  82.  
  83. var leave1 = this.nTime;//计算天数后剩余的毫秒数
  84. var t = Math.floor(Math.floor((leave1/(3600*1000))/24));
  85. var hleave = this.nTime%((24*3600*1000));
  86. //把剩余毫秒数转换为小时
  87. var h = Math.floor(hleave/(3600*1000)) < 10 ? "0"+ Math.floor(hleave/(3600*1000)) : Math.floor(hleave/(3600*1000));
  88. var leave2 = this.nTime%(3600*1000); //计算小时数后剩余的毫秒数
  89. //把转换小时之后,剩余毫秒数转换为分钟
  90. var m = Math.floor(leave2/(60*1000)) < 10 ? "0" + Math.floor(leave2/(60*1000)) : Math.floor(leave2/(60*1000));
  91.  
  92. //把转换分钟之后,剩余毫秒数转换为秒
  93. var leave3 = leave2%(60*1000); //计算分钟数后剩余的毫秒数
  94. var s = Math.round(leave3/1000) < 10 ? "0" + Math.round(leave3/1000) : Math.round(leave3/1000);
  95.  
  96. if(!this.params.colonStat){
  97. if(t == 0){
  98. time = this.params.leftTitle+"<span>" + h + "</span><label>时</label><span>" + m + "</span><label>分</label><span>" + s + "</span><label>秒<label>";
  99.  
  100. }else{
  101.  
  102. time = this.params.leftTitle+"<span>" + t + "</span><label>天</label><span>" + h + "</span><label>时</label><span>" + m + "</span><label>分</label><span>" + s + "</span><label>秒<label>";
  103. }
  104. }else{
  105. time = this.params.leftTitle+"<span>" + h + "</span><label>:</label><span>" + m + "</span><label>:</label><span>" + s + "</span><label><label>";
  106. }
  107. var callBackTime = t+h+m+s;
  108. document.querySelector("#"+this.container).innerHTML = time;
  109. if(callBackTime <= 0){
  110. eval(this.params.timeCallBack);
  111. return false;
  112. }
  113. var that = this;
  114. setTimeout(function(){
  115. that.countdown();
  116. },interval);
  117. }
  118. }
  119. window.TimeCountDown=TimeCountDown;
  120. })(window,undefined);

  

javascript 倒计时天、小时、分钟、描述的倒计时代码的更多相关文章

  1. JavaScript秒转换成天-小时-分钟-秒

    根据时间秒转换成天-小时-分钟-秒 // 秒转换成day.hour.minutes.seconds formatSecond(second: number) { const days = Math.f ...

  2. 使用html+css+js实现倒计时,开启你痛苦的倒计时吧

    使用html+css+js实现倒计时,开启你痛苦的倒计时吧 效果图: 这是我痛苦的倒计时,呜呜呜 好啦,再痛苦还是要分享代码,代码如下,复制即可使用: <!DOCTYPE html> &l ...

  3. android实现倒计时,最简单实现RecyclerView倒计时+SwipeRefreshLayout下拉刷新

    先上效果图: RecyclerView + SwipeRefreshLayout 实现倒计时效果 MainActivity.java package top.wintp.counttimedemo1; ...

  4. MySQL 取得小时分钟部分

    MySQL 取得小时分钟部分 SELECT `CpParkID` , DATE_FORMAT( `UPDATE_TIME` , '%H:%i' )FROM `cp_park`WHERE HOUR( ` ...

  5. 【PTA】5-2 下列程序读入时间数值,将其加1秒后输出,时间格式为:hh: mm: ss,即“小时:分钟:秒”,当小时等于24小时,置为0。

    5-2 下列程序读入时间数值,将其加1秒后输出,时间格式为:hh: mm: ss,即"小时:分钟:秒",当小时等于24小时,置为0. #include <stdio.h> ...

  6. 让wordpress分类和标签的描述支持HTML代码

    默认 WordPress 后台分类和标签的编辑页面,分类和标签的描述是不支持 HTML 代码的,我们可以通过在当前主题的 functions.php 文件添加如下代码让分类和标签的描述支持 HTML ...

  7. 通过javascript库JQuery实现页面跳转功能代码

    通过javascript库JQuery实现页面跳转功能代码的四段代码实例如下. 实例1: 1 2 3 4 $(function(){ var pn = $("#gotopagenum&quo ...

  8. JavaScript与html5写的贪吃蛇完整代码

    JavaScript与html5写的贪吃蛇完整代码 查看运行效果可访问http://www.codesocang.com/texiao/youxitexiao/2014/0402/7045.html# ...

  9. Dreamweaver CS5 CS6 代码格式化、美化插件(可同一时候格式化HTML、JavaScript、CSS )眼下最好用的代码格式化扩展

    Dreamweaver CS5 CS6 代码格式化.美化插件(可同一时候格式化HTML.JavaScript.CSS )眼下最好用的代码格式化扩展. 众所周知,Dreamweaver CS5 CS6 ...

  10. 主要看思路:区域数据去重 + JavaScript一次性展示几万条数据实例代码

    近期做1功能,Gis地图 基于百度地图api , 会遇到的问题的, 如后台接口给的数据很多,大几千上万的,如果拿了数据直接渲染dom ,这滋味爽爽的. 再遇上 客户端浏览器悲催的,这卡顿就来了... ...

随机推荐

  1. 表达式求值 (栈) 用C++实现

    #include <cstdio> #include <cstdlib> #include <cmath> #include <stack> #incl ...

  2. 用Hexo搭建属于自己的Blog

    什么是Hexo 简单的来说,Hexo是一款基于Node.JS的静态博客框架,官方给它的描述是"A fast, simple & powerful blog framework&quo ...

  3. 软键盘 输入法管理器 InputMethodManager

     基本介绍 软键盘的显示原理 软键盘其实是一个Dialog.InputMethodService为我们的输入法创建了一个Dialog,并且对某些参数进行了设置,使之能够在底部或者全屏显示.当我们点击输 ...

  4. NuGet学习笔记(1)——初识NuGet及快速安装使用(转)

    关于NuGet园子里已经有不少介绍及使用经验,本文仅作为自己研究学习NuGet一个记录. 初次认识NuGet是在去年把项目升级为MVC3的时候,当时看到工具菜单多一项Library Package M ...

  5. asp.net微信开发第三篇----自定义会话管理

    和微信用户的沟通少不了,总觉得看起来微信官网后台管理中的会话回复消息有点呆板,所以我这里就自定义了一个会话管理功能,最终效果图如下: 因为我试使用富文本文件CKEDITOR来进行编写,你看到稳中可能会 ...

  6. 安全管理:IE6安全隐患重重 为何不离不弃

    安全服务商Zscaler的报告称,尽管微软IE6曾遭受一系列强势攻击并且新出的IE版本有更强的安全性能,但IE6依然受到各企业的热捧. 尽管微软一直敦促用户部署浏览器更新(截止2010年八月就将满九年 ...

  7. ValidateCode.cs验证码时设置缓存的使用

    using System; using System.Collections.Generic; using System.Web; using System.Web.UI; using System. ...

  8. THINK PHP U的用法

    public function index(){ //$db=new \Think\Model(); //$db=M('msg'); //$result=$db->query("sel ...

  9. php代码的一些高效写法

    用单引号代替双引号来包含字符串,这样做会更快一些.因为PHP会在双引号包围的字符串中搜寻变量,单引号则不会,注意:只有echo能这么做,它是一种可以把多个字符串当作参数的“函数”(译注:PHP手册中说 ...

  10. Python自动化运维之4、格式化输出、文件对象

    Python格式化输出: Python的字符串格式化有两种方式: 百分号方式.format方式 百分号的方式相对来说比较老,而format方式则是比较先进的方式,企图替换古老的方式,目前两者并存.[P ...