用 Cloudflare Workers 和 Pages 搭建查属相 / 差生肖网站

• 最新博文 •

在数字化的时代浪潮下，各类新奇有趣且实用的网站如雨后春笋般涌现。今天，就来跟大家分享一下我如何打造一个别具特色的查属相 / 差生肖网站，而且仅用 HTML + JS + CSS，借助 Cloudflare Workers 和 Pages 就能实现，开发过程中还用到了超棒的 Cursor AI！

灵感的火花

相信大家都对自己的属相以及和其他生肖之间的关系有着好奇。无论是在和朋友聊天时探讨生肖配对，还是在研究传统文化时想要深入了解生肖间的奥秘，一个便捷的查属相 / 差生肖工具就显得尤为必要。这便是我想要搭建这个网站的初衷，希望能为大家提供一个简单易用的线上平台。

技术栈的选择

Cloudflare Workers

Cloudflare Workers 是一个无服务器计算平台，它允许我们在 Cloudflare 的全球网络边缘运行代码。这意味着网站的响应速度会非常快，因为代码离用户更近。而且，它的部署极为便捷，对开发者十分友好。利用 Workers，我们可以轻松地处理用户的请求，从服务器获取数据并返回给用户。

Cloudflare Pages

Cloudflare Pages 则专注于静态网站的构建与部署。它和 Workers 配合默契，能让我们将前端代码（HTML、CSS、JS）快速部署到全球的 CDN 上。这不仅保证了网站的高速访问，还能节省大量的服务器运维成本。

HTML + JS + CSS

这三种技术是网页开发的基石。HTML 负责构建网页的结构，CSS 用于美化页面，让它看起来更加美观、吸引人，而 JS 则赋予了网页交互性。对于我们的查属相 / 差生肖网站来说，HTML 构建出输入界面和结果展示区域，CSS 让页面布局合理且富有美感，JS 则实现生肖查询的核心逻辑。

Cursor AI 助力开发

在开发过程中，Cursor AI 成为了我的得力助手。Cursor AI 是一款智能的代码生成工具，当我遇到一些复杂的逻辑或者不确定如何编写的代码片段时，只需要在它的界面中描述清楚需求，比如 “如何根据用户输入的年份计算属相”，Cursor AI 就能快速生成相应的代码。这大大提高了我的开发效率，减少了在代码编写上花费的时间，让我能够更专注于网站功能的完善和优化。

网站搭建过程

前端页面搭建（HTML + CSS）

首先，使用 HTML 创建一个简单的页面结构。包含一个用于输入年份的文本框，一个提交按钮，以及一个用于展示查询结果的区域。然后，运用 CSS 对页面进行样式设计，设置背景颜色、字体样式、按钮风格等，让页面看起来简洁大方。

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>查属相/差生肖</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <div class="container">
    <h1>查属相/差生肖</h1>
    <input type="number" id="yearInput" placeholder="请输入年份">
    <button onclick="calculateZodiac()">查询</button>
    <div id="result"></div>
  </div>
  <script src="script.js"></script>
</body>

</html>



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 10px rgba(0, 0, 0, 0.1);
  text-align: center;
}

h1 {
  color: #333;
}

input {
  padding: 10px;
  margin: 10px;
  width: 200px;
}

button {
  padding: 10px 20px;
  background-color: #007BFF;
  color: #fff;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

#result {
  margin-top: 20px;
  color: #333;
}

核心逻辑实现（JS）

接下来是核心的 JavaScript 代码部分。通过获取用户输入的年份，利用生肖的循环规律计算出对应的属相。同时，还可以进一步实现计算两个生肖之间的差值等功能。

function calculateZodiac() {
  const yearInput = document.getElementById('yearInput');
  const resultDiv = document.getElementById('result');
  const year = parseInt(yearInput.value);

  if (isNaN(year)) {
    resultDiv.innerHTML = '请输入一个有效的年份';
    return;
  }

  const zodiacs = ['鼠', '牛', '虎', '兔', '龙', '蛇', '马', '羊', '猴', '鸡', '狗', '猪'];
  const index = (year - 4) % 12;
  const zodiac = zodiacs[index < 0? index + 12 : index];

  resultDiv.innerHTML = `您输入的年份 ${year} 的属相是 ${zodiac}`;
}

Cloudflare Workers 和 Pages 部署

将编写好的 HTML、CSS 和 JS 文件上传到 Cloudflare Pages。在 Cloudflare Workers 中编写处理请求的代码，将前端页面与后端逻辑进行连接。通过简单的配置，即可将网站部署到全球的 CDN 上，让用户能够快速访问。

# 总结

通过这次使用 Cloudflare Workers 和 Pages 搭建查属相 / 差生肖网站的经历，我深刻体会到了现代无服务器技术和前端开发技术的强大。利用这些工具，我们能够快速、高效地构建出实用且美观的网站。而 Cursor AI 的加入更是让开发过程变得轻松愉快，极大地提升了开发效率。希望大家也能从我的分享中获取灵感，打造出更多有趣、实用的网站。

下一篇 2025-01-07