VUE realizes a small program or a commodity spike countdown

Let’s introduce the components of VUE designing a countdown spike. The specific content is as follows:


Countdown The spike component is endless in the e-commerce website, but the idea will change the trace, I have designed a Vue version according to other information: 1, time cannot be the time of the local client must be the time of the server Here, one setTimeout is replaced for time must be unified

2, the start time, the end time passes through the parent component, when the server time participates in the active button within the range of this start time and end time, and participates After the event,

3, synchronized when the components are created, get the current time service time difference, and set the timer inside, every second is judged to see if the spike begins and end,

4. Whether to start and end in the function of the update time,

5, listen in the disable determination button in the COMPUTED hook, can be clicked

6, participate in the activity stop timing in Updated The timing of the device, the page is still stopped when the page is destroyed


Import Moment from 'Moment' Export Default {Name: "spike", Props: {StartTime: {Required: true, validAtor: (val) => {return moment.ismoment (val)}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}} Start: false, end: false, done: false, tip: ', timegap: 0, btntext: "}}, computed: {disabled () {// When the three one number is changed, disable returns true, can not click , // Initialize the status Return! (This.start &&! This.end &&! This.done);}}, async created ()}}}}}}}}}}. TimeGAP = Date.Now () - serverTime; // Current time and server time difference this.UpdateState (); this.timeinterval = setInterval (() => {this.UpdateState ()}, 1000)}, updated () {ix (this.end || this.done) {ClearInterval (this.timeInterval)}}}:}: {handleclicK () {Alert ("Submit Success"); this.done = true; this.btnText = "Participated Event"}, getServertime () {// Simulator Time Return New Promise (resolve, reject) => {setTimeout (() => {// Current time is 10 seconds is server time resolve (new date ( () -10 * 1000) .gettime ()) / / with local time difference}, 0)}} UpdateState () {const now (new date ( () - this.timegap); // Current server time const differentart = this.starttime.diff (now); // Start time and server time Bad const differentued = this.endtime.diff (now); // End time and server time difference IF (Diffstart Button [Disabled] {Cursor: not-allow;}
<0){ this.start=true; this.tip="秒杀已开始"; this.btnText="参加" }else{ this.tip=`距离秒杀开始还剩${Math.ceil(diffStart/1000)}秒`; this.btnText="活动未开始"; } if(diffEnd<=0){ this.end=true; if( !this.btnText==="已参加过活动"||this.btnText==="参加"){ this.tip="秒杀已结束"; this.btnText="活动已结束"; } } } }, beforeDestroy() { clearInterval(this.timeInterval) } }

Design a spike counting component

Import spike from ‘./spike’ import master from ‘moment’ export default {name: “Index”, Components: {spike}, data () {return {endtime: Moment (new date () + 10 * 1000), StartTime: Moment (Date.Now ())) }}}

This information about time operations for time operations

Immediately introduce you to the small program or Vue product spike counting Recently made a small program mall. The list is killing this pit. Still draw on the online big man
[{actestime: ‘2018-06-24 10:00:43’}] let endtimelist = []; / / Advance the end time parameters of the activity into a separate array, easy to operate (o => {endtimelist.push (actendtime)} this.SetData ({actendTimelist: endtimelist}); // Perform a countdown function this.countdown () (); timeformat (param) {// less than 10 Format Format Return Param
{let endTime = new date (o) .getime (); let obj = null; // If the activity is not over, the time is processed if (endtime – newtime> 0) {let TimE = (endtime – newtime) / 1000; // Get the day, time, minute, second let day = parseint (Time / (60 * 60 * 24)); let hou = parseint (Time% (60 * 60 * 24) / 3600); Let min = parseint (TIME% (60 * 60 * 24)% 3600/60); let sec = parseint (Time% (60 * 60 * 24)% 3600% 60); Obj = {day: THIS .timeformat (day), hou: this.timeformat (hou), min: this.timeformat (min), sec: this.timeformat (sec)}} else {// activity has ended, all set to ’00’ Obj = {Day: ’00’, hou: ’00’, min: ’00’, sec: ’00’}} countdownarr.push (obj);} // Rendering, then perform a countdown function every other one. SetData ({CountDownList: countdownarr}) settimeout (this.countdown, 1000);},

¥ {{}}


{ {countdownlist [index] .day}}

  {{countdownload}:   {{countdownload {{countdownload {{countdownload {{countdownload      COUNTDOWNLIST: []   is mainly to circulate the acquisition time separately Array. Then count down. The time compared to the time and computer of the computer.   Then then the index of each item can get the time of each countdown    summarizes    The above is a small series to introduce Vue realizes the component of countdown to kill, I hope to help everyone. If you have any questions, please leave a message, Xiaobian will reply to everyone in time!                      
© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment