私のオンライン試験のためにangular2で書かれたストップウォッチタイマー機能が必要です。 HH:MM:SS形式で表示されます。 それは午前1時00分00秒から開始する必要がありますし、あなたはこのようにそれを行うことができます夜十二時00分00秒angularJS 2のカウントダウンタイマー機能
-4
A
答えて
1
で終了する必要があります:
@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);
}
}
ライブデモ:https://plnkr.co/edit/BkMkAuSoqVgQMhqEKAAg?p=preview
しかしがある、などの常に、目標を達成するための複数の方法! :)
+0
ありがとうございました.... –
+0
回答としてお答えします。 – mxii
0
Htmlのカウントダウンタイマー機能がトリガ を取得した上で要素ボタン...
<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>
完全なカウントダウンタイマー機能(下記のコードでここに は、コードのこの部分を含めてくださいタイマーコンポーネントクラスで)
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コード。
.blink_me {
animation: blinker 1s linear infinite;
}
@keyframes blinker {
50% {
opacity: 0;
}
}
.white {
color: white;
}
.red {
color: #ff0000;
}
関連する問題
- 1. Swift - カウントダウンタイマーが機能しないUILabel
- 2. AngularJSカスタムフィルター機能
- 3. AngularJsフィルター機能
- 4. Angularjsのドラッグ機能
- 5. AngularjsコールプレインJS機能
- 6. AngularJSリンクが機能
- 7. AngularJSのミドルウェアタイプの機能は?
- 8. AngularJS:サービス内の機能が
- 9. 機能の終了angularjsが
- 10. AngularJSコントローラ内の機能
- 11. AngularJsコントローラーのライブクロック機能
- 12. angularjsドロップダウン機能の問題
- 13. AngularJS 1.4でbindToControllerの機能
- 14. angularjsの再利用機能
- 15. Angular2のポーズ機能付きの単純なカウントダウンタイマーを作成
- 16. 削除機能はangularJS
- 17. AngularJS - 成功には機能
- 18. APIリクエスト機能AngularJSをクリーンアップ
- 19. カウントダウンタイマーが完全に機能していません
- 20. ログアウト機能でAngularJS $の場所が機能しない
- 21. AngularJS:コントローラ間での機能の共有
- 22. コールサービス機能 - 2
- 23. AngularJSの機能を無効にする
- 24. AngularJSクライアント側からのログアウト機能
- 25. 2つのカウントダウンタイマーを作るには?
- 26. 1つの使用私は2つの機能を持つ別の条件angularJS
- 27. AngularJS $ routeProvider:ルーティングが機能しません
- 28. AngularJSクエリフィルタが機能しない
- 29. AngularJSログアウトが機能しない
- 30. AngularJS - コントローラー機能が動作しない
JSを作成し、あなたが立ち往生している間違いなくangular2 – anshuVersatile
に動作しますか? –
私はangular2の時計時計タイマーの方法を見つけるのを手伝ってください。 –