<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>时间管理器</title>
<!-- 加载样式表 -->
<style>
/* 基础样式 */
body {
background: linear-gradient(to bottom, #f2f2f2, #e0e0e0);
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
/* 表格样式 */
table {
border-collapse: collapse;
border: 1px solid #ddd;
border-radius: 5px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
margin: 50px auto;
width: 80%;
}
th {
background-color: #f5f5f5;
color: #333;
font-weight: bold;
padding: 10px 20px;
text-align: center;
text-shadow: 1px 1px 0px rgba(255,255,255,0.5);
}
td {
background-color: #fff;
color: #333;
padding: 10px 20px;
text-align: center;
vertical-align: middle;
}
/* 输入框样式 */
input[type="text"], input[type="button"], input[type="submit"], input[type="number"] {
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding: 10px;
width: 100%;
}
input[type="text"]:focus, input[type="number"]:focus, input[type="button"]:hover, input[type="submit"]:hover {
border-color: #333;
outline: none;
}
/* 按钮样式 */
.btn-row {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 20px;
}
.btn-container {
display: flex;
justify-content: center;
margin-top: 30px;
}
.btn {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
font-size: 16px;
margin: 0 10px;
border-radius: 5px;
width: 120px;
height: 40px;
cursor: pointer;
transition: background-color 0.3s ease-out, color 0.3s ease-out;
}
.btn-add {
background-color: #00a600;
padding-left: 20px;
padding-right: 20px;
}
.btn-remove {
background-color: #EA3526;
padding-left: 20px;
padding-right: 20px;
}
.btn-submit {
background-color: #009BFF;
width: 80px;
margin-left: 5px;
padding-left: 5px;
padding-right: 5px;
}
.btn-clear {
background-color: #ff9800;
width: 80px;
margin-left: 5px;
padding-left: 5px;
padding-right: 5px;
}
.btn-reminder {
background-color: #FFC107;
width: 120px;
margin-left: 5px;
padding-left: 5px;
padding-right: 5px;
font-size: 14px;
}
.btn:hover {
background-color: rgba(76, 175, 80, 1);
color: #fff;
opacity: 0.7;
}
.btn-add:hover {
background-color: rgba(0, 166, 0, 0.7);
}
.btn-remove:hover {
background-color: rgba(234, 53, 38, 0.7);
}
.btn-submit:hover {
background-color: rgba(0, 155, 255, 0.7);
}
.btn-clear:hover {
background-color: rgba(255, 152, 0, 0.7);
}
.btn-reminder:hover {
background-color: rgba(255, 193, 7, 0.7);
}
/* 标题样式 */
h1 {
color: #333;
text-align: center;
margin-top: 50px;
margin-bottom: 30px;
font-size: 4em;
text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.1);
letter-spacing: 2px;
}
/* 描述样式 */
p {
color: #555;
font-size: 1.2em;
font-weight: bold;
text-align: center;
margin-bottom: 50px;
}
/* 响应式布局 */
@media(max-width: 768px) {
table {
font-size: 14px;
width: 95%;
}
input[type="text"], input[type="button"], input[type="submit"], input[type="number"] {
font-size: 14px;
padding: 8px;
}
h1 {
font-size: 3em;
}
p {
font-size: 1em;
}
.schedule-table {
border-collapse: collapse;
width: 100%;
margin-top: 20px;
}
.schedule-table th {
background-color: #4CAF50;
color: white;
font-size: 14px;
font-weight: normal;
padding: 8px;
text-align: center;
}
.schedule-table td {
border: 1px solid #ddd;
font-size: 14px;
padding: 8px;
text-align: center;
}
.break-row {
background-color: #f5f5f5;
font-size: 14px;
font-weight: bold;
}
/* 弹窗样式 */
.schedule-window {
width: 90%;
margin: 50px auto;
}
.schedule-header {
font-size: 24px;
font-weight: bold;
text-align: center;
margin-bottom: 20px;
}
.schedule-wrapper {
overflow-x: auto;
}
.schedule-close {
position: absolute;
top: 10px;
right: 10px;
font-size: 20px;
cursor: pointer;
}
}
/* 调整按钮布局 */
.btn-container {
display: flex;
justify-content: center;
margin-top: 30px;
}
.btn {
margin: 0 10px;
}
.schedule-table {
border-collapse: collapse;
width: 100%;
margin-top: 20px;
}
.schedule-table th {
background-color: #4CAF50;
color: white;
font-size: 14px;
font-weight: normal;
padding: 8px;
text-align: center;
}
.schedule-table td {
border: 1px solid #ddd;
font-size: 14px;
padding: 8px;
text-align: center;
}
.break-row {
background-color: #f5f5f5;
font-size: 14px;
font-weight: bold;
}
/* 添加番茄钟样式 */
.tomato-container {
display: flex;
justify-content: center;
margin-top: 30px;
margin-bottom: 30px;
}
.tomato-wrapper {
width: 50%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.tomato-tasks {
display: flex;
justify-content: center;
align-items: center;
margin-top: 30px;
margin-bottom: 30px;
}
.tomato-task {
padding: 10px 20px;
border-radius: 5px;
background-color: #fff;
margin: 0 10px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
text-align: center;
font-size: 16px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
text-align: center;
width: 120px;
height: 40px;
}
.tomato-task-active {
background-color: #4CAF50;
color: #fff;
}
.tomato-timer {
font-size: 5em;
font-weight: bold;
color: #4CAF50;
text-align: center;
margin-bottom: 30px;
}
.tomato-buttons {
display: flex;
justify-content: center;
align-items: center;
}
.tomato-button {
background-color: #4CAF50;
border:none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
font-size: 16px;
margin: 0 10px;
border-radius: 5px;
width: 120px;
height: 40px;
cursor: pointer;
transition: background-color 0.3s ease-out, color 0.3s ease-out;
}
.tomato-button:hover {
background-color: rgba(76, 175, 80, 1);
color: #fff;
opacity: 0.7;
}
/* 模态框样式 */
.modal {
display: none; /* 隐藏模态框 */
position: fixed; /* 固定定位 */
z-index: 1; /* 设置模态框在最上层 */
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.4); /* 半透明黑色背景 */
}
.modal-content {
background-color: #fff;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
border-radius: 5px;
width: 50%;
height: 50%;
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.modal-header h2 {
margin: 0;
font-size: 24px;
font-weight: bold;
}
.close {
color: #888;
font-size: 28px;
font-weight: bold;
cursor: pointer;
}
/* 响应式模态框 */
@media(max-width: 768px) {
.modal-content {
width: 90%;
height: 70%;
}
}
</style>
</head>
<body>
<h1>时间管理器</h1>
<p>一个事件列表工具，帮助你更好地安排和管理时间。</p>
<!-- 创建表单 -->
<form id="myForm" onsubmit="return validateForm()">
<!-- 创建事件列表 -->
<table id="myTable">
<thead>
<tr>
<th>时间(分钟)</th>
<th>任务</th>
</tr>
</thead>
<tbody id="myTbody">
<!-- 创建第一行 -->
<tr>
<td><input type="number" min="1" name="time[]" required/><label for="time[]"></label></td>
<td><input type="text" name="task[]" required/><label for="task[]"></label></td>
</tr>
</tbody>
</table>
<!-- 创建按钮组 -->
<div class="btn-container">
<!-- 创建添加事件按钮 -->
<button class="btn btn-add" type="button" onclick="addRow()">+1行</button>
<!-- 创建删除事件按钮 -->
<button class="btn btn-remove" type="button" onclick="deleteRow()">-1行</button>
<!-- 创建清空按钮 -->
<button class="btn btn-clear" type="button" onclick="clearTable()">清空</button>
<!-- 创建提交按钮 -->
<input class="btn btn-submit" type="submit" value="我已完成表单"/>
</div>
</form>
<!-- 添加番茄钟 -->
<div class="tomato-container" id="tomato-container">
<div class="tomato-wrapper">
<div class="tomato-tasks" id="tomato-tasks">
<!-- 任务列表 -->
</div>
<div class="tomato-timer" id="tomato-timer">25:00</div>
<div class="tomato-buttons">
<button class="tomato-button" id="start-button" onclick="startTimer()">开始</button>
<button class="tomato-button" id="pause-button" onclick="pauseTimer()">暂停</button>
<button class="tomato-button" id="stop-button" onclick="stopTimer()">停止</button>
</div>
</div>
</div>
<!-- 创建模态框 -->
<div id="myModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h2 id="modal-header">番茄钟已结束！</h2>
<span class="close" id="close">×</span>
</div>
<div class="modal-body" id="modal-body">
</div>
<div class="modal-footer">
<button class="btn btn-reminder" onclick="remind()">提醒我</button>
<button class="btn btn-submit" onclick="resetTimer()">再来一组</button>
</div>
</div>
</div>
<!-- 创建脚本 -->
<script>
// 创建全局变量
var timerInterval;
var currentTaskIndex = 0;
var tomatoTasks = [];
var tomatoTime = 25 * 60;
var tomatoStartTime = tomatoTime;
var taskList = document.getElementsByName('task[]');
var timeList = document.getElementsByName('time[]');
var modal = document.getElementById("myModal");
var modalHeader = document.getElementById("modal-header");
var modalBody = document.getElementById("modal-body");
var modalClose = document.getElementById("close");
// 尝试从本地存储加载列表
if (localStorage.getItem("eventList")) {
document.getElementById("myTable").innerHTML = localStorage.getItem("eventList");
}
// 初始化番茄钟任务
for (var i = 0; i < taskList.length; i++) {
tomatoTasks.push({
task: taskList[i].value, time: timeList[i].value * 60});
}
// 添加行
function addRow() {
var table = document.getElementById("myTbody");
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = '<input type="number" min="1" name="time[]" required/><label for="time[]">时间(分钟)</label>';
cell2.innerHTML = '<input type="text" name="task[]" required/><label for="task[]">任务名称</label>';
}
// 删除行
function deleteRow() {
var table = document.getElementById("myTbody");
if(table.rows.length > 1) {
table.deleteRow(-1);
}
}
// 清空表格
function clearTable() {
if(confirm("确定要清空时间列表吗？")) {
document.getElementById("myTbody").innerHTML = '<tr><td><input type="number" min="1" name="time[]" required/><label for="time[]">时间(分钟)</label></td><td><input type="text" name="task[]" required/><label for="task[]">任务名称</label></td></tr>';
localStorage.removeItem("eventList");
}
}
// 验证表单
function validateForm() {
var table = document.getElementById("myTable");
for(var i = 1; i < table.rows.length; i++) {
if (table.rows[i].cells[0].firstElementChild.value == "" || table.rows[i].cells[1].firstElementChild.value == "") {
alert("请填写完整的时间列表！");
return false;
}
}
// 保存事件列表到本地存储
localStorage.setItem("eventList", document.getElementById("myTable").innerHTML);
// 创建番茄钟任务列表
tomatoTasks = [];
for (var i = 0; i < taskList.length; i++) {
tomatoTasks.push({
task: taskList[i].value, time: timeList[i].value * 60});
}
// 显示番茄钟
showTomato();
return false;
}
// 显示番茄钟
function showTomato() {
// 清空任务列表
document.getElementById("tomato-tasks").innerHTML = "";
// 显示任务列表
for (var i = 0; i < tomatoTasks.length; i++) {
var taskButton = document.createElement("button");
taskButton.innerText = tomatoTasks[i].task;
taskButton.className = "tomato-task";
if (i == currentTaskIndex) {
taskButton.classList.add("tomato-task-active");
}
taskButton.setAttribute("onclick", "changeTask(" + i + ")");
document.getElementById("tomato-tasks").appendChild(taskButton);
}
// 显示番茄钟容器
var container = document.getElementById("tomato-container");
if (container.style.display === "none") {
container.style.display = "flex";
}
// 开始倒计时
startTimer();
}
// 开始计时器
function startTimer() {
// 显示暂停按钮
document.getElementById("pause-button").style.display = "inline-block";
// 隐藏
document.getElementById("start-button").style.display = "none";
// 设置定时器
timerInterval = setInterval(updateTimer, 1000);
}
// 暂停计时器
function pauseTimer() {
// 显示开始按钮
document.getElementById("start-button").style.display = "inline-block";
// 隐藏暂停按钮
document.getElementById("pause-button").style.display = "none";
// 清除定时器
clearInterval(timerInterval);
}
// 停止计时器
function stopTimer() {
// 隐藏番茄钟容器
var container = document.getElementById("tomato-container");
container.style.display = "none";
// 清除定时器
clearInterval(timerInterval);
// 重置番茄钟
resetTimer();
}
// 重置计时器
function resetTimer() {
// 重置当前任务索引
currentTaskIndex = 0;
// 重置时间
tomatoTime = tomatoStartTime;
// 显示开始按钮
document.getElementById("start-button").style.display = "inline-block";
// 隐藏暂停按钮
document.getElementById("pause-button").style.display = "none";
// 关闭模态框
modal.style.display = "none";
// 显示第一个任务
showTask();
}
function updateTimer() {
// 更新时间
tomatoTime--;
// 显示时间
var minutes = Math.floor(tomatoTime / 60);
var seconds = tomatoTime % 60;
document.getElementById("tomato-timer").innerHTML = (minutes < 10 ? "0" : "") + minutes + ":" + (seconds < 10 ? "0" : "") + seconds;
// 时间到了
if (tomatoTime == 0) {
// 播放提示音
var audio = new Audio("https://assets.coderrocketfuel.com/pomodoro-times-up.mp3");
audio.play();
// 显示模态框
modalHeader.innerText = tomatoTasks[currentTaskIndex].task;
modalBody.innerHTML = "恭喜你完成了这个任务！";
modal.style.display = "block";
// 显示下一个任务
currentTaskIndex++;
if (currentTaskIndex < tomatoTasks.length) {
showTask();
}
else {
// 全部任务完成
resetTimer();
}
}
}
// 显示当前任务
function showTask() {
// 更新时间
tomatoTime = tomatoTasks[currentTaskIndex].time;
tomatoStartTime = tomatoTime;
// 显示任务
var taskButton = document.getElementsByClassName("tomato-task")[currentTaskIndex];
for (var i = 0; i < taskList.length; i++) {
if (taskList[i].value == tomatoTasks[currentTaskIndex].task) {
taskButton.classList.add("tomato-task-active");
timeList[i].focus();
}
else {
taskList[i].parentNode.parentNode.classList.remove("tomato-task-active");
}
}
// 更新时间显示
var minutes = Math.floor(tomatoTime / 60);
var seconds = tomatoTime % 60;
document.getElementById("tomato-timer").innerHTML = (minutes < 10 ? "0" : "") + minutes + ":" + (seconds < 10 ? "0" : "") + seconds;
}
// 切换任务
function changeTask(index) {
if (index != currentTaskIndex) {
// 更新索引
currentTaskIndex = index;
// 显示任务
showTask();
}
}
// 关闭模态框
modalClose.onclick = function() {
modal.style.display = "none";
}
// 点击模态框外部区域关闭模态框
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
// 提醒功能
function remind() {
// 创建通知
if (Notification.permission !== "granted") {
Notification.requestPermission();
}
else {
var notification = new Notification(tomatoTasks[currentTaskIndex - 1].task, {
body: "时间到了！",
});
}
// 关闭模态框
modal.style.display = "none";
}
</script>
</body>
</html>
【TB作品】51单片机，具有报时报温功能的电子钟
2023-12-07 21:26:02 39 阅读
