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
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);
}
i am new in ionic, so i dint know how to use this code. Can you tell me please??
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;
}
}
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}}