Home > Software engineering >  Countdown timer js refresh every 1 second
Countdown timer js refresh every 1 second

Time:09-08

currently my countdown timer doesn't refresh itself every 1 second so it doesn't actually look like a timer. I'm trying fix this but I don't seem to know how. Here is my javascript code:

 //Event end date list data
let goodsList = [
  {actEndTime: '2023-1-22 10:00:43'},
]
Page({
  data: {
    countDownList: [],
    actEndTimeList: []
  },
  onl oad(){
    let endTimeList = [];
    //Commit the end time parameters of the event into a separate array for easy operation
    goodsList.forEach(o => {endTimeList.push(o.actEndTime)})
    this.setData({ actEndTimeList: endTimeList});
    //Execute countdown function
    this.countDown();
  },
  timeFormat(param){//Formatting function less than 10
    return param <10? '0'   param: param; 
  },
  countDown(){//Countdown function
    //Get the current time and the end time array of the event
    let newTime = new Date().getTime();
    let endTimeList = this.data.actEndTimeList;
    let countDownArr = [];

    //Process the end time and render it to the page
    endTimeList.forEach(o => {
      let endTime = new Date(o).getTime();
      let obj = null;
      //If the event is not over, process the time
      if (endTime-newTime> 0){
        let time = (endTime-newTime)/1000;
        //Get day, hour, 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{//The event has ended, all set to '00'
        obj = {
          day: '00',
          hou: '00',
          min: '00',
          sec: '00'
        }
      }
      countDownArr.push(obj);
    })
    //Render, and then execute a countdown function every second
    this.setData({ countDownList: countDownArr})
    setTimeout(this.countDown,1000);
  }
})

[[edited]] Here is when I restart compiling my project: enter image description here

I'm creating this with miniprogram by the way, but using javascript.

CodePudding user response:

Instead of

setTimeout(this.countDown,1000);

use this

setInterval(this.countDown,1000);

CodePudding user response:

try this pls...

//Event end date list data
    let goodsList = [
      {actEndTime: '2023-1-22 10:00:43'},
    ]
    Page({
      data: {
        countDownList: [],
        actEndTimeList: []
      },
      onl oad(){
        let endTimeList = [];
        //Commit the end time parameters of the event into a separate array for easy operation
        goodsList.forEach(o => {endTimeList.push(o.actEndTime)})
        this.setData({ actEndTimeList: endTimeList});
        //Execute countdown function
        this.countDown();
        setInterval(this.countDown,1000); // here what i change
      },
      timeFormat(param){//Formatting function less than 10
        return param <10? '0'   param: param; 
      },
      countDown(){//Countdown function
        //Get the current time and the end time array of the event
        let newTime = new Date().getTime();
        let endTimeList = this.data.actEndTimeList;
        let countDownArr = [];
    
        //Process the end time and render it to the page
        endTimeList.forEach(o => {
          let endTime = new Date(o).getTime();
          let obj = null;
          //If the event is not over, process the time
          if (endTime-newTime> 0){
            let time = (endTime-newTime)/1000;
            //Get day, hour, 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{//The event has ended, all set to '00'
            obj = {
              day: '00',
              hou: '00',
              min: '00',
              sec: '00'
            }
          }
          countDownArr.push(obj);
        })
        //Render, and then execute a countdown function every second
        this.setData({ countDownList: countDownArr})
      }
    })
  • Related