Vue 实现countDown倒计时

Posted 2020-10-13 zhaobao1830

项目中要用到倒计时，用Vue 实现了一个

 

  1 <template>
  2   <transition name="bkcd">
  3     <div class="bkCountDown" v-show="bkCountDownShow">
  4     <div class="kbCountDownTitle">
  5       <img src="http://static.crecgec.com/Kaipiao/countDownTitle.png">
  6     </div>
  7     <div id="kbCountDownContent" class="kbCountDownContent" ref="kbCountDownContent">
  8     </div>
  9     <!--倒计时结束后提示的信息-->
 10     <div class="cdEndCon" v-show="cdEndConShow">{{cdEndContent}}</div>
 11   </div>
 12   </transition>
 13 </template>
 14 
 15 <script>
 16 import $ from \'jquery\'
 17 
 18 export default {
 19   props: {
 20     // 控制倒计时页面显示、隐藏
 21     bkCountDownShow: {
 22       type: Boolean,
 23       default: true
 24     },
 25     // 这个参数：为了实现中途倒计时暂停功能
 26     // 控制倒计时暂停/开始
 27     cdStartOrEnd: {
 28       type: Boolean,
 29       default: true
 30     },
 31     // 倒计时的时间，有父组件传递
 32     countDownTime: {
 33       type: String,
 34       default: \'2017/11/9 15:03:01\'
 35     },
 36     // 倒计时结束后显示的内容
 37     cdEndContent: {
 38       type: String,
 39       default: \'倒计时已经结束\'
 40     }
 41   },
 42   data () {
 43     return {
 44       // 倒计时结束后显示cdEndCon
 45       cdEndConShow: false,
 46       timestamp: \'\', // 倒计时的时间戳
 47       cdTimer: \'\', // setTimeOut值
 48       timeInterval: \'\', // 倒计时结束时间与当前时间的之间的间隔
 49       timeIntervalVal: \'\', // 保存时间间隔的参数
 50       d: \'\',
 51       h: \'\',
 52       m: \'\',
 53       s: \'\',
 54       days: 24 * 60 * 60,
 55       hours: 60 * 60,
 56       minutes: 60
 57     }
 58   },
 59   mounted () {
 60     this.countdown()
 61   },
 62   watch: {
 63     // 监控cdStartOrEnd值
 64     cdStartOrEnd () {
 65       if (this.cdStartOrEnd) {
 66         this.tick()
 67       } else {
 68         clearTimeout(this.cdTimer)
 69       }
 70     }
 71   },
 72   methods: {
 73     countdown () {
 74       this.timestamp = new Date(this.countDownTime).getTime()
 75       this.init(\'kbCountDownContent\')
 76     },
 77     // 初始化
 78     init (ele) {
 79       $.each([\'Hours\', \'Minutes\', \'Seconds\'], function (i) {
 80         $(\'<div class="count\' + this + \'">\').html(
 81           `<div class = "countPos">\\
 82              <span class="digit static">0</span>\\
 83         </div>\\
 84         <div class="countPos">\\
 85           <span class="digit static">0</span>\\
 86         </div>`
 87         ).appendTo($(\'#\' + ele))
 88         if (this !== \'Seconds\') {
 89           $(\'#\' + ele).append(\'<div class="countDiv countDiv\' + i + \'"></div>\')
 90         }
 91       })
 92       this.tick()
 93     },
 94     tick () {
 95 //      每次进入这个方法，就重新计算和当前时间的间隔，然后赋值给timeInterval
 96       this.timeInterval = Math.floor((this.timestamp - (new Date())) / 1000)
 97       if (this.timeInterval < 0) {
 98         this.timeInterval = 0
 99       }
100       this.timeIntervalVal = this.timeInterval
101 //       Number of days left
102 //      现在是只有时分秒，可以通过调整下面的代码，来确定显示什么
103 //      this.d = Math.floor(this.timeInterval / this.days)
104 //      this.updateDuo(0, 1, this.d)
105 //      this.timeInterval -= this.d * this.days
106       // Number of hours left
107       this.h = Math.floor(this.timeInterval / this.hours)
108       this.updateDuo(0, 1, this.h)
109       this.timeInterval -= this.h * this.hours
110       // Number of minutes timeInterval
111       this.m = Math.floor(this.timeInterval / this.minutes)
112       this.updateDuo(2, 3, this.m)
113       this.timeInterval -= this.m * this.minutes
114       // Number of seconds timeInterval
115       this.s = this.timeInterval
116       this.updateDuo(4, 5, this.s)
117       // timeIntervalVal大于0，就执行setTimeout方法
118       if (this.timeIntervalVal > 0) {
119         this.cdTimer = setTimeout(this.tick, 1000)
120       } else {
121         // 倒计时结束
122         this.cdEndConShow = true
123         // 这块可以添加emit，给父组件传参
124         // 通过emit给父组件传参数来操作bkCountDownShow
125         //  bkCountDownShow = false
126       }
127     },
128     updateDuo (minor, major, value) {
129       this.switchDigit($(\'#kbCountDownContent\').find(\'.countPos\').eq(minor), Math.floor(value / 10) % 10)
130       this.switchDigit($(\'#kbCountDownContent\').find(\'.countPos\').eq(major), value % 10)
131     },
132     switchDigit (position, number) {
133       let digit = position.find(\'.digit\')
134       if (digit.is(\':animated\')) {
135         return false
136       }
137       if (position.data(\'digit\') === number) {
138         return false
139       }
140       position.data(\'digit\', number)
141       var replacement = $(\'<span>\', {
142         \'class\': \'digit\',
143         css: {
144           top: \'-170px\',
145           opacity: 0
146         },
147         html: number
148       })
149       digit
150         .before(replacement)
151         .removeClass(\'static\')
152         .animate({top: \'170px\', opacity: 0}, \'slow\', function () {
153           digit.remove()
154         })
155       replacement
156         .delay(100)
157         .animate({top: 0, opacity: 1}, \'slow\', function () {
158           replacement.addClass(\'static\')
159         })
160     }
161   }
162 }
163 </script>
164 
165 <!-- Add "scoped" attribute to limit CSS to this component only -->
166 <style>
167   *{
168     margin:0;
169     padding:0;
170     font-family: \'Microsoft Yahei\',Tahoma,\'Simsun\',\'宋体\' !important;
171   }
172 
173   .bkCountDown{
174     width: 100%;
175     height: 980px;
176     background:url(\'http://static.crecgec.com/Kaipiao/background.png\') #b0b0b0;
177     position: absolute;
178     background-size: cover;
179     overflow: hidden;
180   }
181   .kbCountDownTitle{
182     width: 1070px;
183     height: 120px;
184     line-height: 120px;
185     font-size: 120px;
186     margin: 190px auto 0;
187     text-align: center;
188     color: #fff;
189   }
190   .kbCountDownContent{
191     width:1070px;
192     margin:160px auto 0;
193     text-align:center;
194     letter-spacing:-3px;
195     overflow: hidden;
196   }
197   .countPos{
198     display: inline-block;
199     width: 150px;
200     height: 170px;
201     overflow: hidden;
202     position: relative;
203     margin-left: 15px;
204   }
205 
206   .digit{
207     position:absolute;
208     display:block;
209     width:150px;
210     height: 170px;
211     line-height: 170px;
212     text-align:center;
213     color:#fff;
214     font-size: 80px;
215     background: url(\'http://static.crecgec.com/Kaipiao/countDown.png\') 0 0 no-repeat;
216   }
217 
218   .digit.static{
219     background: url(\'http://static.crecgec.com/Kaipiao/countDown.png\') 0 0 no-repeat;
220   }
221   .countDays,.countHours,.countMinutes,.countSeconds{
222     float: left;
223     font-size: 0;
224   }
225   .countDiv{
226     display:inline-block;
227     width:10px;
228     height:50px;
229     float: left;
230     margin-top: 60px;
231     margin-left: 15px;
232     background: url(\'http://static.crecgec.com/Kaipiao/countDown1.png\') 0 0 no-repeat;
233   }
234   .cdEndCon{
235     width:1070px;
236     margin:20px auto 0;
237     text-align: center;
238     color: #fff;
239     font-size: 20px;
240   }
241   .bkcd-enter-active, .bkcd-leave-active{
242     transition: opacity .5s
243   }
244   .bkcd-enter, .bkcd-leave-to{
245     opacity: 0
246   }
247 </style>