countDown.js 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
  1. /*
  2. * 倒计时 小插件
  3. * @since 2018/11/7 12:39
  4. * @author FlyTiger
  5. * */
  6. (function (global, factory) {
  7. typeof exports === "object" && typeof module !== "undefined" ? module.exports = factory() : typeof define === "function" && define.amd ? (function(){ define(["jquery"],factory);global.countDown = factory();})() : (global.countDown = factory());
  8. })(this, function () {
  9. var ___=window;
  10. //模板
  11. var $defaultTitle=["距离","开始","还有"];
  12. var $template="<span class=\"active-time pull-right\"><em class=\"time_d sd\"></em><span class=\"sd\">天</span><em class=\"time_h sh\"></em><span class=\"sh\">时</span><em class=\"time_m sm\"></em><span class=\"sm\">分</span><em class=\"time_s\"></em>秒";
  13. //事件
  14. var events={
  15. started:"countDownStarted",//开启
  16. ended:"countDownEnded",//结束
  17. restarted:"countDownRestarted"//重启
  18. };
  19. //方法
  20. var fns={
  21. //标题处理
  22. _title:function(){
  23. var _opts=this.opts;
  24. var $prefix=this.$timeEms_.$prefix,$suffix=this.$timeEms_.$suffix;
  25. if((_opts.title&&_opts.title.length)||(!_opts.prefix&&!_opts.suffix)){
  26. var _1= [].concat($defaultTitle);
  27. _1.splice(1,1,_opts.title||$defaultTitle[1]);
  28. $prefix.html(_1.join(""));
  29. }else{
  30. $prefix.html(_opts.prefix||"");
  31. $suffix.html(_opts.suffix||"");
  32. }
  33. },
  34. //初始化
  35. prepare:function(){
  36. fns._title.call(this);
  37. fns._f.call(this);
  38. },
  39. _f:function () {
  40. var _this=this;
  41. var time_end=this.opts.time_end||new Date().getTime();
  42. var _ems=this.$timeEms_;
  43. var f_=function _f(_time_end){
  44. var time_start = new Date().getTime(); //设定当前时间
  45. var time_end = new Date(_time_end).getTime(); //设定目标时间
  46. // 计算时间差
  47. var time_distance = time_start - time_end;
  48. /*****
  49. if(time_distance<86400000){
  50. $("title").text(time_distance)
  51. $(".sd").hide()
  52. }
  53. if(time_distance<3600000){
  54. $(".sh").hide()
  55. }
  56. if(time_distance<60000){
  57. $(".sm").hide()
  58. }
  59. ***/
  60. if(time_distance<1){
  61. if(_this._timestamp_){
  62. clearTimeout(_this._timestamp_);
  63. }
  64. _this._runing++;
  65. _this.$container_.hide().triggerHandler(events.ended,[_this._runing,time_start]);
  66. return false;
  67. }
  68. // 天
  69. var int_day = Math.floor(time_distance/86400000)
  70. time_distance -= int_day * 86400000;
  71. // 时
  72. var int_hour = Math.floor(time_distance/3600000)
  73. time_distance -= int_hour * 3600000;
  74. // 分
  75. var int_minute = Math.floor(time_distance/60000)
  76. time_distance -= int_minute * 60000;
  77. // 秒
  78. var int_second = Math.floor(time_distance/1000)
  79. /****时分秒为单数时、前面加零
  80. if(int_day < 10){
  81. int_day = "0" + int_day;
  82. }
  83. if(int_hour < 10){
  84. int_hour = "0" + int_hour;
  85. }
  86. if(int_minute < 10){
  87. int_minute = "0" + int_minute;
  88. }
  89. if(int_second < 10){
  90. int_second = "0" + int_second;
  91. }****/
  92. // 显示时间
  93. _ems.$d.html(int_day);
  94. _ems.$h.html(int_hour);
  95. _ems.$m.html(int_minute);
  96. _ems.$s.html(int_second);
  97. // 设置定时器
  98. if(_this._timestamp_){
  99. clearTimeout(_this._timestamp_);
  100. }
  101. _this._timestamp_=setTimeout(function (_) {
  102. _f(_);
  103. },1000,_time_end);
  104. };
  105. if(this._runing){
  106. this.$container_.triggerHandler(events.restarted,[this._runing]);
  107. }else{
  108. this.$container_.triggerHandler(events.started,[this._runing]);
  109. }
  110. this.$container_.show();
  111. f_(time_end);
  112. }
  113. };
  114. /*
  115. * @param $container 倒计时容器
  116. * @param $opts 参数{title,prefix,suffix,time_end},title优先级最高
  117. * */
  118. var CountDown=function ($container,$opts) {
  119. var $container=$container.empty().html($template).addClass("payment-time");
  120. // 显示时间
  121. this.$timeEms_={
  122. $d:$(".time_d",$container),
  123. $h:$(".time_h",$container),
  124. $m:$(".time_m",$container),
  125. $s:$(".time_s",$container),
  126. $prefix:$(".time_prefix",$container),
  127. $suffix:$(".time_suffix",$container),
  128. };
  129. this.$container_=$container;
  130. this.opts=$opts||{};
  131. this._runing=0;//初始执行
  132. //初始化
  133. fns.prepare.call(this);
  134. };
  135. //重新设置参数
  136. CountDown.prototype.setOpts=function($opts){
  137. this.opts=$.extend(this.opts, $opts||{});
  138. this._runing++;
  139. fns.prepare.call(this);
  140. };
  141. //绑定事件
  142. CountDown.prototype.on=function () {
  143. ___.jQuery.fn.on.apply(this.$container_,arguments);
  144. if(this._runing<1){
  145. this.$container_.triggerHandler(events.started,[this._runing]);
  146. }
  147. return this;
  148. };
  149. //解除事件
  150. CountDown.prototype.off=function () {
  151. ___.jQuery.fn.off.apply(this.$container_,arguments);
  152. return this;
  153. };
  154. return function($container,$opts){
  155. if(!___.jQuery){
  156. throw new Error("jQuery is required for this plugin");
  157. }
  158. if(!$container||!$container.length){
  159. throw new Error("The container you given is not useful!");
  160. }
  161. return new CountDown($container,$opts);
  162. }
  163. });