Просмотр исходного кода

增加提示音,优化界面

18079408532 1 год назад
Родитель
Сommit
476af5503f
4 измененных файлов с 39 добавлено и 24 удалено
  1. 27 17
      src/app/countdown/countdown.page.ts
  2. 2 0
      src/app/tab1/tab1.page.html
  3. 10 7
      src/app/tab1/tab1.page.ts
  4. BIN
      src/assets/alert.mp3

+ 27 - 17
src/app/countdown/countdown.page.ts

@@ -37,7 +37,8 @@ export class CountdownPage implements OnInit, OnDestroy {
   timer: any;
   isRunning: boolean = false;
   progress: number = 1;
-  pausedTimeLeft: number = 0;
+  remainingSeconds: number = 0;
+  alertAudio: HTMLAudioElement;
 
   constructor(private route: ActivatedRoute, private navCtrl: NavController) {
     addIcons({
@@ -57,6 +58,9 @@ export class CountdownPage implements OnInit, OnDestroy {
       'exit-outline': exitOutline,
       'trash-outline': trashOutline
     });
+
+    // 初始化音频
+    this.alertAudio = new Audio('assets/alert.mp3');
   }
 
   ngOnInit() {
@@ -64,7 +68,8 @@ export class CountdownPage implements OnInit, OnDestroy {
       this.activityType = params['type'];
       this.activityName = params['name'];
       this.duration = parseInt(params['duration']);
-      this.startCountdown(this.duration * 60); // 转换为秒
+      this.remainingSeconds = this.duration * 60; // 转换为秒
+      this.startCountdown();
     });
   }
 
@@ -74,22 +79,22 @@ export class CountdownPage implements OnInit, OnDestroy {
     }
   }
 
-  startCountdown(totalSeconds: number) {
-    let seconds = totalSeconds;
-    if (this.pausedTimeLeft > 0) {
-      seconds = this.pausedTimeLeft;
+  startCountdown() {
+    if (this.timer) {
+      clearInterval(this.timer);
     }
-    const startTime = seconds;
+
+    const startTime = this.remainingSeconds;
     
     this.timer = setInterval(() => {
-      if (seconds > 0) {
-        seconds--;
-        this.progress = seconds / startTime;
-        this.remainingTime = this.formatTime(seconds);
+      if (this.remainingSeconds > 0) {
+        this.remainingSeconds--;
+        this.progress = this.remainingSeconds / startTime;
+        this.remainingTime = this.formatTime(this.remainingSeconds);
       } else {
         this.isRunning = false;
         clearInterval(this.timer);
-        // 可以添加提示音或震动
+        this.playAlertSound(); // 播放提示音
       }
     }, 1000);
   }
@@ -106,12 +111,13 @@ export class CountdownPage implements OnInit, OnDestroy {
   }
 
   togglePause() {
+    console.log('Toggle Pause called');
     if (this.isRunning) {
       clearInterval(this.timer);
-      const timeArray = this.remainingTime.split(':');
-      this.pausedTimeLeft = timeArray.reduce((acc, time) => (60 * acc) + Number(time), 0);
+      console.log('Paused at:', this.remainingSeconds, 'seconds');
     } else {
-      this.startCountdown(this.pausedTimeLeft);
+      console.log('Resuming from:', this.remainingSeconds, 'seconds');
+      this.startCountdown();
     }
     this.isRunning = !this.isRunning;
   }
@@ -119,13 +125,17 @@ export class CountdownPage implements OnInit, OnDestroy {
   stop() {
     clearInterval(this.timer);
     this.isRunning = false;
-    this.remainingTime = this.formatTime(this.duration * 60);
+    this.remainingSeconds = this.duration * 60;
+    this.remainingTime = this.formatTime(this.remainingSeconds);
     this.progress = 1;
-    this.pausedTimeLeft = 0;
   }
 
   exit() {
     this.stop();
     this.navCtrl.back();
   }
+
+  private playAlertSound() {
+    this.alertAudio.play().catch(error => console.error('Error playing alert sound:', error));
+  }
 }

+ 2 - 0
src/app/tab1/tab1.page.html

@@ -9,6 +9,7 @@
     </ion-buttons>
   </ion-toolbar>
 </ion-header>
+
 <ion-content>
   <ion-list>
     <ion-item-sliding *ngFor="let task of tasks">
@@ -25,6 +26,7 @@
       <ion-item-options side="end">
         <ion-item-option color="danger" (click)="deleteTask(task.id)">
           <ion-icon slot="icon-only" name="trash"></ion-icon>
+          删除
         </ion-item-option>
       </ion-item-options>
     </ion-item-sliding>

+ 10 - 7
src/app/tab1/tab1.page.ts

@@ -1,7 +1,8 @@
-import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { IonicModule } from '@ionic/angular';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 
 interface Task {
   id: number;
@@ -13,17 +14,17 @@ interface Task {
 
 @Component({
   selector: 'app-tab1',
-  templateUrl: 'tab1.page.html',
-  styleUrls: ['tab1.page.scss'],
+  templateUrl: './tab1.page.html',
+  styleUrls: ['./tab1.page.scss'],
   standalone: true,
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
   imports: [
     IonicModule,
     CommonModule,
     FormsModule
-  ]
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
-export class Tab1Page {
+export class Tab1Page implements OnInit {
   tasks: Task[] = [];
   isModalOpen = false;
   newTask: Task = {
@@ -34,7 +35,9 @@ export class Tab1Page {
     endTime: new Date().toISOString(),
   };
 
-  constructor() {
+  constructor() {}
+
+  ngOnInit() {
     const savedTasks = localStorage.getItem('tasks');
     if (savedTasks) {
       this.tasks = JSON.parse(savedTasks);

BIN
src/assets/alert.mp3