Looking for a simple IONIC timer (countdown) code

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

maybe this?

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!

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);
 

  }
7 Likes

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

1 Like

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>

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;
    }
  }
3 Likes

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;
}

seconds;
minutes;
hours;
clockDisplay: string;
interval: number;
countdowntimer(duration) {
if (duration > 0) {
setInterval(() => {
duration = duration - 1;
if (duration <= 0) {
return;
}
if (duration % 60 < 10) {
this.seconds = “0” + parseInt("" + duration % 60);
} else {
this.seconds = “” + parseInt((duration % 60).toString());
}
if (duration / 60 < 10) {
this.minutes = “0” + parseInt("" + duration / 60, 10);
} else {
this.minutes = “” + parseInt((duration / 60).toString(), 10);
}

    if (duration / 3600 < 10) {
      this.hours = "" + parseInt("" + duration / 3600);
    } else {
      this.hours = "" + parseInt((duration / 3600).toString())
    }
    if (this.minutes >= 60) {
      this.minutes = parseInt("" + this.minutes % 60);
    }
    this.clockDisplay = this.minutes + "m:" + this.seconds + "s";
    if (this.hours == 0 && this.minutes == 0 && this.seconds == 1) {
    //write ur code........

}
}, 1000);
}
}

you need to pass duration in seconds: countdowntimer(3600)

I got this error : Module not found: Error: Can’t resolve ‘@mobiscroll/angular’

import { Component, OnInit } from ‘@angular/core’;

@Component({

selector: ‘app-timer’,

templateUrl: ‘./timer.page.html’,

styleUrls: [’./timer.page.scss’],

})

export class TimerPage implements OnInit {

public timer = 60;

public m = 1;

constructor() {

this.start();

}

start()

{

var IntervalVar = setInterval( function() {

  this.timer--;

  if (this.timer === 0)

   {

    this.timer = 60;

    this.m -= 1;

   }

  if (this.m === 0)

   {

    this.timer = "00";

    this.m = "00"

    clearInterval(IntervalVar);

   }

}.bind(this) , 1000)

}

ngOnInit() {

}

<ion-title>timer</ion-title>

{{m}}:{{timer}}