为什么需要打卡？

想象你决定每天跑步，第一天热情满满，第三天开始犹豫，第七天就忘了。打卡就像一个小本子，每天记一笔，看着连续打卡的天数越来越多，你就不舍得断了。

今天我们来做一个属于自己的习惯打卡网页，放在手机浏览器里随时用。

整体思路

我们的打卡网页很简单：

页面上显示你要养成的习惯

每个习惯旁边有个按钮，点一下就打卡

打卡记录保存在浏览器里，关掉再打开还在

显示连续打卡天数

第一步：创建HTML文件

新建一个文件叫 index.html，写入基本结构：

今日打卡

这就像盖房子先搭好框架，title是房子的门牌号，body是房间。

第二步：写样式让它好看

在head标签里加上style标签，给按钮和页面加点颜色。把背景设成浅色，按钮设成圆角的绿色，打卡后变成金色。这就像给房子装修，让它住起来舒服。

第三步：写JavaScript逻辑

新建 app.js 文件，这是打卡网页的"大脑"：

// 定义你的习惯
var habits = ["早起", "跑步", "读书", "喝水8杯"];

// 获取今天的日期
var today = new Date().toDateString();

// 从浏览器存储读取记录
var records = JSON.parse(
localStorage.getItem("habits") || "{}"
);

// 渲染习惯列表
function render() {
var html = "";
for (var i = 0; i < habits.length; i++) {
var done = records[today] &&
records[today].indexOf(habits[i]) > -1;
html += "

";
}
document.getElementById("habits").innerHTML = html;
}

localStorage就像浏览器自带的小本子，关掉浏览器数据还在。

第四步：添加打卡功能

给按钮绑定点击事件，点击后把这个习惯加到今天的记录里，然后保存到localStorage，重新渲染页面。

第五步：显示连续天数

遍历记录，从今天往前数，如果某一天有记录就连续天数加1，断了就停止。把这个数字显示在页面顶部。

怎么用？

双击 index.html 就能在浏览器里打开。想在手机上用，可以把文件传到服务器上，或者用 GitHub Pages 免费托管。

可以继续加的功能

加一个日历视图，看哪天打了卡

加一个统计图表

支持自定义添加新习惯

一个小小的网页，就能帮你养成好习惯。代码不复杂，但每天打开它的那一刻，就是你变好的开始。