定时提醒 JS 小程序开发，为生活增添便捷与秩序

语琴 . 发布于 2025-05-09 15:59:08 74 浏览

在快节奏的现代生活中,我们常常面临各种忙碌的事务和容易遗忘的事项，定时提醒功能就像是一位贴心的小助手，能够帮助我们有条不紊地安排生活、工作和学习，而借助 JavaScript 开发一个具有定时提醒功能的小程序，不仅能满足我们的个性化需求，还能让提醒变得更加及时和准确，让我们一起探索如何进行定时提醒 JS 小程序的开发吧😃

项目准备

我们需要一些基本的开发工具和知识储备。

开发环境：
- 安装 Node.js，它是 JavaScript 运行环境，为后续的开发提供基础支持。
- 选择一个适合的代码编辑器,Visual Studio Code，它具有丰富的插件和良好的代码编辑体验。
前端知识：
- 对 HTML（超文本标记语言）、CSS（层叠样式表）有一定的了解，它们用于构建小程序的界面结构和样式。
- 深入掌握 JavaScript，它是实现定时提醒功能的核心语言。

创建小程序项目结构

在本地创建一个文件夹,用于存放我们的小程序项目，命名为“timer - reminder - app”，在该文件夹下，创建以下几个主要文件和目录：

index.html：作为小程序的入口页面，包含小程序的整体结构。
index.css：用于定义页面的样式，如布局、颜色、字体等。
index.js：编写定时提醒的逻辑代码。
assets目录：用于存放一些图片、图标等资源文件，如果有需要的话。

编写 HTML 结构

打开“index.html”文件，编写如下代码来搭建页面框架：

<!DOCTYPE html>
<html lang="zh - CN">
<head>
  <meta charset="UTF - 8">
  <meta name="viewport" content="width=device - width, initial - scale = 1.0">
  <link rel="stylesheet" href="index.css">定时提醒小程序</title>
</head>
<body>
  <div class="container">
    <h1>定时提醒小程序</h1>
    <label for="reminder - time">提醒时间：</label>
    <input type="time" id="reminder - time">
    <label for="reminder - message">提醒内容：</label>
    <textarea id="reminder - message"></textarea>
    <button onclick="setReminder()">设置提醒</button>
    <div id="reminders - list"></div>
  </div>
  <script src="index.js"></script>
</body>
</html>

这段代码创建了一个简单的表单界面,用户可以输入提醒时间和内容，点击“设置提醒”按钮来添加提醒。“reminders - list” div 用于显示所有已设置的提醒列表。

设计 CSS 样式

在“index.css”文件中添加如下样式，使页面更加美观：

body {
  font - family: Arial, sans - serif;
  background - color: #f4f4f4;
  display: flex;
  justify - content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}
.container {
  background - color: #fff;
  padding: 20px;
  border - radius: 5px;
  box - shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  width: 300px;
}
h1 {
  text - align: center;
  color: #333;
}
label {
  display: block;
  margin - bottom: 5px;
}
input,
textarea {
  width: 100%;
  padding: 8px;
  margin - bottom: 15px;
  border: 1px solid #ccc;
  border - radius: 3px;
}
button {
  background - color: #007BFF;
  color: #fff;
  padding: 10px 15px;
  border: none;
  border - radius: 3px;
  cursor: pointer;
}
button:hover {
  background - color: #0056b3;
}
#reminders - list {
  margin - top: 15px;
  list - style: none;
  padding: 0;
}
#reminders - list li {
  border: 1px solid #ccc;
  border - radius: 3px;
  padding: 10px;
  margin - bottom: 10px;
  background - color: #f9f9f9;
}

通过这些样式,页面看起来更加整洁、舒适，符合用户操作习惯。

实现 JavaScript 定时提醒逻辑

重头戏来了,在“index.js”文件中编写定时提醒的核心代码：

let reminders = [];
function setReminder() {
  const timeInput = document.getElementById('reminder - time').value;
  const messageInput = document.getElementById('reminder - message').value;
  if (timeInput && messageInput) {
    const reminder = {
      time: new Date(timeInput),
      message: messageInput
    };
    reminders.push(reminder);
    displayReminders();
    const now = new Date();
    const diff = reminder.time - now;
    if (diff > 0) {
      setTimeout(() => {
        alert(reminder.message);
        removeReminder(reminder);
      }, diff);
    } else {
      alert('请设置未来的提醒时间');
    }
  } else {
    alert('请填写完整的提醒时间和内容');
  }
}
function displayReminders() {
  const reminderList = document.getElementById('reminders - list');
  reminderList.innerHTML = '';
  reminders.forEach((reminder, index) => {
    const listItem = document.createElement('li');
    listItem.textContent = `${reminder.time.toLocaleString()} - ${reminder.message}`;
    const removeButton = document.createElement('button');
    removeButton.textContent = '删除';
    removeButton.onclick = () => {
      removeReminder(reminder);
    };
    listItem.appendChild(removeButton);
    reminderList.appendChild(listItem);
  });
}
function removeReminder(reminder) {
  reminders = reminders.filter(r => r!== reminder);
  displayReminders();
}

在这段代码中：

setReminder函数获取用户输入的提醒时间和内容，创建一个提醒对象并添加到reminders数组中，然后根据当前时间计算与提醒时间的差值，如果是未来时间，则使用setTimeout设置定时提醒，时间到达时弹出提醒框并删除该提醒。
displayReminders函数负责将所有已设置的提醒显示在页面上。
removeReminder函数用于删除指定的提醒，更新reminders数组并重新显示提醒列表。

测试与优化

完成上述代码编写后,在浏览器中打开“index.html”文件，就可以开始测试我们的定时提醒小程序啦😃，尝试设置不同的提醒时间和内容，看看是否能准确收到提醒。

如果发现问题,可以进行如下优化：

时间格式验证：目前对用户输入的时间格式没有严格验证，可以添加一些正则表达式来确保输入的时间格式正确。
声音提醒：除了弹出提醒框，还可以添加声音提醒功能，让用户在各种环境下都能及时收到提醒，这可以通过 HTML5 的Audio元素或者一些第三方音频库来实现。
数据存储：考虑将提醒数据存储起来，以便下次打开小程序时仍然能够显示之前设置的提醒，可以使用浏览器的本地存储或者 IndexedDB 来实现数据持久化。

通过不断地测试和优化,我们的定时提醒 JS 小程序将变得更加完善和实用，真正成为我们生活中的得力助手，帮助我们更好地管理时间和事务，不再错过任何重要的时刻🎉。

定时提醒js小程序开发