【求助】有没有什么可以部署到cf Workers上面的倒数日项目

开发调优
1

最近发现零零散散多了些重要的日期要标注起来，就像离期末考试、高考、考研还有多少天等等乱七八糟的时间节点要注意，不提前准备还不行，但是时间说短也不算特别短，导致这就需要一个类似于倒数日这样的程序来给我做提醒。
但是我自己又懒得打开这种手机上的app，更何况软件的布局也不算好看。
所以我就需要一个可以部署到cf大善人上面长期稳定跑起来的项目，最好界面美观些，对手机界面的适配不要太离谱。
我觉得github上面应该有相关项目？佬们推荐则个？

24 个赞
2

我也想知道 等一个答案

3

用AI写一个，自己想要什么功能就:plus:什么功能。现在AI写这种网站应该没难度了。

4

很适合用 worker+kv 写一个

5

这种小demo交给AI最好不过了。

// 全功能单文件版本 (ES Module 语法)
export default {
  async fetch(request, env) {
    const url = new URL(request.url);
    const kv = env.COUNTDOWN_KV;

    // POST 请求：添加新事件
    if (url.pathname === '/add' && request.method === 'POST') {
      try {
        const data = await request.formData();
        const name = data.get('name').trim();
        const date = data.get('date');
        
        // 日期格式验证
        if (!/^\d{4}-\d{2}-\d{2}$/.test(date)) {
          throw new Error('日期格式应为 YYYY-MM-DD');
        }
        
        await kv.put(name, date);
        return Response.redirect(url.origin, 303); // 防止重复提交
      } catch (e) {
        return new Response(`错误: ${e.message}`, { status: 400 });
      }
    }

    // GET 请求：显示主界面
    const events = [];
    const keys = await kv.list();
    for (const key of keys.keys) {
      const date = await kv.get(key.name);
      events.push({ name: key.name, date });
    }
    events.sort((a, b) => new Date(a.date) - new Date(b.date)); // 按日期排序

    // 生成响应 HTML
    return new Response(renderHTML(events), {
      headers: { 
        'Content-Type': 'text/html',
        'Cache-Control': 'max-age=3600' // 适当缓存
      }
    });
  }
};

// HTML 模板渲染函数
function renderHTML(events) {
  return `
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>手机端倒数日</title>
  <!-- Pico.css 移动端优先框架 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css">
  <style>
    /* 移动端优化 */
    :root { --primary: #2196F3; }
    .card { margin: 1rem 0; padding: 1rem; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
    .urgent { background: #FFF3E0; }
    form input { font-size: 16px !important; } /* 手机端输入优化 */
    @media (max-width: 480px) {
      h1 { font-size: 1.5rem; }
      .grid { gap: 0.5rem; }
    }
  </style>
</head>
<body>
  <main class="container">
    <h1>📱 手机倒数日</h1>
    
    <!-- 添加事件表单 -->
    <form action="/add" method="post">
      <div class="grid">
        <input type="text" name="name" placeholder="事件名称" required
               autocapitalize="off" autocorrect="off">
        <input type="date" name="date" required>
        <button type="submit" class="secondary">添加</button>
      </div>
    </form>

    <!-- 事件列表 -->
    <div class="grid">
      ${events.map(event => `
        <article class="card ${isUrgent(event.date) ? 'urgent' : ''}">
          <h3>${event.name}</h3>
          <p>目标日期: ${formatDate(event.date)}</p>
          <p class="days-left">剩余天数: <b>${calculateDays(event.date)}</b></p>
          <small>ID: ${event.name}</small>
        </article>
      `).join('')}
    </div>
  </main>

  <script>
    // 动态时间计算
    function calculateDays(target) {
      const diff = new Date(target) - new Date();
      const days = Math.ceil(diff / 864e5);
      return days > 0 ? days + ' 天' : '⏰ 时间到！';
    }

    // 每30分钟自动刷新（适合长期挂载）
    setTimeout(() => location.reload(), 1800000);

    // 触摸优化：按钮点击效果
    document.querySelectorAll('button').forEach(btn => {
      btn.addEventListener('touchstart', () => btn.style.opacity = 0.7);
      btn.addEventListener('touchend', () => btn.style.opacity = 1);
    });
  </script>
</body>
</html>
  `;
}

// 辅助函数
function isUrgent(dateStr) {
  const days = (new Date(dateStr) - Date.now()) / 86400000;
  return days <= 7 && days > 0;
}

function formatDate(dateStr) {
  const [year, month, day] = dateStr.split('-');
  return `${year}年${month}月${day}日`;
}

步骤 1：创建 Worker

  1. 手机浏览器访问 Cloudflare Dashboard
  2. 进入 Workers & Pages → 创建应用 → 创建 Worker
  3. 在代码编辑器中 清空默认内容，粘贴上述完整代码

步骤 2：配置 KV 存储

  1. 在 Worker 编辑页面，点击 设置 → 变量 → KV 命名空间绑定
  2. 点击 添加绑定：
    • 变量名称：COUNTDOWN_KV
    • 选择现有 KV 命名空间 → 创建新命名空间（名称例如 Countdown_DB）
  3. 保存设置

Screenshot_20250307_074901
Screenshot_20250307_0749011080×2340 134 KB

6

佬友后续怎么实现的

7

自己靠不断给claude 3.7提修改要求手搓了一个，花了两三刀呢，主要是这东西用别人的风格我总是不够满足。

8

非常感谢!

1 个赞