countdown

countdown 倒计时:时分秒倒计时,支持设置大小,颜色等

组件结构

  1. <template>
  2. <viewclass="tui-countdown-class tui-countdown-box">
  3. <viewclass="tui-countdown-item" :style="{background:bgcolor,borderColor:bcolor,minWidth:minwidth+'rpx',minHeight:minheight+'rpx'}"
  4. v-if="hours">
  5. <view :class="[scale?'tui-countdown-scale':'']" :style="{fontSize:size+'rpx',color:color,lineHeight:size +'rpx'}">{{h}}</view>
  6. </view>
  7. <viewclass="tui-countdown-colon" :style="{lineHeight:colonsize+'rpx',fontSize:colonsize+'rpx',color:coloncolor}"
  8. v-if="hours">:</view>
  9. <viewclass="tui-countdown-item" :style="{background:bgcolor,borderColor:bcolor,minWidth:minwidth+'rpx',minHeight:minheight+'rpx'}">
  10. <view :class="[scale?'tui-countdown-scale':'']" :style="{fontSize:size+'rpx',color:color,lineHeight:size +'rpx'}">{{i}}</view>
  11. </view>
  12. <viewclass="tui-countdown-colon" :style="{lineHeight:colonsize+'rpx',fontSize:colonsize+'rpx',color:coloncolor}">:</view>
  13. <viewclass="tui-countdown-item" :style="{background:bgcolor,borderColor:bcolor,minWidth:minwidth+'rpx',minHeight:minheight+'rpx'}">
  14. <view :class="[scale?'tui-countdown-scale':'']" :style="{fontSize:size+'rpx',color:color,lineHeight:size +'rpx'}">{{s}}</view>
  15. </view>
  16. </view>
  17. </template>

组件脚本

  1. <script>
  2. exportdefault{
  3. name:"tuiCountdown",
  4. props:{
  5. //数字框最小宽度
  6. minwidth:{
  7. type:Number,
  8. default:26
  9. },
  10. //数字框最小高度
  11. minheight:{
  12. type:Number,
  13. default:26
  14. },
  15. //数字框border颜色
  16. bcolor:{
  17. type:String,
  18. default:"#333"
  19. },
  20. //数字框背景颜色
  21. bgcolor:{
  22. type:String,
  23. default:"#fff"
  24. },
  25. //数字框字体大小
  26. size:{
  27. type:Number,
  28. default:24
  29. },
  30. //数字框字体颜色
  31. color:{
  32. type:String,
  33. default:"#333"
  34. },
  35. //是否缩放 0.8
  36. scale:{
  37. type:Boolean,
  38. default:false
  39. },
  40. //冒号大小
  41. colonsize:{
  42. type:Number,
  43. default:28
  44. },
  45. //冒号颜色
  46. coloncolor:{
  47. type:String,
  48. default:"#333"
  49. },
  50. //剩余时间
  51. time:{
  52. type:Object,
  53. default:{
  54. hours:0,
  55. minute:0,
  56. second:0
  57. }
  58. },
  59. //是否包含小时
  60. hours:{
  61. type:Boolean,
  62. default:true
  63. }
  64. },
  65. data(){
  66. return{
  67. countdown:null,
  68. h:'00',
  69. i:'00',
  70. s:'00'
  71. };
  72. },
  73. created(){
  74. this.doLoop()
  75. },
  76. destroyed(){
  77. clearInterval(this.countdown)
  78. this.countdown =null
  79. },
  80. methods:{
  81. toSeconds(hours, minutes, seconds){
  82. return(hours *60*60)+(minutes *60)+ seconds
  83. },
  84. endOfTime(){
  85. clearInterval(this.countdown)
  86. this.countdown =null;
  87. this.$emit('end',{});
  88. },
  89. doLoop:function(){
  90. let seconds =this.toSeconds(this.time.hours ||0,this.time.minute ||0,this.time.second)
  91. this.countDown(seconds)
  92. this.countdown = setInterval(()=>{
  93. seconds--
  94. if(seconds <0){
  95. this.endOfTime()
  96. return
  97. }
  98. this.countDown(seconds)
  99. },1000)
  100. },
  101. countDown(seconds){
  102. let [hour, minute, second]=[0,0,0]
  103. if(seconds >0){
  104. hour =Math.floor(seconds /(60*60))
  105. minute =Math.floor(seconds /60)-(hour *60)
  106. second =Math.floor(seconds)-(hour *60*60)-(minute *60)
  107. }else{
  108. this.endOfTime()
  109. }
  110. hour = hour <10?('0'+ hour): hour
  111. minute = minute <10?('0'+ minute): minute
  112. second = second <10?('0'+ second): second
  113. this.h = hour;
  114. this.i = minute;
  115. this.s = second
  116. }
  117. }
  118. }
  119. </script>

组件样式

... 此处省略n行

脚本说明

 props: 
     "minwidth" : 数字框最小宽度,类型:"Number",默认值:26
     "minheight" : 数字框最小高度,类型:"Number",默认值:26
     "bcolor" : 数字框border颜色,类型:"String",默认值:"#333"
     "bgcolor" : 数字框背景颜色,类型:"String",默认值:"#fff"
     "size" : 数字框字体大小,类型:"Number",默认值:24
     "color" : 数字框字体颜色,类型:"String",默认值:"#333"
     "scale" : 是否缩放数字 0.8,类型:"Boolean",默认值:false
     "colonsize" : 冒号大小,类型:"Number",默认值:28
     "coloncolor" : 冒号颜色,类型:"String",默认值:"#333"
     "time" : 剩余时间,类型:"Object",默认值:
              {
                hours: 0,
                minute: 0,
                second: 0
             }
     "hours" : 是否包含小时,类型:"Boolean",默认值:true

 methods:
   "toSeconds":将时间转化成秒
   "endOfTime":倒计时结束事件
   "doLoop":倒计时方法
   "countDown":倒计时时间显示处理

示例

... 此处省略n行,下载源码查看