Vue 實現countDown倒計時
阿新 • • 發佈：2017-11-08
str switch posit imp lac jquery rep 初始化 重新
項目中要用到倒計時，用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> 16import $ 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>
Vue 實現countDown倒計時