graceCountDown.vue 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125
  1. <template name="graceCountDown">
  2. <view class="grace-countdown" v-if="show">
  3. <view class="grace-countdown-numbers" :style="{borderColor:borderColor, width:width, height:width, fontSize:fontSize, lineHeight:width, color:fontColor, background:bgrColor}" v-if="d > 0">{{d}}</view>
  4. <view class="grace-countdown-splitor" :style="{color:splitorColor, lineHeight:width, fontSize:fontSize}" v-if="d > 0">{{splitorText[0]}}</view>
  5. <view class="grace-countdown-numbers" :style="{borderColor:borderColor, width:width, height:width, fontSize:fontSize, lineHeight:width, color:fontColor, background:bgrColor}" v-if="(h != '00' || zeroShow)">{{h}}</view>
  6. <view class="grace-countdown-splitor" :style="{color:splitorColor, lineHeight:width, fontSize:fontSize}" v-if="(h != '00' || zeroShow)">{{splitorText[1]}}</view>
  7. <view class="grace-countdown-numbers" :style="{borderColor:borderColor, width:width, height:width, fontSize:fontSize, lineHeight:width, color:fontColor, background:bgrColor}">{{i}}</view>
  8. <view class="grace-countdown-splitor" :style="{color:splitorColor, lineHeight:width, fontSize:fontSize}">{{splitorText[2]}}</view>
  9. <view class="grace-countdown-numbers" :style="{borderColor:borderColor, width:width, height:width, fontSize:fontSize, lineHeight:width, color:fontColor, background:bgrColor}">{{s}}</view>
  10. <view class="grace-countdown-splitor" :style="{color:splitorColor, lineHeight:width, fontSize:fontSize}">{{splitorText[3]}}</view>
  11. </view>
  12. </template>
  13. <script>
  14. export default {
  15. name: "graceCountDown",
  16. props: {
  17. bgrColor: {
  18. type: String,
  19. default: "#FFFFFF"
  20. },
  21. borderColor:{
  22. type:String,
  23. default : "#000000"
  24. },
  25. fontColor: {
  26. type: String,
  27. default: "#000000"
  28. },
  29. fontSize: {
  30. type: String,
  31. default: "22rpx"
  32. },
  33. splitorColor: {
  34. type: String,
  35. default: "#000000"
  36. },
  37. timer:{
  38. type:String,
  39. default:""
  40. },
  41. width : {
  42. type:String,
  43. default:"40rpx"
  44. },
  45. splitorText : {
  46. type : Array,
  47. default : function () {
  48. return [':', ':', ':', '']
  49. }
  50. },
  51. show:{type:Boolean, default:true},
  52. zeroShow:{type:Boolean, default:true}
  53. },
  54. data() {
  55. return {
  56. d : 0,
  57. h : "",
  58. i : "",
  59. s : "",
  60. leftTime : 0,
  61. outTimer : null,
  62. timerIn : '',
  63. leftTimeNum : 0
  64. }
  65. },
  66. created:function(){
  67. this.timerIn = this.timer;
  68. this.runbase();
  69. },
  70. methods: {
  71. runbase : function(){
  72. var reg = /^([0-9]{4})-([0-9]{2})-([0-9]{2}) ([0-9]{2}):([0-9]{2}):([0-9]{2})$/;
  73. var res = this.timerIn.match(reg);
  74. if (res == null){this.outTimer = setTimeout(() => { this.runbase(); }, 1000); return false; }
  75. var year = parseInt(res[1]);
  76. if (year < 1000) { return false; }
  77. var month = parseInt(res[2]);
  78. var day = parseInt(res[3]);
  79. var h = parseInt(res[4]);
  80. if (h < 0 || h > 24) { return false; }
  81. var i = parseInt(res[5]);
  82. if (i < 0 || i > 60) { return false; }
  83. var s = parseInt(res[6]);
  84. if (s < 0 || s > 60) { return false; }
  85. var leftTime = new Date(year, month - 1, day, h, i, s);
  86. this.leftTime = leftTime;
  87. clearTimeout(this.outTimer);
  88. this.countDown();
  89. },
  90. countDown: function (){
  91. var leftTime = this.leftTime - new Date();
  92. this.leftTimeNum = leftTime;
  93. if (leftTime > 0) {
  94. var day = parseInt(leftTime / (1000 * 60 * 60 * 24));
  95. var hours = parseInt((leftTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  96. var minutes = parseInt((leftTime % (1000 * 60 * 60)) / (1000 * 60));
  97. var seconds = parseInt((leftTime % (1000 * 60)) / 1000);
  98. if (hours < 10) { hours = '0' + hours;}
  99. if (minutes < 10) { minutes = '0' + minutes; }
  100. if (seconds < 10) { seconds = '0' + seconds; }
  101. this.h = hours; this.i = minutes; this.s = seconds; this.d = day;
  102. this.outTimer = setTimeout(()=>{this.countDown();}, 1000);
  103. }else{
  104. clearTimeout(this.outTimer);
  105. this.h = '00'; this.i = '00'; this.s = '00'; this.d = 0;
  106. this.$emit('endDo');
  107. }
  108. },
  109. reSetTimer : function(timer){
  110. clearTimeout(this.outTimer);
  111. this.timerIn = timer;
  112. this.runbase();
  113. },
  114. getTimeRemaining : function(){
  115. if(this.leftTimeNum < 0){return 0;}
  116. return parseInt(this.leftTimeNum / 1000);
  117. }
  118. }
  119. }
  120. </script>
  121. <style scoped>
  122. .grace-countdown{display:flex; flex-wrap:nowrap; justify-content:center;}
  123. .grace-countdown-splitor{justify-content:center; padding:0 5rpx;}
  124. .grace-countdown-numbers{border-radius:8rpx; margin:0 5rpx; text-align:center; border:1px solid #000000; font-size:22rpx;}
  125. </style>