Looking for a simple IONIC timer (countdown) code


#1

Hello guys!

I am really trying to find a decent working timer demo (countdown from x minutes) app for ionic 3 to use in my project but i am only finding outdated ones.

Tried installing ng2_countdown but seems like it is no longer updated and i cannot install it. Anyone know a working source? :frowning:

Thank you


#2

Why you not writing your own timer?
Very simple code


#3

maybe this?


Timer error
#4

Check this repo out https://github.com/yannbf/ionic3-components , he has created a number of custom and experimental ionic3 components, i noticed that he has a countdown timer component, you can have a look there as well, good luck!


#5

Try the below thing, which I’m using


maxtime: any=30

  StartTimer(){
    this.timer = setTimeout(x => 
      {
          if(this.maxTime <= 0) { }
          this.maxTime -= 1;

          if(this.maxTime>0){
            this.hidevalue = false;
            this.StartTimer();
          }
          
          else{
              this.hidevalue = true;
          }

      }, 1000);
 

  }

#6

@avishai_peretz_dev why do you feel the need to ask that? Everybody starts somewhere. Development isn’t an elite club.


#7

i am new in ionic, so i dint know how to use this code. Can you tell me please??


#8

In ionic page life cycle, there is a method called ionViewDidEnter

That can be specified as

ionViewDidEnter(){

}

Inside this method, just copy paste the code which I’ve written above. In html, you can just type as

<p *ngIf="hidevalue==false"> {{maxTime}}</p>

#9

html code

<p id="demo"></p>

  <div class="wrapper">
    <div class="pie spinner"></div>
    <div class="pie filler"></div>
    <div class="mask"></div>
  </div>

ts code…

let countDownDate = new Date("Oct 29, 2018 14:50:25").getTime();

    // Update the count down every 1 second
    let x = setInterval(function () {

      // Get todays date and time
      let now = new Date().getTime();

      // Find the distance between now and the count down date
      let distance = countDownDate - now;
      // Time calculations for days, hours, minutes and seconds
      let days = Math.floor(distance / (1000 * 60 * 60 * 24));
      let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
      let seconds = Math.floor((distance % (1000 * 60)) / 1000);
      console.log(now, "now", "countDownDate", countDownDate, "distance", distance, "days", days);

      // Output the result in an element with id="demo"
      document.getElementById("demo").innerHTML = days + "d " + hours + "h "
        + minutes + "m " + seconds + "s ";

      // If the count down is over, write some text 
      if (distance < 0) {
        clearInterval(x);
        document.getElementById("demo").innerHTML = "EXPIRED";
      }
    }, 1000);

scss …

.wrapper {
    position: relative;
    margin: 40px auto;
    background: white;
  }

  .wrapper,
  .wrapper * {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  .wrapper {
    width: 250px;
    height: 250px;
  }

  .wrapper .pie {
    width: 50%;
    height: 100%;
    transform-origin: 100% 50%;
    position: absolute;
    background: #08C;
    border: 5px solid rgba(0, 0, 0, 0.5);
  }

  .wrapper .spinner {
    border-radius: 100% 0 0 100% / 50% 0 0 50%;
    z-index: 200;
    border-right: none;
    animation: rota 10s linear infinite;
  }

  .wrapper:hover .spinner,
  .wrapper:hover .filler,
  .wrapper:hover .mask {
    animation-play-state: running;
  }

  .wrapper .filler {
    border-radius: 0 100% 100% 0 / 0 50% 50% 0;
    left: 50%;
    opacity: 0;
    z-index: 100;
    animation: opa 10s steps(1, end) infinite reverse;
    border-left: none;
  }

  .wrapper .mask {
    width: 50%;
    height: 100%;
    position: absolute;
    background: inherit;
    opacity: 1;
    z-index: 300;
    animation: opa 10s steps(1, end) infinite;
  }

  @keyframes rota {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }

  @keyframes opa {
    0% {
      opacity: 1;
    }

    50%,
    100% {
      opacity: 0;
    }
  }

#10

startTimer() {
console.log()
this.interval = setInterval(() => {
if(this.timeLeft > 0) {
this.timeLeft–;
} else {
this.timeLeft = 60;
}
},1000)
}

pauseTimer() { //you can use this function if you want restart timer
clearInterval(this.interval);
this.timeLeft = 60;
}