テスト

qiita.rb
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>タスクスケジューラ</title>
    <script>
        // タスクのデータを保持する配列
        let tasks = [];

        // 現在アクティブなタスクのインデックス
        let activeTaskIndex = null;

        // 合計時間を計算するための変数
        let totalMilliseconds = 0;

        // タイマーを更新する関数
        function updateTimers() {
            const now = new Date();
            tasks.forEach((task, index) => {
                if (task.active) {
                    const elapsed = now - task.startTime;
                    task.elapsedTime += elapsed;
                    totalMilliseconds += elapsed;
                    task.startTime = now;
                    document.getElementById(`timer${index}`).textContent = formatTime(task.elapsedTime);
                    if (activeTaskIndex === index) {
                        document.title = `(${formatTime(task.elapsedTime)}) ${task.name}`;
                    }
                }
            });
            document.getElementById('totalTimer').textContent = `合計時間: ${formatTime(totalMilliseconds)}`;
        }

        // 時間をフォーマットする関数
        function formatTime(milliseconds) {
            let seconds = Math.floor(milliseconds / 1000);
            let minutes = Math.floor(seconds / 60);
            seconds = seconds % 60;
            let hours = Math.floor(minutes / 60);
            minutes = minutes % 60;
            return `${hours}:${minutes}:${seconds}`;
        }

        // タスクを追加する関数
        function addTask() {
            const name = prompt('タスクの名前を入力してください:');
            if (name) {
                const task = {
                    name: name,
                    elapsedTime: 0,
                    active: false,
                    startTime: null
                };
                tasks.push(task);
                updateTasksDisplay();
            }
        }

        // タスクを削除する関数
        function deleteTask(index) {
            if (confirm(`'${tasks[index].name}'を削除しますか？`)) {
                tasks.splice(index, 1);
                updateTasksDisplay();
            }
        }

        // タスクの表示を更新する関数
        function updateTasksDisplay() {
            const tasksDiv = document.querySelector('.tasks');
            tasksDiv.innerHTML = ''; // 既存のタスクをクリア
            tasks.forEach((task, index) => {
                const taskDiv = document.createElement('div');
                taskDiv.innerHTML = `<input type="text" value="${task.name}" onchange="renameTask(${index}, this.value)" />
                        <span id="timer${index}">${formatTime(task.elapsedTime)}</span>
                        <button onclick="toggleTimer(${index})">スタート/ストップ</button>
                        <button onclick="deleteTask(${index})">削除</button>`;
                tasksDiv.appendChild(taskDiv);
            });
        }

        // タスクの名前を変更する関数
        function renameTask(index, newName) {
            tasks[index].name = newName;
        }

        // タイマーを切り替える関数
        function toggleTimer(index) {
            if (activeTaskIndex !== null) {
                tasks[activeTaskIndex].active = false;
            }
            if (activeTaskIndex !== index) {
                tasks[index].active = true;
                tasks[index].startTime = new Date();
                activeTaskIndex = index;
            } else {
                activeTaskIndex = null;
            }
            updateTimers();
        }

        // タイマーをリセットする関数
        function resetTimer(index) {
            if (confirm(`'${tasks[index].name}'のタイマーをリセットしますか？`)) {
                tasks[index].elapsedTime = 0;
                updateTasksDisplay();
            }
        }

        // 1秒ごとにタイマーを更新
        setInterval(updateTimers, 1000);
    </script>
</head>

<body>
    <div id="totalTimer">合計時間: 0</div>
    <div class="tasks">
        <!-- タスクのリスト -->
    </div>
    <button onclick="addTask()">タスク追加</button>
</body>

</html>
EguTimer

テスト
