当前位置:   article > 正文

uni-app 倒计时组件

uni-app 倒计时组件
  1. <template>
  2. <view class="time" :style="justifyLeft">
  3. <text class="red" v-if="tipText">{{ tipText }}</text>
  4. <text class="styleAll" v-if="isDay === true">{{ day }}</text>
  5. <text class="timeTxt red" v-if="dayText">{{ dayText }}</text>
  6. <text class="styleAll">{{ hour }}</text>
  7. <text class="timeTxt red" v-if="hourText">{{ hourText }}</text>
  8. <text class="styleAll">{{ minute }}</text>
  9. <text class="timeTxt red" v-if="minuteText">{{ minuteText }}</text>
  10. <text class="styleAll">{{ second }}</text>
  11. <text class="timeTxt red" v-if="secondText">{{ secondText }}</text>
  12. </view>
  13. </template>
  14. <script>
  15. export default {
  16. name: "countDown",
  17. props: {
  18. justifyLeft: {
  19. type: String,
  20. default: ""
  21. },
  22. //距离开始提示文字
  23. tipText: {
  24. type: String,
  25. default: "倒计时"
  26. },
  27. dayText: {
  28. type: String,
  29. default: "天"
  30. },
  31. hourText: {
  32. type: String,
  33. default: "时"
  34. },
  35. minuteText: {
  36. type: String,
  37. default: "分"
  38. },
  39. secondText: {
  40. type: String,
  41. default: "秒"
  42. },
  43. datatime: {
  44. type: Number,
  45. default: 0
  46. },
  47. isDay: {
  48. type: Boolean,
  49. default: true
  50. },
  51. id:{
  52. type: String | Number,
  53. default: ""
  54. }
  55. },
  56. data: function() {
  57. return {
  58. day: "00",
  59. hour: "00",
  60. minute: "00",
  61. second: "00"
  62. };
  63. },
  64. created: function() {
  65. this.show_time();
  66. },
  67. mounted: function() {},
  68. methods: {
  69. show_time: function() {
  70. let that = this;
  71. function runTime() {
  72. //时间函数
  73. let intDiff = that.datatime - Date.parse(new Date()) / 1000; //获取数据中的时间戳的时间差;
  74. let day = 0,
  75. hour = 0,
  76. minute = 0,
  77. second = 0;
  78. if (intDiff > 0) {
  79. //转换时间
  80. if (that.isDay === true) {
  81. day = Math.floor(intDiff / (60 * 60 * 24));
  82. } else {
  83. day = 0;
  84. }
  85. hour = Math.floor(intDiff / (60 * 60)) - day * 24;
  86. minute = Math.floor(intDiff / 60) - day * 24 * 60 - hour * 60;
  87. second =
  88. Math.floor(intDiff) -
  89. day * 24 * 60 * 60 -
  90. hour * 60 * 60 -
  91. minute * 60;
  92. if (hour <= 9) hour = "0" + hour;
  93. if (minute <= 9) minute = "0" + minute;
  94. if (second <= 9) second = "0" + second;
  95. that.day = day;
  96. that.hour = hour;
  97. that.minute = minute;
  98. that.second = second;
  99. } else {
  100. that.day = "00";
  101. that.hour = "00";
  102. that.minute = "00";
  103. that.second = "00";
  104. clearInterval(runTime)
  105. uni.$emit('endTime',that.id)
  106. }
  107. }
  108. runTime();
  109. setInterval(runTime, 1000);
  110. }
  111. }
  112. };
  113. </script>
  114. <style>
  115. .time{
  116. display: flex;
  117. justify-content: center;
  118. }
  119. .red{
  120. color: #fc4141;
  121. margin: 0 4rpx;
  122. }
  123. </style>

剩余
                    <CountDown :is-day="false" :tip-text="' '" :day-text="' '" :hour-text="' : '" :minute-text="' : '" :second-text="' '"
                     :datatime="combinationData.end_time"></CountDown>
                    结束

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/知新_RL/article/detail/671891
推荐阅读
相关标签
  

闽ICP备14008679号