<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>复古电子办公手伴 | Retro Office Gadget</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}
body {
background: #f8f5f2;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 20px;
}
.retro-box {
width: 100%;
max-width: 380px;
background: #ffffff;
border-radius: 20px;
padding: 30px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
border: 1px solid #eee;
}
.title {
text-align: center;
font-size: 22px;
color: #444;
margin-bottom: 20px;
font-weight: 500;
}
.time-box {
background: #f0ebe5;
padding: 20px;
border-radius: 16px;
text-align: center;
margin-bottom: 20px;
}
.time {
font-size: 32px;
font-weight: bold;
color: #5a5550;
}
.date {
font-size: 14px;
color: #888;
margin-top: 6px;
}
.todo-box {
margin-bottom: 20px;
}
.todo-title {
font-size: 16px;
color: #555;
margin-bottom: 10px;
}
input {
width: 100%;
padding: 12px 15px;
border: 1px solid #eee;
border-radius: 12px;
outline: none;
font-size: 14px;
margin-bottom: 10px;
}
.todo-list {
list-style: none;
}
.todo-item {
padding: 10px 14px;
background: #f9f6f3;
border-radius: 10px;
margin-bottom: 8px;
font-size: 14px;
color: #555;
display: flex;
justify-content: space-between;
align-items: center;
}
.del {
color: #ccc;
cursor: pointer;
}
.ip-box {
text-align: center;
margin-top: 20px;
}
.ip-text {
font-size: 14px;
color: #999;
}
.footer {
text-align: center;
margin-top: 25px;
font-size: 12px;
color: #bbb;
}
</style>
</head>
<body>
<div class="retro-box">
<div class="title">🖥️ 复古电子办公手伴</div>
<div class="time-box">
<div class="time" id="time">00:00:00</div>
<div class="date" id="date">2025年01月01日 星期三</div>
</div>
<div class="todo-box">
<div class="todo-title">📝 今日待办</div>
<input type="text" id="input" placeholder="输入待办事项，按回车添加">
<ul class="todo-list" id="list"></ul>
</div>
<div class="ip-box">
<p class="ip-text">羊毛毡风格IP · 可爱办公小助手</p>
</div>
<div class="footer">
Retro Office Gadget © MIT License
</div>
</div>
<script>
// 时钟
function updateTime() {
let now = new Date();
let h = now.getHours().toString().padStart(2, '0');
let m = now.getMinutes().toString().padStart(2, '0');
let s = now.getSeconds().toString().padStart(2, '0');
document.getElementById('time').innerText = `${h}:${m}:${s}`;
let y = now.getFullYear();
let mon = (now.getMonth() + 1).toString().padStart(2, '0');
let d = now.getDate().toString().padStart(2, '0');
let week = ["日", "一", "二", "三", "四", "五", "六"][now.getDay()];
document.getElementById('date').innerText = `${y}年${mon}月${d}日 星期${week}`;
}
updateTime();
setInterval(updateTime, 1000);
// 待办事项
let input = document.getElementById('input');
let list = document.getElementById('list');
input.addEventListener('keydown', function (e) {
if (e.key === 'Enter' && input.value.trim() !== '') {
let li = document.createElement('li');
li.className = 'todo-item';
li.innerHTML = `${input.value} <span class="del">×</span>`;
list.appendChild(li);
input.value = '';
li.querySelector('.del').addEventListener('click', function () {
li.remove();
});
}
});
</script>
</body>
</html>
🖥️ 复古电子办公手伴 Retro Office Gadget
专为职场人打造的复古风格桌面小工具，集成实用功能+羊毛毡可爱IP，提升办公氛围感✨
📦 项目介绍
「复古电子办公手伴」是一款低代码、可定制的桌面办公工具，主打：
✨ 功能特性
🚀 在线演示
点击访问项目官网
📥 安装使用
git clone https://github.com/你的用户名/retro-office-gadget.gitindex.html即可使用，无需安装任何依赖📄 许可证
本项目基于 MIT License 开源，可自由使用、修改、商用，保留著作权。
👨💻 作者
🤝 贡献
欢迎提交Issue、PR，一起优化「复古电子办公手伴」项目！
工具代码
方式一：直接粘贴代码（推荐用于小型工具）