Skyworth 密码计算器搭建教程
欢迎来到 Skyworth 密码计算器搭建教程！本教程将指导您如何搭建一个 Skyworth 机顶盒密码计算器，并托管到 Cloudflare Pages。
第一步：准备工作
在开始之前，请确保您已准备好以下内容：
- 一个 Cloudflare 账号
- Node.js 和 npm (或 yarn)
- 基本的 HTML、CSS 和 JavaScript 知识
- Skyworth 机顶盒的相关信息（MAC 地址、Random 码等）
第三步：编写 JavaScript 代码
使用 JavaScript 来实现计算逻辑。 这个例子会调用Cloudflare Worker 来进行计算。
以下是一个 JavaScript 代码示例：
<script>
document.getElementById('calculateButton').addEventListener('click', async function() {
const macAddress = document.getElementById('macAddress').value;
const randomCode = document.getElementById('randomCode').value;
// 调用 Cloudflare Worker
const url = '/api/calculate'; // 假设 Worker 部署在 /api/calculate
const data = { mac: macAddress, random: randomCode };
try {
const response = await fetch(url, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data)
});
if (response.ok) {
const result = await response.text();
document.getElementById('result').value = result;
} else {
document.getElementById('result').value = 'Error: ' + response.statusText;
}
} catch (error) {
document.getElementById('result').value = 'Error: ' + error;
}
});
</script>
第四步：创建 Cloudflare Worker
Cloudflare Worker 用于执行实际的计算。 创建一个名为 `worker.js` 的文件，包含以下代码：
// 完整 worker.js 内容见下面
第五步：部署到 Cloudflare Pages
将 `index.html`, `worker.js` 和其他资源（CSS, 图片等）上传到你的 Git 仓库 (例如 GitHub, GitLab)。
在 Cloudflare 控制台中，选择 Pages，然后创建一个新的 Pages 项目，连接到你的 Git 仓库。
Cloudflare Pages 会自动构建和部署你的网站。
第六步：配置 Cloudflare Workers
在 Cloudflare 控制台中，选择 Workers，然后创建一个新的 Worker。
将 `worker.js` 的代码复制到 Worker 编辑器中。
配置 Worker 的路由，使其监听 `/api/calculate` 路径。
第七步：测试和优化
访问你的 Cloudflare Pages 网站，测试计算器功能，确保所有功能正常工作。
根据需要进行优化和调整。
恭喜！你已经成功搭建了一个 Skyworth 密码计算器，并托管到了 Cloudflare Pages 和 Workers！