夜雨聆风
一行代码不会写，我照样用 AI 做出了能天天用的小工具（完整代码，复制就跑）
先说结论：不懂代码，你也能做出真正能用的小工具。这不是励志故事，是你今天下午就能做到的事。
那个朋友，一行代码不会写，却用 AI 给自己做了六个工具，把每天两三个小时的重复活，压到了十分钟。最有意思的一个：他刷短视频停不下来，就跟 AI 说，帮我做个倒计时插件吧。调了四五次，插件真做出来了，全程没碰过一行代码。
今天我不讲虚的。我把那个倒计时工具的完整做法写给你，代码全在下面，复制粘贴就能跑。你不用懂一行代码，照着做就行。
刷短视频停不下来？先用一个工具治治
一、这个工具，到底解决什么
你肯定有过这种时刻：
- 刷短视频一抬头，俩小时没了，心里骂自己怎么又没管住。
- 盼着发工资、盼着考试、盼着某个日子，天天数，数得心慌。
- 想专注干点正事，手机往旁边一放，手就自动伸过去了。
这个工具干一件事：在屏幕上给你一个倒计时圆圈，明明白白写着"距离发工资还有 12 天 4 小时 31 分"。看着那个圈一点点走，你心里就有数了，刷不刷得下去，自己掂量。
它不神奇，但它顶用。顶用到我一个朋友每天都要开它。
二、最省事的做法：一个网页文件，零安装
别被"写工具"三个字吓住。下面这套，你不用装任何软件，不用懂编程，三步搞定。
第 1 步：新建一个文本文件
桌面上点右键 → 新建 → 文本文档。名字随便起，比如 `倒计时.txt`。
第 2 步：把代码粘进去
打开这个文件（右键 → 编辑，或者随便找个记事本打开），把下面这一整段代码，原封不动复制进去：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我的倒计时</title>
<style>
body{font-family:"Microsoft YaHei",sans-serif;background:#f5f1e8;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;margin:0}
h1{font-size:22px;color:#333}
.ring{position:relative;width:240px;height:240px}
.ring svg{transform:rotate(-90deg)}
.time{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:24px;color:#2e8b8b;font-weight:bold;text-align:center}
input{padding:8px;font-size:16px;margin-top:18px;border:1px solid #ccc;border-radius:6px}
button{padding:8px 16px;font-size:16px;margin-top:10px;border:none;border-radius:6px;background:#2e8b8b;color:#fff;cursor:pointer}
</style>
</head>
<body>
<h1>距离 <input id="name" value="发工资" size="6"> 还有</h1>
<div class="ring">
<svg width="240" height="240">
<circle cx="120" cy="120" r="100" stroke="#ddd" stroke-width="14" fill="none"/>
<circle id="bar" cx="120" cy="120" r="100" stroke="#2e8b8b" stroke-width="14" fill="none" stroke-linecap="round"/>
</svg>
<div class="time" id="show">--</div>
</div>
<input type="datetime-local" id="target">
<button onclick="setTarget()">开始倒计时</button>
<script>
let timer=null;
function setTarget(){
const t=new Date(document.getElementById('target').value).getTime();
if(!t){alert('先选个时间');return;}
if(timer)clearInterval(timer);
tick();timer=setInterval(tick,1000);
function tick(){
const now=Date.now();
let d=t-now;
if(d<0)d=0;
const day=Math.floor(d/86400000);
const h=Math.floor(d%86400000/3600000);
const m=Math.floor(d%3600000/60000);
const s=Math.floor(d%60000/1000);
document.getElementById('show').innerText=day+'天 '+h+'时'+m+'分'+s+'秒';
const total=365*86400000;
const p=Math.max(0,Math.min(1,1-d/total));
document.getElementById('bar').setAttribute('stroke-dasharray',2*Math.PI*100);
document.getElementById('bar').setAttribute('stroke-dashoffset',2*Math.PI*100*(1-p));
}
}
</script>
</body>
</html>第 3 步：改个后缀，双击打开
把文件名从 `倒计时.txt` 改成 `倒计时.html`。系统可能弹窗问你要不要改，点"是"。然后双击这个文件，它就用浏览器打开了。
页面上方写"距离 发工资 还有"，下面有个时间选择器，选好你的目标时间，点"开始倒计时"，圆圈就开始走了。
就成了。你刚才"写"了一个软件。
三步：新建文本 → 改后缀 → 双击打开
三、想装成浏览器插件？像视频里那样
网页版够用了。但你要是天天用，想点一下浏览器右上角就弹出来，那就做成插件。做法也不难，就是多两个文件。
在桌面建个文件夹，叫 `倒计时插件`，里面放三个文件：
文件 1：`manifest.json`
{
"manifest_version": 3,
"name": "倒计时小插件",
"version": "1.0",
"action": {"default_popup": "popup.html"},
"permissions": []
}文件 2：`popup.html`
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>倒计时</title>
<style>body{font-family:"Microsoft YaHei";width:220px;padding:12px}#show{font-size:20px;color:#2e8b8b;margin-top:10px}input{width:100%;margin-top:8px}</style>
</head>
<body>
<h3>距离 <span id="label">发工资</span></h3>
<input type="datetime-local" id="target">
<button onclick="go()">开始</button>
<div id="show">--</div>
<script src="popup.js"></script>
</body>
</html>文件 3：`popup.js`
let timer=null;
function go(){
const t=new Date(document.getElementById('target').value).getTime();
if(!t){alert('先选时间');return;}
if(timer)clearInterval(timer);
run();timer=setInterval(run,1000);
function run(){
let d=t-Date.now();if(d<0)d=0;
const day=Math.floor(d/86400000),h=Math.floor(d%86400000/3600000),m=Math.floor(d%3600000/60000),s=Math.floor(d%60000/1000);
document.getElementById('show').innerText=day+'天'+h+'时'+m+'分'+s+'秒';
}
}三个文件放好之后，打开 Chrome，地址栏输入 `chrome://extensions`，右上角打开"开发者模式"，点"加载已解压的扩展程序"，选你那个 `倒计时插件` 文件夹。插件就装好了，点右上角图标就能用。
四、你嫌抄代码麻烦？让 AI 替你写
说白了，上面那些代码，也不是我手敲的。我也不会背。我是把需求用大白话告诉 AI，它写好的。
你用的工具，国内就有现成的：通义灵码、豆包、Trae（字节出的）、扣子。随便挑一个，注册登录，把下面这段话复制进去，回车：
> 帮我用 HTML+CSS+JS 写一个单文件的倒计时网页。功能：用户能输入一个目标名称（比如"发工资"）和一个目标时间（日期+时分），页面正中间显示一个圆圈进度条，实时显示"还有 X天 X时 X分 X秒"。风格干净，暖色背景。代码要完整，我保存成 .html 双击就能用。
它给你的，就是第二节那一段代码。你复制出来，照第二节第 3 步存成 html 文件就行。
这里头有个真本事，比抄代码值钱：用大白话把你要的东西讲清楚。讲需求就跟跟人说话一样，说清四件事就行——
- 做什么：我要个倒计时。
- 给谁用：给我自己天天看。
- 长什么样：中间一个圈，下面显示天数。
- 出错了怎么办：时间没选就点开始，弹个提示。
你越能把话说清楚，AI 写出来的东西越合用。我那朋友调了四五次，不是 AI 笨，是他第一次也没讲明白自己到底想要啥。讲明白了，一次就成。
五、别人踩过的坑，也是你的避坑指南
朋友做了六个工具，有一阵视频没流量，挺丧气。后来想通一件事，我替他点出来，你记着：
工具是帮你解决瓶颈的，不是替你思考的。
好多人一上来就想：我多做几个工具，流量不就来了？不对。工具省的是你重复劳动的时间，让你把精力花在真正要动脑子的事上。流量、内容、跟人打交道，这些 AI 替不了，得你自己来。
还有两条实在的：
- 别贪多。先做一个你真能天天用的，比如这个倒计时。做顺手了，再想下一个。一口气做十个半途而废的，不如一个用一年的。
- 别怕调。第一次出来丑、不对，正常。跟 AI 说"圆圈再大点""字再清楚点""换个颜色"，它改就是了。你是在使唤一个不会累的学徒。
三种做法，一张表说清
| 做法 | 适合谁 | 难度 | 要装软件吗 | 优点 |
|---|---|---|---|---|
| 单文件网页（第二节） | 所有人，尤其是第一次 | 一颗星 | 不用 | 双击就用，最省事 |
| 浏览器插件（第三节） | 天天用、想快捷 | 两颗星 | 要开开发者模式 | 点一下就弹，顺手 |
| 让 AI 写（第四节） | 想自己改、想学 | 两颗星 | 要注册个 AI 工具 | 代码随心改，还能学一手 |
常见问题，照着对就行
| 现象 | 原因 | 怎么办 |
|---|---|---|
| 双击 html 打开是代码，不是页面 | 后缀没改成 .html，还是 .txt | 把文件名末尾改成 .html 再双击 |
| 点开始没反应 | 没选时间就点了 | 先选好日期时间，再点开始 |
| 圆圈不动 | 浏览器太老 | 用 Chrome 或 Edge 最新版 |
| 插件加载失败 | 文件夹里三个文件没放齐 | 确认 manifest.json、popup.html、popup.js 都在 |
做好的倒计时长这样，暖色干净
关注公众号「真是初学AI编程」，下期我教你怎么用 AI 把 Excel 里每天重复的活自动干掉，连公式都不用记。想先把今天这份代码和十个零代码 AI 工具清单揣兜里的，后台回复"倒计时"就行。
你今天下午就能做出第一个属于自己的工具。别想，去做。
