用豆包给自己写了一个时间任务管理的代码，然后...怎么办？-CSDN博客

本文链接：https://blog.csdn.net/Boooo6666/article/details/147898410

项目介绍：

1.用豆包AI编程功能给自己【P人+自由时间】写了一个时间+任务管理代码，html格式

项目目标：

1.实现任务记录、任务管理，解决P人缺乏计划的特点。

2.自动记录任务所用时长，能记录碎片化任务。

3.展示每天时间花费重点，帮助进行每日时间统计与管理。

产品功能：

1.任务时长：按照正向时间统计，任务所用时长，保证心流状态。

2.任务用时可视化，支持手动暂停和结束。任务管理灵活，不会造成临时中断的压力。

3.任务结束后，进行名称、分类的存储。

功能展示：

产品代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <title>时间记录应用</title>
    <style>
        /* 莫兰迪色系配色 */
        :root {
            --primary-color: #a6a9b6;
            --secondary-color: #b7c3f3;
            --background-color: #f2f2f2;
            --text-color: #333;
        }

        body {
            background-color: var(--background-color);
            color: var(--text-color);
        }

        .circle {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background-color: var(--primary-color);
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            font-size: 24px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .circle:hover {
            background-color: var(--secondary-color);
        }

        .popup {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        }

        button {
            background-color: var(--primary-color);
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        button:hover {
            background-color: var(--secondary-color);
        }

        input {
            padding: 10px;
            border: 1px solid var(--primary-color);
            border-radius: 5px;
            margin-bottom: 10px;
        }

        ul {
            list-style-type: none;
            padding: 0;
        }

        li {
            margin-bottom: 5px;
        }
    </style>
</head>

<body class="flex flex-col items-center justify-center h-screen">
    <div id="homePage">
        <div class="circle" id="startButton">开始计时</div>
        <div id="currentDateTime" class="mt-4 text-lg font-bold"></div>
    </div>
    <div id="timerPage" style="display: none;">
        <div class="text-lg mb-2">任务中</div>
        <div id="elapsedTime" class="text-4xl font-bold mb-4">00:00</div>
        <button id="pauseButton" class="mr-2">暂停</button>
        <button id="endButton">结束</button>
    </div>
    <div id="pausePopup" class="popup">
        <button id="resumeButton" class="mr-2">继续</button>
        <button id="endFromPauseButton">结束</button>
    </div>
    <div id="infoPopup" class="popup">
        <div id="usedTime" class="text-lg font-bold mb-4"></div>
        <input type="text" id="taskName" placeholder="任务名称">
        <input type="text" id="taskType" placeholder="任务类型">
        <button id="saveTaskButton">保存任务</button>
    </div>
    <div id="statisticsPage" style="display: none;">
        <h2 class="text-2xl font-bold mb-4">今日统计</h2>
        <div id="totalTime" class="text-lg font-bold mb-2"></div>
        <ul id="taskList"></ul>
        <button id="backToHomeButton" class="mt-4">返回首页</button>
    </div>

    <script>
        let startTime;
        let intervalId;
        let isPaused = false;
        let pausedTime = 0;
        const tasks = [];

        function updateDateTime() {
            const now = new Date();
            const dateTimeString = now.toLocaleString();
            document.getElementById('currentDateTime').textContent = dateTimeString;
        }

        setInterval(updateDateTime, 1000);
        updateDateTime();

        document.getElementById('startButton').addEventListener('click', () => {
            document.getElementById('homePage').style.display = 'none';
            document.getElementById('timerPage').style.display = 'block';
            startTime = Date.now() - pausedTime;
            intervalId = setInterval(updateTimer, 1000);
        });

        document.getElementById('pauseButton').addEventListener('click', () => {
            clearInterval(intervalId);
            isPaused = true;
            pausedTime = Date.now() - startTime;
            document.getElementById('pausePopup').style.display = 'block';
        });

        document.getElementById('resumeButton').addEventListener('click', () => {
            document.getElementById('pausePopup').style.display = 'none';
            isPaused = false;
            startTime = Date.now() - pausedTime;
            intervalId = setInterval(updateTimer, 1000);
        });

        document.getElementById('endButton').addEventListener('click', endTask);
        document.getElementById('endFromPauseButton').addEventListener('click', endTask);

        function endTask() {
            clearInterval(intervalId);
            const endTime = Date.now();
            const usedTime = endTime - startTime;
            const formattedTime = formatTime(usedTime);
            document.getElementById('usedTime').textContent = `所用时长: ${formattedTime}`;
            document.getElementById('timerPage').style.display = 'none';
            document.getElementById('infoPopup').style.display = 'block';
            document.getElementById('pausePopup').style.display = 'none';
        }

        document.getElementById('saveTaskButton').addEventListener('click', () => {
            const taskName = document.getElementById('taskName').value;
            const taskType = document.getElementById('taskType').value;
            const endTime = Date.now();
            const usedTime = endTime - startTime;
            const formattedTime = formatTime(usedTime);
            const startDateTime = new Date(startTime);
            const endDateTime = new Date(endTime);
            const startOnlyTime = startDateTime.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
            const endOnlyTime = endDateTime.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });

            tasks.push({
                name: taskName,
                type: taskType,
                duration: formattedTime,
                start: startOnlyTime,
                end: endOnlyTime
            });

            document.getElementById('infoPopup').style.display = 'none';
            document.getElementById('statisticsPage').style.display = 'block';

            let totalDuration = 0;
            tasks.forEach(task => {
                const parts = task.duration.split(':');
                totalDuration += parseInt(parts[0]) * 60 + parseInt(parts[1]);
            });
            const totalFormattedTime = formatTime(totalDuration * 1000);
            document.getElementById('totalTime').textContent = `今日总计时长: ${totalFormattedTime}`;

            const taskList = document.getElementById('taskList');
            taskList.innerHTML = '';
            tasks.forEach(task => {
                const listItem = document.createElement('li');
                listItem.textContent = `${task.name} (${task.type}): ${task.duration} (${task.start} - ${task.end})`;
                taskList.appendChild(listItem);
            });

            startTime = null;
            pausedTime = 0;
            isPaused = false;
        });

        document.getElementById('backToHomeButton').addEventListener('click', () => {
            document.getElementById('statisticsPage').style.display = 'none';
            document.getElementById('homePage').style.display = 'block';
        });

        function updateTimer() {
            const currentTime = Date.now();
            const elapsedTime = currentTime - startTime;
            const formattedTime = formatTime(elapsedTime);
            document.getElementById('elapsedTime').textContent = formattedTime;
        }

        function formatTime(milliseconds) {
            const totalSeconds = Math.floor(milliseconds / 1000);
            const minutes = Math.floor(totalSeconds / 60);
            const seconds = totalSeconds % 60;
            return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
        }
    </script>
</body>

</html>

产品现状：

1.可以通过网页打开，能实现上述功能

2.能正常进行时间统计和任务记录

后续问题：

1.新人小白，不知道，写完代码后，后续流程步骤是什么？

2.想在手机上作为自己的软件去使用【0成本的那种】，应该怎么做？要微信小程序形式/APP吗/还是插件什么的？

3.期待更多的优化建议