Ich brauche eine Stoppuhr-Timer-Funktion in Winkel2 für meine Online-Prüfung Anwendung geschrieben. Es sollte in HH: MM: SS Format angezeigt werden. Es sollte von 01.00.00 beginnen und sollte um 00:00:00Countdown-Timer-Funktion in angularJS 2
Antwort
Sie tun es so enden könnte:
@Component({
selector: 'my-app',
template: `
<div>
<h2>Hello {{name}}</h2>
<button (click)="buttonClicked()">{{ started ? 'reset' : 'start' }}</button>
<br />
<span>{{ time.getHours() }}</span>:
<span>{{ time.getMinutes() }}</span>:
<span>{{ time.getSeconds() }}</span>
</div>
`,
})
export class App {
name:string;
started = false;
time = new Date(2000, 1, 1, 1, 0, 0);
constructor() {
this.name = 'Angular2'
this._timerTick();
}
private _timerTick() {
if (this.started) {
this.time.setSeconds(this.time.getSeconds(), -1);
}
setTimeout(() => this._timerTick(), 1000);
}
buttonClicked() {
if (this.started) this.reset();
else this.start();
}
start() {
this.started = true;
}
reset() {
this.started = false;
this.time = new Date(2000, 1, 1, 1, 0, 0);
}
}
Live-Demo: https://plnkr.co/edit/BkMkAuSoqVgQMhqEKAAg?p=preview
Aber es gibt, wie Immer, mehrere Möglichkeiten, um das Ziel zu erreichen! :)
vielen Dank .... –
als Antwort pls akzeptieren, wenn es hilft :) – mxii
HTML-Element-Taste auf dem Countdown-Timer-Funktion ausgelöst wird ...
<div class="form-group col-sm-3" [ngClass]="{'red':activate, 'white':!activate, 'blink_me':blink}"><i class="fa fa-clock-o" aria-hidden="true"></i> Time Left: <span>{{currentHour}}:{{currentMinute}}:{{currentSeconds}}</span></div>
<button class="btn btn-primary btn-sm" (click)="_timerTick()">Start Timer</button>
komplette Countdown-Timer-Funktion hier im Code unten geht (Bitte um diesen Teil des Codes in Ihrer Timer-Komponentenklasse)
constructor(
private examService: ExamService,
private resultService: ResultService,
private activatedRoute: ActivatedRoute,
private route: Router) {
this.start(); //here our countdown timer function gets called by setting the boolean variable **this.started** as true.
}
start() {
this.started = true;
}
private _timerTick() {
if (this.started) {
if (localStorage.getItem('sec')) { // here it checks, if browser local-storage has key **sec** recorded. Basically, when browser gets refreshed by user on that case it used to store key **sec** in local-storage and continue countdown ticking without starting from the beginning.
this.time = new Date(localStorage.getItem('sec'));
this.time.setSeconds(this.time.getSeconds(), -1);
}
else {
this.time = new Date(2017, 2, 24, 0, 0, this.timeInSeconds);
this.time.setSeconds(this.time.getSeconds(), -1);
}
if (this.time.getHours() === 0 && this.time.getMinutes() === 0 && this.time.getSeconds() === 0) {
localStorage.removeItem('sec');
this.started = false;
this.saveData('Time Over!');
}
this.currentHour = this.time.getHours();
this.currentHour = ("0" + this.currentHour).slice(-2); //Here it check for two digits. If it is single then it adds 0 as prefix to it.
this.currentMinute = this.time.getMinutes();
this.currentMinute = ("0" + this.currentMinute).slice(-2);//Here it check for two digits. If it is single then it adds 0 as prefix to it.
this.currentSeconds = this.time.getSeconds();
this.currentSeconds = ("0" + this.currentSeconds).slice(-2);//Here it check for two digits. If it is single then it adds 0 as prefix to it.
if (this.currentHour == 0 && this.currentMinute < 5) {// This line states, if only 5minutes left out then timer get started blinking. Blink code given in below **css** code section
this.activate = true;
this.blink = true;
}
if (this.currentHour == 0 && this.currentMinute == 0 && this.currentSeconds == 0) {// If time is up then we would remove complete browser cache using below lines of code and also deactivate the timer blinking.
localStorage.removeItem('sec');
localStorage.setItem('examTaken', this.name);
this.activate = false;
this.blink = false;
}
else {
localStorage.setItem('sec', this.time);// If still some time's left out then it'll continuously keep updated with browser localStorage
}
}
setTimeout(() => this._timerTick(), 1000);// For every 1sec timer gets updated here
}
CSS-Code für Timer Blink unten angegeben.
.blink_me {
animation: blinker 1s linear infinite;
}
@keyframes blinker {
50% {
opacity: 0;
}
}
.white {
color: white;
}
.red {
color: #ff0000;
}
- 1. Multiselect in AngularJS 2
- 2. .replace in AngularJs 2
- 3. InterpolateProvider in AngularJS 2
- 4. Listenverwaltung in AngularJS 2/Ionic 2
- 5. Debug NodeJS + AngularJS 2
- 6. Angularjs 2 verschachtelte Schnittstelle
- 7. SystemJS und AngularJS 2
- 8. AngularJS: ist 0 == 2?
- 9. AngularJS 2 CRUD Komponenten
- 10. Kalender UI AngularJS 2
- 11. Manuelle Änderungserkennung in AngularJS oder Angular 2?
- 12. JQuery in dart wählen und AngularJS 2
- 13. Fehler: Unhandled Promise Ablehnung in AngularJS 2
- 14. AngularJS 2 Aufruf außerhalb Funktion in OnInit()
- 15. Implementieren von Routing in AngularJS 2
- 16. erlaubt nicht 2 Leerraum in Text AngularJS
- 17. Wie übergebe ich Abfrageparameter in AngularJS 2?
- 18. ng-Auswahl nicht in AngularJS 2
- 19. this.router ist nicht definiert, in AngularJS 2
- 20. Weltweit laden JQuery in AngularJS 2 Anwendung
- 21. Verwenden von FormBuilder in Angularjs 2 rc4
- 22. Wie Standard-Auswahl 2 in AngularJS
- 23. Wie bohre ich angularJS 2?
- 24. Array mit 2 Eigenschaften, AngularJS
- 25. AngularJS 2 Observable http Änderungserkennung
- 26. AngularJS 2 Routing auf IIS
- 27. AngularJS 2 JSON Unicode-Zeichen
- 28. AngularJs 2 Registerkarte customClass conditional
- 29. AngularJs 2 mit ASP.NET 4.5.1
- 30. Migrate AngularJS 1.x zu AngularJS 2.x
mit js erstellen und werden auf jeden Fall angular2 – anshuVersatile
arbeiten in Wo Sie stecken bleiben? –
hilf mir, den Weg für den Stoppuhrtimer in angular2 zu finden. –