# Looking for a simple IONIC timer (countdown) code

**URL:** <https://forum.ionicframework.com/t/looking-for-a-simple-ionic-timer-countdown-code/115164>\
**Category:** ionic-v3\
**Created:** [December 12, 2017, 8:59pm UTC](https://forum.ionicframework.com/t/looking-for-a-simple-ionic-timer-countdown-code/115164 "2017-12-12T20:59:06Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![perenyitamas](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/perenyitamas/32/113906_2.png) [@perenyitamas](https://forum.ionicframework.com/u/perenyitamas)\
**Post date:** [December 12, 2017, 8:59pm UTC](https://forum.ionicframework.com/t/looking-for-a-simple-ionic-timer-countdown-code/115164/1 "2017-12-12T20:59:07Z")

</div>

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? ☹

Thank you

---

<div class="post-metadata">

**Author:** ![FnnHuman](https://avatars.discourse-cdn.com/v4/letter/f/5f8ce5/32.png) [@FnnHuman](https://forum.ionicframework.com/u/FnnHuman)\
**Post date:** [December 13, 2017, 10:55am UTC](https://forum.ionicframework.com/t/looking-for-a-simple-ionic-timer-countdown-code/115164/3 "2017-12-13T10:55:52Z")

</div>

maybe this?

> **[Angular (2/4/5) and Ionic (2/3) Timer Examples | Mobiscroll](https://demo.mobiscroll.com/angular/timer)**
>
> Timer demos for mobile & desktop featuring countdown, stopwatch with lap times, pause, stop, reset and more. For Angular 2/4/5 and Ionic 2/3.

---

<div class="post-metadata">

**Author:** ![souwei255](https://avatars.discourse-cdn.com/v4/letter/s/3bc359/32.png) [@souwei255](https://forum.ionicframework.com/u/souwei255)\
**Post date:** [December 13, 2017, 2:23pm UTC](https://forum.ionicframework.com/t/looking-for-a-simple-ionic-timer-countdown-code/115164/4 "2017-12-13T14:23:37Z")

</div>

Check this repo out [https://github.com/yannbf/ionic3-components](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!

---

<div class="post-metadata">

**Author:** ![akr\_rajkumar](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/akr_rajkumar/32/116194_2.png) [@akr\_rajkumar](https://forum.ionicframework.com/u/akr_rajkumar)\
**Post date:** [December 13, 2017, 2:27pm UTC](https://forum.ionicframework.com/t/looking-for-a-simple-ionic-timer-countdown-code/115164/5 "2017-12-13T14:27:55Z")

</div>

Try the below thing, which I’m using

```auto

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

  }

```

---

<div class="post-metadata">

**Author:** ![gokujy](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/gokujy/32/117753_2.png) [@gokujy](https://forum.ionicframework.com/u/gokujy)\
**Post date:** [March 12, 2018, 12:02pm UTC](https://forum.ionicframework.com/t/looking-for-a-simple-ionic-timer-countdown-code/115164/7 "2018-03-12T12:02:26Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![akr\_rajkumar](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/akr_rajkumar/32/116194_2.png) [@akr\_rajkumar](https://forum.ionicframework.com/u/akr_rajkumar)\
**Post date:** [March 12, 2018, 12:24pm UTC](https://forum.ionicframework.com/t/looking-for-a-simple-ionic-timer-countdown-code/115164/8 "2018-03-12T12:24:51Z")

</div>

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

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

```

---

<div class="post-metadata">

**Author:** ![devil13](https://avatars.discourse-cdn.com/v4/letter/d/94ad74/32.png) [@devil13](https://forum.ionicframework.com/u/devil13)\
**Post date:** [October 29, 2018, 9:49am UTC](https://forum.ionicframework.com/t/looking-for-a-simple-ionic-timer-countdown-code/115164/9 "2018-10-29T09:49:55Z")

</div>

html code

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

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

```

ts code…

```auto
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 …

```auto
.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;
    }
  }

```

---

<div class="post-metadata">

**Author:** ![kunalsk](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/kunalsk/32/124306_2.png) [@kunalsk](https://forum.ionicframework.com/u/kunalsk)\
**Post date:** [November 27, 2018, 6:54am UTC](https://forum.ionicframework.com/t/looking-for-a-simple-ionic-timer-countdown-code/115164/10 "2018-11-27T06:54:10Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ranjithreddy](https://avatars.discourse-cdn.com/v4/letter/r/6f9a4e/32.png) [@ranjithreddy](https://forum.ionicframework.com/u/ranjithreddy)\
**Post date:** [April 15, 2019, 11:27am UTC](https://forum.ionicframework.com/t/looking-for-a-simple-ionic-timer-countdown-code/115164/11 "2019-04-15T11:27:04Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![izainalm](https://avatars.discourse-cdn.com/v4/letter/i/a88e57/32.png) [@izainalm](https://forum.ionicframework.com/u/izainalm)\
**Post date:** [December 17, 2019, 12:21pm UTC](https://forum.ionicframework.com/t/looking-for-a-simple-ionic-timer-countdown-code/115164/12 "2019-12-17T12:21:32Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![mhassan2020](https://avatars.discourse-cdn.com/v4/letter/m/ac91a4/32.png) [@mhassan2020](https://forum.ionicframework.com/u/mhassan2020)\
**Post date:** [January 8, 2020, 11:15am UTC](https://forum.ionicframework.com/t/looking-for-a-simple-ionic-timer-countdown-code/115164/13 "2020-01-08T11:15:55Z")

</div>

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() {

}

---

<div class="post-metadata">

**Author:** ![mhassan2020](https://avatars.discourse-cdn.com/v4/letter/m/ac91a4/32.png) [@mhassan2020](https://forum.ionicframework.com/u/mhassan2020)\
**Post date:** [January 8, 2020, 11:16am UTC](https://forum.ionicframework.com/t/looking-for-a-simple-ionic-timer-countdown-code/115164/14 "2020-01-08T11:16:18Z")

</div>

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

```

{{m}}:{{timer}}

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [July 19, 2021, 9:59pm UTC](https://forum.ionicframework.com/t/looking-for-a-simple-ionic-timer-countdown-code/115164/15 "2021-07-19T21:59:25Z")

</div>