论坛风格切换切换到宽版
发帖 回复
返回列表
  • 12阅读
  • 3回复

uniapp [复制链接]

 上一主题 下一主题
离线北斗星
管理员
 
只看楼主 倒序阅读 使用道具 楼主   发表于: 01-20
复制代码
  1. <template>
  2.     <view class="container">
  3.         <view class="timer-display">{{ formatTime(remainingTime) }}</view>
  5.         <view class="settings">
  6.             <view class="item">
  7.                 <text>倒计时总时长 (分钟):</text>
  8.                 <input type="number" v-model="duration" :disabled="isRunning" />
  9.             </view>
  11.             <view class="item">
  12.                 <text>提醒间隔 (1-5分钟):</text>
  13.                 <picker @change="onIntervalChange" :value="intervalIndex" :range="intervalOptions" :disabled="isRunning">
  14.                     <view class="picker-text">{{ intervalOptions[intervalIndex] }} 分钟</view>
  15.                 </picker>
  16.             </view>
  18.             <view class="item">
  19.                 <text>背景音乐:</text>
  20.                 <switch :checked="useBgMusic" @change="useBgMusic = $event.detail.value" :disabled="isRunning" />
  21.             </view>
  22.         </view>
  24.         <view class="controls">
  25.             <button v-if="!isRunning" type="primary" @click="startTimer">开始闹钟</button>
  26.             <button v-else type="warn" @click="stopTimer">停止/重置</button>
  27.         </view>
  28.     </view>
  29. </template>
  31. <script>
  32. export default {
  33.     data() {
  34.         return {
  35.             duration: 10,           // 总时长（分）
  36.             remainingTime: 600,     // 剩余时间（秒）
  37.             intervalOptions: [1, 2, 3, 4, 5],
  38.             intervalIndex: 0,       // 默认1分钟提醒一次
  39.             isRunning: false,
  40.             useBgMusic: true,
  41.             
  42.             timer: null,
  43.             bgAudio: null,
  44.             alertAudio: null,
  45.             lastRemindTime: 0       // 上次提醒时的剩余时间
  46.         };
  47.     },
  48.     onLoad() {
  49.         // 初始化音频实例
  50.         this.bgAudio = uni.createInnerAudioContext();
  51.         this.bgAudio.src = '/static/bg_music.mp3';
  52.         this.bgAudio.loop = true;
  54.         this.alertAudio = uni.createInnerAudioContext();
  55.         this.alertAudio.src = '/static/alert_tone.mp3';
  56.     },
  57.     methods: {
  58.         onIntervalChange(e) {
  59.             this.intervalIndex = e.detail.value;
  60.         },
  61.         formatTime(seconds) {
  62.             const m = Math.floor(seconds / 60);
  63.             const s = seconds % 60;
  64.             return `${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
  65.         },
  66.         startTimer() {
  67.             this.remainingTime = this.duration * 60;
  68.             this.lastRemindTime = this.remainingTime;
  69.             this.isRunning = true;
  71.             // 播放背景音乐
  72.             if (this.useBgMusic) {
  73.                 this.bgAudio.play();
  74.             }
  76.             this.timer = setInterval(() => {
  77.                 if (this.remainingTime > 0) {
  78.                     this.remainingTime--;
  79.                     this.checkIntervalRemind();
  80.                 } else {
  81.                     this.handleFinish();
  82.                 }
  83.             }, 1000);
  84.         },
  85.         checkIntervalRemind() {
  86.             const intervalSeconds = this.intervalOptions[this.intervalIndex] * 60;
  87.             // 如果距离上次提醒过去了设定的间隔
  88.             if (this.lastRemindTime - this.remainingTime >= intervalSeconds) {
  89.                 this.alertAudio.play();
  90.                 this.lastRemindTime = this.remainingTime;
  91.                 uni.showToast({ title: '间隔提醒', icon: 'none' });
  92.             }
  93.         },
  94.         handleFinish() {
  95.             this.stopTimer();
  96.             this.alertAudio.play(); // 播放结束铃声
  97.             uni.showModal({
  98.                 title: '时间到',
  99.                 content: '闹钟已结束',
  100.                 showCancel: false
  101.             });
  102.         },
  103.         stopTimer() {
  104.             clearInterval(this.timer);
  105.             this.timer = null;
  106.             this.isRunning = false;
  107.             this.bgAudio.stop(); // 停止背景音乐
  108.         }
  109.     },
  110.     onUnload() {
  111.         // 页面销毁释放资源
  112.         if (this.bgAudio) this.bgAudio.destroy();
  113.         if (this.alertAudio) this.alertAudio.destroy();
  114.     }
  115. };
  116. </script>
  118. <style>
  119. .container { padding: 30px; }
  120. .timer-display { font-size: 60px; text-align: center; margin: 40px 0; font-family: monospace; color: #333; }
  121. .settings { background: #f8f8f8; padding: 15px; border-radius: 10px; }
  122. .item { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
  123. input { width: 60px; border-bottom: 1px solid #ccc; text-align: center; }
  124. .picker-text { color: #007AFF; font-weight: bold; }
  125. .controls { margin-top: 30px; }
  126. </style>
回复
举报
分享到 淘江湖 新浪 QQ微博 QQ空间 开心 人人 豆瓣 网易微博 百度 鲜果 白社会 飞信
离线北斗星
管理员
只看该作者 沙发   发表于: 01-20
请用uniapp写一个倒计时闹钟，可以选择背景音乐，间隔1-5分钟提醒一次，可选择提醒铃声，结果时背景音乐停止播放，并可选择提醒音乐。
这是一个使用 uni-app 开发的倒计时闹钟核心代码实现。它包含了倒计时逻辑、背景音乐管理、间隔提醒（每1-5分钟）以及结束提醒功能。
1. 准备工作
请在项目的 static 目录下放置音频文件：
static/bg_music.mp3 (背景音乐)
static/alert_tone.mp3 (提醒/结束铃声)
回复
举报
离线北斗星
管理员
只看该作者 板凳   发表于: 01-20
3. 功能要点说明：
背景音乐逻辑：使用 uni.createInnerAudioContext()。点击“开始”后背景音乐循环播放，倒计时归零或手动停止时，调用 bgAudio.stop() 强制停止。
间隔提醒：在 setInterval 每秒执行时，计算当前剩余时间与上次提醒时间的差值。如果达到用户选中的间隔（1-5分钟），则触发提醒铃声。
铃声选择：代码中演示了固定路径音频。若需让用户选择，可增加一个列表，点击时修改 alertAudio.src 即可。
2026年适配：该代码遵循 uni-app 标准 API，在 iOS、Android 和微信小程序等 2026 年主流平台上均能稳定运行。
4. 注意事项
静音开关：在手机端运行时，请确保手机未开启静音模式，否则 InnerAudioContext 可能没有声音。
后台运行：如果是移动端 App，长时间倒计时建议配合“保活”插件或系统通知权限，否则 App 进入后台后定时器可能会被系统挂起。
回复
举报
离线北斗星
管理员
只看该作者 地板   发表于: 01-21
3. 功能要点说明：
背景音乐逻辑：使用 uni.createInnerAudioContext()。点击“开始”后背景音乐循环播放，倒计时归零或手动停止时，调用 bgAudio.stop() 强制停止。
间隔提醒：在 setInterval 每秒执行时，计算当前剩余时间与上次提醒时间的差值。如果达到用户选中的间隔（1-5分钟），则触发提醒铃声。
铃声选择：代码中演示了固定路径音频。若需让用户选择，可增加一个列表，点击时修改 alertAudio.src 即可。
2026年适配：该代码遵循 uni-app 标准 API，在 iOS、Android 和微信小程序等 2026 年主流平台上均能稳定运行。
4. 注意事项
静音开关：在手机端运行时，请确保手机未开启静音模式，否则 InnerAudioContext 可能没有声音。
后台运行：如果是移动端 App，长时间倒计时建议配合“保活”插件或系统通知权限，否则 App 进入后台后定时器可能会被系统挂起。
回复
举报
发帖 回复
返回列表
快速回复
限100 字节
如果您提交过一次失败了，可以用”恢复数据”来恢复帖子内容
 
上一个 下一个