count-down.js 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
  1. /**
  2. * 自定义倒计时
  3. * endTime 结束的时间 默认单位为ms
  4. * format dd-hh-mm-ss 时间格式
  5. * endText 结束提示语
  6. * countEnd 倒计时结束函数
  7. */
  8. let timer = null,
  9. intval = 1000;
  10. Component({
  11. properties: {
  12. // 是否为时间戳模式
  13. isTimeStamp: {
  14. type: Boolean,
  15. defalute: false
  16. },
  17. // 倒计时结束时间
  18. endTime: {
  19. type: Number,
  20. value: 60 * 1000
  21. },
  22. // 倒计时格式
  23. format: {
  24. type: String,
  25. value: "{DD}:{HH}:{mm}:{ss}"
  26. },
  27. // 结束提示
  28. endText: {
  29. type: String,
  30. value: "已结束"
  31. },
  32. //当前时间
  33. currentTime: {
  34. type: Number,
  35. value: new Date().getTime()
  36. }
  37. },
  38. // 样式
  39. options:{
  40. addGlobalClass:true,
  41. },
  42. data: {
  43. result: "", //显示结果
  44. },
  45. lifetimes: {
  46. ready(){
  47. this.init();
  48. },
  49. detached() {
  50. //组件销毁时清除定时器 防止爆栈
  51. clearTimeout(timer);
  52. },
  53. },
  54. methods: {
  55. start(){
  56. this.init();
  57. },
  58. // 时间格式处理
  59. format(formatStr, time) {
  60. // 使用正则体换格式
  61. formatStr = formatStr.replace(/{DD}/, this.formatNumber(time.d)).
  62. replace(/{HH}/, this.formatNumber(time.h)).
  63. replace(/{mm}/, this.formatNumber(time.m)).
  64. replace(/{ss}/, this.formatNumber(time.s)).
  65. replace(/{D}/, time.d).
  66. replace(/{H}/, time.h).
  67. replace(/{m}/, time.m).
  68. replace(/{s}/, time.s).
  69. replace(/{S}/, time.S)
  70. return formatStr;
  71. },
  72. defaultFormat(time) {
  73. let daydiff = 24 * 60 * 60 * 1000;
  74. let hoursdiff = 60 * 60 * 1000;
  75. let minutesdiff = 60 * 1000;
  76. let d = Math.floor(time / daydiff); //天数
  77. let h = Math.floor((time - d * daydiff) / hoursdiff);
  78. let m = Math.floor((time - d * daydiff - h * hoursdiff) / minutesdiff);
  79. let s = Math.floor((time - d * daydiff - h * hoursdiff - m * minutesdiff) / 1000);
  80. let S = time / 1000;
  81. return {
  82. d,
  83. h,
  84. m,
  85. s,
  86. S
  87. }
  88. },
  89. //定时启动
  90. init() {
  91. timer = setTimeout(() => {
  92. if (this.data.endTime < intval) {
  93. console.log(123)
  94. this.setData({
  95. result: this.data.endText
  96. })
  97. clearTimeout(timer);
  98. this.countEnd && this.countEnd()
  99. return false;
  100. }
  101. let time = this.timeStamp();
  102. let formTime = this.defaultFormat(time)
  103. let res = this.format(this.data.format, formTime);
  104. this.setData({
  105. result: res
  106. })
  107. this.currentFn && this.currentFn(this.data.endTime)
  108. this.data.endTime -= intval;
  109. this.init();
  110. }, intval)
  111. },
  112. // 时间戳处理
  113. timeStamp() {
  114. if (this.data.isTimeStamp) {
  115. let endTime = this.data.endTime - this.data.currentTime;
  116. return endTime;
  117. }
  118. return this.data.endTime;
  119. },
  120. // 倒计时结束处理函数
  121. countEnd() {
  122. this.triggerEvent("countEnd")
  123. },
  124. // 倒计时进行时函数
  125. currentFn(time){
  126. this.triggerEvent("currentFn",time)
  127. },
  128. // 补零操作
  129. formatNumber(n) {
  130. n = n.toString()
  131. return n[1] ? n : `0${n}`
  132. }
  133. }
  134. })