用Cursor生成一个代办事项列表的功能

已于 2024-09-19 16:59:27 修改
阅读量314 收藏 1
点赞数 2
文章标签： css javascript css3
于 2024-09-13 16:06:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kele_imon/article/details/142213218
版权

一、本地新建html文件

二、输入代码

2.1 Cursor描述

其实这一段代码使用Cursor生成，可以输入如下内容，即可自动生成代码：

创建一个代办事项列表应用的基本结构，呈现在可交互界面上，1，提供可交互界面，html，生成本地可使用的界面，需要生成前端页面代码，前端可展示页面，把他写在一个网页上。

我废话有点儿多，因为我叠加了好几次，我觉得重点是：

1. 功能：创建一个代办事项列表应用的基本结构

2.方式：需要生成前端页面代码，前端可展示页面，需要生成的文件是html结尾的

大家可以多调试一下，反正也可以追加指示

2.2 代码结果

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>待办事项列表</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f0f0f0;
        }
        h1 {
            text-align: center;
            color: #333;
        }
        #task-form {
            display: flex;
            margin-bottom: 20px;
        }
        #task-input {
            flex-grow: 1;
            padding: 10px;
            font-size: 16px;
            border: 1px solid #ddd;
            border-radius: 4px 0 0 4px;
        }
        button {
            padding: 10px 15px;
            font-size: 16px;
            cursor: pointer;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 0 4px 4px 0;
        }
        button:hover {
            background-color: #45a049;
        }
        #task-list {
            list-style-type: none;
            padding: 0;
        }
        .task-item {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            background-color: white;
            padding: 10px;
            border-radius: 4px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .task-text {
            flex-grow: 1;
            margin-left: 10px;
        }
        .completed {
            text-decoration: line-through;
            color: #888;
        }
        .delete-btn {
            background-color: #f44336;
            color: white;
            border: none;
            padding: 5px 10px;
            border-radius: 4px;
            cursor: pointer;
        }
        .delete-btn:hover {
            background-color: #d32f2f;
        }
    </style>
</head>
<body>
    <h1>待办事项列表</h1>
    <form id="task-form">
        <input type="text" id="task-input" placeholder="输入新任务" required>
        <button type="submit">添加任务</button>
    </form>
    <ul id="task-list"></ul>

    <script>
        const taskForm = document.getElementById('task-form');
        const taskInput = document.getElementById('task-input');
        const taskList = document.getElementById('task-list');

        let tasks = JSON.parse(localStorage.getItem('tasks')) || [];

        function renderTasks() {
            taskList.innerHTML = '';
            tasks.forEach((task, index) => {
                const li = document.createElement('li');
                li.className = 'task-item';
                li.innerHTML = `
                    <input type="checkbox" ${task.completed ? 'checked' : ''}>
                    <span class="task-text ${task.completed ? 'completed' : ''}">${task.text}</span>
                    <button class="delete-btn">删除</button>
                `;
                
                const checkbox = li.querySelector('input[type="checkbox"]');
                checkbox.addEventListener('change', () => toggleTask(index));

                const deleteBtn = li.querySelector('.delete-btn');
                deleteBtn.addEventListener('click', () => deleteTask(index));

                taskList.appendChild(li);
            });
        }

        function addTask(text) {
            tasks.push({ text, completed: false });
            saveTasks();
            renderTasks();
        }

        function toggleTask(index) {
            tasks[index].completed = !tasks[index].completed;
            saveTasks();
            renderTasks();
        }

        function deleteTask(index) {
            tasks.splice(index, 1);
            saveTasks();
            renderTasks();
        }

        function saveTasks() {
            localStorage.setItem('tasks', JSON.stringify(tasks));
        }

        taskForm.addEventListener('submit', (e) => {
            e.preventDefault();
            const text = taskInput.value.trim();
            if (text) {
                addTask(text);
                taskInput.value = '';
            }
        });

        renderTasks();
    </script>
</body>
</html>

三、开启调试

3.1 显示预览

3.2 打开本地页面

选终端，然后启动调试。

四、后续优化

4.1 我又调试了一番，增加了一些花里胡哨的功能

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>待办事项列表</title>
    <style>
        body {
            font-family: 'Helvetica Neue', Arial, sans-serif;
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f7f7f7;
            color: #333;
        }
        h1 {
            text-align: center;
            color: #2c3e50;
            margin-bottom: 30px;
        }
        #task-form {
            display: flex;
            margin-bottom: 30px;
        }
        #task-input {
            flex-grow: 1;
            padding: 12px;
            font-size: 16px;
            border: 2px solid #ddd;
            border-radius: 4px 0 0 4px;
            transition: border-color 0.3s;
        }
        #task-input:focus {
            outline: none;
            border-color: #3498db;
        }
        button {
            padding: 12px 20px;
            font-size: 16px;
            cursor: pointer;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 0 4px 4px 0;
            transition: background-color 0.3s;
        }
        button:hover {
            background-color: #2980b9;
        }
        #task-list {
            list-style-type: none;
            padding: 0;
        }
        .task-item {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
            background-color: white;
            padding: 15px 15px 15px 10px;
            border-radius: 8px;
            box-shadow: 0 3px 6px rgba(0,0,0,0.1);
            transition: transform 0.2s, box-shadow 0.2s;
        }
        .task-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 10px rgba(0,0,0,0.15);
        }
        .task-text {
            flex-grow: 1;
            margin-left: 15px;
            font-size: 18px;
        }
        .completed {
            text-decoration: line-through;
            color: #95a5a6;
        }
        .delete-btn {
            background-color: #e74c3c;
            color: white;
            border: none;
            padding: 8px 12px;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .delete-btn:hover {
            background-color: #c0392b;
        }
        input[type="checkbox"] {
            width: 20px;
            height: 20px;
            margin-right: 10px;
        }
        .task-number {
            min-width: 24px;
            height: 24px;
            background-color: #3498db;
            color: white;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 14px;
            margin-right: 10px;
        }
        .task-content {
            display: flex;
            align-items: center;
            flex-grow: 1;
        }

        .timeline {
            display: flex;
            margin-top: 30px;
            background-color: #f9f9f9;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }

        .timeline-day {
            flex: 1;
            padding: 15px;
            border-right: 1px solid #e0e0e0;
            transition: background-color 0.3s;
        }

        .timeline-day:last-child {
            border-right: none;
        }

        .timeline-day:hover {
            background-color: #f0f0f0;
        }

        .timeline-date {
            font-weight: bold;
            margin-bottom: 15px;
            text-align: center;
            color: #3498db;
            font-size: 14px;
        }

        .timeline-tasks {
            list-style-type: none;
            padding: 0;
        }

        .timeline-task {
            background-color: #ffffff;
            border-radius: 6px;
            padding: 10px;
            margin-bottom: 10px;
            font-size: 14px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
            transition: transform 0.2s, box-shadow 0.2s;
            cursor: pointer;
        }

        .timeline-task:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }

        .timeline-task.completed {
            text-decoration: line-through;
            color: #95a5a6;
            background-color: #f8f8f8;
        }

        .timeline-task-dot {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            margin-right: 8px;
            background-color: #3498db;
        }

        .timeline-task.completed .timeline-task-dot {
            background-color: #95a5a6;
        }

        .timeline-day.today {
            background-color: #e8f4fd;
        }

        .timeline-day.today .timeline-date {
            color: #2980b9;
        }

        @media (max-width: 768px) {
            .timeline {
                flex-direction: column;
            }

            .timeline-day {
                border-right: none;
                border-bottom: 1px solid #e0e0e0;
            }

            .timeline-day:last-child {
                border-bottom: none;
            }
        }

        .calendar {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
        }

        .day {
            flex: 1;
            text-align: center;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .day:hover {
            background-color: #f0f0f0;
        }

        .day.selected {
            background-color: #3498db;
            color: white;
        }

        .day-name {
            font-weight: bold;
            margin-bottom: 5px;
        }

        .day-date {
            font-size: 12px;
        }

        #task-form {
            display: flex;
            flex-direction: column;
            margin-bottom: 30px;
        }

        #task-input {
            margin-bottom: 10px;
        }

        #add-task-btn {
            align-self: flex-end;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>待办事项列表</h1>
        <div class="calendar" id="calendar"></div>
        <form id="task-form">
            <input type="text" id="task-input" placeholder="输入新任务" required>
            <button type="submit" id="add-task-btn">添加任务</button>
        </form>
        <ul id="task-list"></ul>
        <div class="timeline" id="timeline"></div>
    </div>

    <script>
        const taskForm = document.getElementById('task-form');
        const taskInput = document.getElementById('task-input');
        const taskList = document.getElementById('task-list');
        const calendar = document.getElementById('calendar');

        let tasks = JSON.parse(localStorage.getItem('tasks')) || [];
        let selectedDate = new Date();

        function renderCalendar() {
            calendar.innerHTML = '';
            const today = new Date();
            const weekStart = new Date(today);
            weekStart.setDate(today.getDate() - today.getDay());

            for (let i = 0; i < 7; i++) {
                const date = new Date(weekStart);
                date.setDate(weekStart.getDate() + i);
                const dayElement = document.createElement('div');
                dayElement.className = 'day';
                if (date.toDateString() === selectedDate.toDateString()) {
                    dayElement.classList.add('selected');
                }
                dayElement.innerHTML = `
                    <div class="day-name">${['日', '一', '二', '三', '四', '五', '六'][date.getDay()]}</div>
                    <div class="day-date">${date.getDate()}</div>
                `;
                dayElement.addEventListener('click', () => {
                    selectedDate = date;
                    renderCalendar();
                    renderTasks();
                });
                calendar.appendChild(dayElement);
            }
        }

        function renderTimeline() {
            const timeline = document.getElementById('timeline');
            timeline.innerHTML = '';

            const weekStart = new Date(selectedDate);
            weekStart.setDate(selectedDate.getDate() - selectedDate.getDay());

            for (let i = 0; i < 7; i++) {
                const date = new Date(weekStart);
                date.setDate(weekStart.getDate() + i);
                
                const dayElement = document.createElement('div');
                dayElement.className = 'timeline-day';
                if (date.toDateString() === new Date().toDateString()) {
                    dayElement.classList.add('today');
                }
                
                const dateElement = document.createElement('div');
                dateElement.className = 'timeline-date';
                dateElement.textContent = `${date.getMonth() + 1}月${date.getDate()}日 ${['周日', '周一', '周二', '周三', '周四', '周五', '周六'][date.getDay()]}`;
                dayElement.appendChild(dateElement);

                const taskList = document.createElement('ul');
                taskList.className = 'timeline-tasks';

                const dayTasks = tasks.filter(task => 
                    new Date(task.date).toDateString() === date.toDateString()
                );

                dayTasks.forEach(task => {
                    const taskElement = document.createElement('li');
                    taskElement.className = `timeline-task ${task.completed ? 'completed' : ''}`;
                    taskElement.innerHTML = `
                        <span class="timeline-task-dot"></span>
                        ${task.text}
                    `;
                    taskElement.addEventListener('click', () => toggleTask(task.id));
                    taskList.appendChild(taskElement);
                });

                dayElement.appendChild(taskList);
                timeline.appendChild(dayElement);
            }
        }

        function renderTasks() {
            taskList.innerHTML = '';
            const filteredTasks = tasks.filter(task => 
                new Date(task.date).toDateString() === selectedDate.toDateString()
            );
            filteredTasks.forEach((task, index) => {
                const li = document.createElement('li');
                li.className = 'task-item';
                li.innerHTML = `
                    <div class="task-content">
                        <span class="task-number">${index + 1}</span>
                        <input type="checkbox" ${task.completed ? 'checked' : ''}>
                        <span class="task-text ${task.completed ? 'completed' : ''}">${task.text}</span>
                    </div>
                    <button class="delete-btn">删除</button>
                `;
                
                const checkbox = li.querySelector('input[type="checkbox"]');
                checkbox.addEventListener('change', () => toggleTask(task.id));

                const deleteBtn = li.querySelector('.delete-btn');
                deleteBtn.addEventListener('click', () => deleteTask(task.id));

                taskList.appendChild(li);
            });
            renderTimeline();
        }

        function addTask(text) {
            const newTask = { 
                id: Date.now(), 
                text, 
                completed: false, 
                date: selectedDate.toISOString() 
            };
            tasks.push(newTask);
            saveTasks();
            renderTasks();
        }

        function toggleTask(id) {
            const task = tasks.find(t => t.id === id);
            if (task) {
                task.completed = !task.completed;
                saveTasks();
                renderTasks();
            }
        }

        function deleteTask(id) {
            tasks = tasks.filter(t => t.id !== id);
            saveTasks();
            renderTasks();
        }

        function saveTasks() {
            localStorage.setItem('tasks', JSON.stringify(tasks));
        }

        taskForm.addEventListener('submit', (e) => {
            e.preventDefault();
            const text = taskInput.value.trim();
            if (text) {
                addTask(text);
                taskInput.value = '';
            }
        });

        renderCalendar();
        renderTasks();
    </script>
</body>
</html>

4.1 自动适配屏幕大小

我的补充：界面根据屏幕大小适配

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>待办事项列表</title>
    <style>
        body {
            font-family: 'Helvetica Neue', Arial, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f7f7f7;
            color: #333;
        }
        .container {
            background-color: white;
            border-radius: 15px;
            padding: 30px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }
        h1 {
            text-align: center;
            color: #2c3e50;
            margin-bottom: 30px;
        }
        #task-form {
            display: flex;
            margin-bottom: 30px;
        }
        #task-input {
            flex-grow: 1;
            padding: 12px;
            font-size: 16px;
            border: 2px solid #ddd;
            border-radius: 4px 0 0 4px;
            transition: border-color 0.3s;
        }
        #task-input:focus {
            outline: none;
            border-color: #3498db;
        }
        button {
            padding: 12px 20px;
            font-size: 16px;
            cursor: pointer;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 0 4px 4px 0;
            transition: background-color 0.3s;
        }
        button:hover {
            background-color: #2980b9;
        }
        #task-list {
            list-style-type: none;
            padding: 0;
        }
        .task-item {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
            background-color: white;
            padding: 15px 15px 15px 10px;
            border-radius: 8px;
            box-shadow: 0 3px 6px rgba(0,0,0,0.1);
            transition: transform 0.2s, box-shadow 0.2s;
        }
        .task-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 10px rgba(0,0,0,0.15);
        }
        .task-text {
            flex-grow: 1;
            margin-left: 15px;
            font-size: 18px;
        }
        .completed {
            text-decoration: line-through;
            color: #95a5a6;
        }
        .delete-btn {
            background-color: #e74c3c;
            color: white;
            border: none;
            padding: 8px 12px;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .delete-btn:hover {
            background-color: #c0392b;
        }
        input[type="checkbox"] {
            width: 20px;
            height: 20px;
            margin-right: 10px;
        }
        .task-number {
            min-width: 24px;
            height: 24px;
            background-color: #3498db;
            color: white;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 14px;
            margin-right: 10px;
        }
        .task-content {
            display: flex;
            align-items: center;
            flex-grow: 1;
        }

        .timeline {
            display: flex;
            margin-top: 30px;
            background-color: #f9f9f9;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }

        .timeline-day {
            flex: 1;
            padding: 15px;
            border-right: 1px solid #e0e0e0;
            transition: background-color 0.3s;
        }

        .timeline-day:last-child {
            border-right: none;
        }

        .timeline-day:hover {
            background-color: #f0f0f0;
        }

        .timeline-date {
            font-weight: bold;
            margin-bottom: 15px;
            text-align: center;
            color: #3498db;
            font-size: 14px;
        }

        .timeline-tasks {
            list-style-type: none;
            padding: 0;
        }

        .timeline-task {
            background-color: #ffffff;
            border-radius: 6px;
            padding: 10px;
            margin-bottom: 10px;
            font-size: 14px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
            transition: transform 0.2s, box-shadow 0.2s;
            cursor: pointer;
        }

        .timeline-task:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }

        .timeline-task.completed {
            text-decoration: line-through;
            color: #95a5a6;
            background-color: #f8f8f8;
        }

        .timeline-task-dot {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            margin-right: 8px;
            background-color: #3498db;
        }

        .timeline-task.completed .timeline-task-dot {
            background-color: #95a5a6;
        }

        .timeline-day.today {
            background-color: #e8f4fd;
        }

        .timeline-day.today .timeline-date {
            color: #2980b9;
        }

        .calendar {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
        }

        .day {
            flex: 1;
            text-align: center;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .day:hover {
            background-color: #f0f0f0;
        }

        .day.selected {
            background-color: #3498db;
            color: white;
        }

        .day-name {
            font-weight: bold;
            margin-bottom: 5px;
        }

        .day-date {
            font-size: 12px;
        }

        #task-form {
            display: flex;
            flex-direction: column;
            margin-bottom: 30px;
        }

        #task-input {
            margin-bottom: 10px;
        }

        #add-task-btn {
            align-self: flex-end;
        }

        @media (max-width: 768px) {
            body {
                padding: 10px;
            }
            .container {
                padding: 15px;
            }
            h1 {
                font-size: 24px;
            }
            #task-form {
                flex-direction: column;
            }
            #task-input, #add-task-btn {
                width: 100%;
                margin-bottom: 10px;
                border-radius: 4px;
            }
            .task-item {
                flex-direction: column;
                align-items: flex-start;
            }
            .task-content {
                width: 100%;
                margin-bottom: 10px;
            }
            .delete-btn {
                align-self: flex-end;
            }
            .timeline {
                flex-direction: column;
            }
            .timeline-day {
                border-right: none;
                border-bottom: 1px solid #e0e0e0;
            }
            .timeline-day:last-child {
                border-bottom: none;
            }
            .calendar {
                flex-wrap: wrap;
            }
            .day {
                flex-basis: calc(33.33% - 10px);
                margin-bottom: 10px;
            }
        }

        @media (max-width: 480px) {
            .day {
                flex-basis: calc(50% - 10px);
            }
        }
    </style>
</head>
<body>
    <!-- HTML 结构保持不变 -->
    
    <script>
        // JavaScript 代码保持不变
    </script>
</body>
</html>

4.3 将内容存储下来

我们没有服务器的时候，只能用localStorage存在本地，浏览器有5MB的限制。

  • 我的补充：我想问一下，怎么把输入的结果存下来
  • 他的回答：要将输入的结果存储下来，我们可以使用浏览器的本地存储（localStorage）来实现。这样，即使用户关闭了浏览器，下次打开时也能看到之前添加的任务。以下是如何修改JavaScript代码来实现这个功能：
<script>
    const taskForm = document.getElementById('task-form');
    const taskInput = document.getElementById('task-input');
    const taskList = document.getElementById('task-list');
    const calendar = document.getElementById('calendar');

    let tasks = JSON.parse(localStorage.getItem('tasks')) || [];
    let selectedDate = new Date();

    function renderCalendar() {
        // ... 日历渲染代码保持不变 ...
    }

    function renderTimeline() {
        // ... 时间轴渲染代码保持不变 ...
    }

    function renderTasks() {
        taskList.innerHTML = '';
        const filteredTasks = tasks.filter(task => 
            new Date(task.date).toDateString() === selectedDate.toDateString()
        );
        filteredTasks.forEach((task, index) => {
            const li = document.createElement('li');
            li.className = 'task-item';
            li.innerHTML = `
                <div class="task-content">
                    <span class="task-number">${index + 1}</span>
                    <input type="checkbox" ${task.completed ? 'checked' : ''}>
                    <span class="task-text ${task.completed ? 'completed' : ''}">${task.text}</span>
                </div>
                <button class="delete-btn">删除</button>
            `;
            
            const checkbox = li.querySelector('input[type="checkbox"]');
            checkbox.addEventListener('change', () => toggleTask(task.id));

            const deleteBtn = li.querySelector('.delete-btn');
            deleteBtn.addEventListener('click', () => deleteTask(task.id));

            taskList.appendChild(li);
        });
        renderTimeline();
    }

    function addTask(text) {
        const newTask = { 
            id: Date.now(), 
            text, 
            completed: false, 
            date: selectedDate.toISOString() 
        };
        tasks.push(newTask);
        saveTasks();
        renderTasks();
    }

    function toggleTask(id) {
        const task = tasks.find(t => t.id === id);
        if (task) {
            task.completed = !task.completed;
            saveTasks();
            renderTasks();
        }
    }

    function deleteTask(id) {
        tasks = tasks.filter(t => t.id !== id);
        saveTasks();
        renderTasks();
    }

    function saveTasks() {
        localStorage.setItem('tasks', JSON.stringify(tasks));
    }

    taskForm.addEventListener('submit', (e) => {
        e.preventDefault();
        const text = taskInput.value.trim();
        if (text) {
            addTask(text);
            taskInput.value = '';
        }
    });

    renderCalendar();
    renderTasks();
</script>

路人K_
关注
北理Todo::待办管理系统
Shencong2333的博客
04-21 2199
北理TODO代办管理系统开发日志 1.团队成员及分工 1.1小组成员 小组长：康昊 小组成员：沈聪、史星蔚、胡涛、杨昆龙 1.2小组分工： ppt及演讲：胡涛 项目前景和范围：杨昆龙 涉众分析：史星蔚 硬数据采样、面谈：沈聪 原型：康昊 2.作业展示 2.1项目前景和范围 一.项目前景 用户在代办区通过记录未来计划来规划时间提升执行力： 用户通过对做每件事情花费时间的记录，来有效控制时...
如何使用 JavaScript 制作待办事项列表
努力是为了站在万人之中，成为别人的光
01-27 6855
作者主页：海拥 作者简介：CSDN全栈领域优质创作者、HDZ核心组成员 粉丝福利：粉丝群 每周送六本书，不定期送各种小礼品 在本文中，您将学习如何使用 JavaScript 创建待办事项列表。Todo List JavaScript 是一个不错的项目，可以帮助初学者增加对 JavaScript 的了解。 这种类型的JavaScript Todo List主要用于组织您的任何信息。在这里，您可以创建一个包含许多稍后要执行的文本的列表。完成后，您可以删除它们。它基本...
ToDoList—最简单的待办事项列表（经典案例）重点
weixin_52065872的博客
05-13 4006
案例说明 案例分析 案例实现代码 在这里插入代码片 代码运行结果 插入结果图片
Python搭建一套会议待办事项自动提醒程序
weixin_46156257的博客
06-14 1232
在日程工作中，会议经常会有待办事项需要完成，通常需要安排专人每天关注完成情况并催促相关人员完成，如果会议较多，则会耗费很多时间和精力来完成。基于此需求，本文开发了一套自动提醒相关人员完成待办事项的程序，可多人同时使用，只需owner自己去配置相关参数即可实现。
js练习-待办事项列表
weixin_45596380的博客
05-08 1588
知识点 document.createElement(); 方法通过指定名称创建一个元素 document.createTextNode(); 可创建文本节点 appendChild(); 方法可向节点的子节点列表的末尾添加新的子节点。 parentElement(); 查找父元素 addEventListener() 方法用于向指定元素添加事件句柄。 语法：element.addEventListener(event, function, useCapture)； event：必须，指定事件名称； fun
JS练习之JS/CSS实现待办事项列表
qq_36882054的博客
10-21 1403
JS练习之JS/CSS实现待办事项列表 实现效果如下图： HTML代码段 <div id="myDIV" class="header"> <h2 style="margin:5px">我的待办事项</h2> <input type="text" id="myInput" placeholder="Title.."> <span oncl...
html 管理器添加新项,使用HTML5 IndexedDB创建待办事项管理器
weixin_35182280的博客
06-18 285
简介IndexedDB 是 HTML5 中的新增功能。本文中的示例代码演示了如何创建一个简单的待办事项管理器。IndexedDB 是什么？IndexedDB 是对象存储，它不同于带有表格(包含行和列的集合)的关系数据库。这是一个重要的根本区别，并且会影响您设计和构建应用的方式。在传统的关系数据存储中，我们有一个“待办事项”的表格，其中各行存储了用户待办事项数据的集合，而各列则是数据的命名类型。要插...
toDoList最简单待办事项案例的实现
HIRAETHZY的博客
04-27 1271
⑥ load 加载函数里面，新增一个条件,如果当前数据的done为true 就是已经完成的，就把列表渲染加载到 ul 里面。① 切记： 页面中的数据，都要从本地存储里面获取，这样刷新页面不会丢失数据，所以先要把数据保存到本地存储里面。④ 根据这个索引号删除相关的数据----数组的splice(i, 1)方法，从i的位置开始删除，删除一位。获取本地存储数据，需要把里面的字符串转换为对象格式JSON.parse() 我们才能使用里面的数据。① 点击里面的a链接，不是删除的li，而是删除本地存储对应的数据。
用vue制作一个任务清单（todoList）
qq_55299191的博客
07-04 1188
用vue制作一个任务清单（todoList）
jquery ui 拖拽插件和添加表单列表内容编辑镜头待办事项列表
10-27
这个项目“jquery ui 拖拽插件和添加表单列表内容编辑镜头待办事项列表”显然是一个利用jQuery UI实现的交互式应用，主要用于创建可拖动、可编辑的待办事项列表。下面我们将详细探讨相关的知识点。 首先，jQuery UI...
利用JS实现简单的todoList（记事本）效果
peri_zxy的博客
08-16 2958
目录 1.实现效果展示 2.HTML代码 3.CSS代码 4.Javascript代码 该记事本程序利用HTML+CSS+JavaScript前端三大框架来实现。 实现了记事本的添加，已完成和删除待办事项的基本功能。 下面是程序实现的全部代码： 1.实现效果展示 2.HTML代码 <head> <meta charset="UTF-8"> <title>TodoList</title> //导入css文件 <l
用JavaScript操作本地存储制作一个记事本
qq_42853685的博客
09-25 2856
用JavaScript操作本地存储制作一个记事本1.介绍2.功能介绍3.主要技术4.具体步骤4.1 页面布局4.2 CSS文件4.2 编写js文件4.2.1 输入框的鼠标弹起事件4.2.2 获取本地存储数据与保存本地存储的数据4.2.3 渲染页面4.2.4 点击复选框判断事件的完成状况4.2.5 点击小圆圈删除事件4.2.6 双击任务名并修改5.结束记事本到这儿就结束了，这是我第一次写技术博客...
web大作业 功能性网站 todolist
jingkai0714的博客
05-18 434
实现功能：每日列表清单 添加任务 删除任务 勾选完成任务 修改任务 保存到本地存储 保证每次打开网页的时候还会有数据保存 1.html部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport
前端开发攻略---使用css实现滚动吸附效果
最新发布
nibabaoo的博客
10-12 304
使用css实现滚动吸附效果
CSS——文字打字机效果
懒羊羊大王的博客
10-06 1882
本文通过纯 CSS 实现文字的打字机效果，然后借助 JS 实现了扩展。基本思路：使用伪元素覆盖原文字，并且使用伪元素模拟闪烁的光标效果。
【CSS in Depth 2 精译_046】7.1 CSS 响应式设计中的移动端优先设计原则（下）
PeacefulWinter的博客
10-08 1365
本篇为《CSS in Depth》全新第2版7.1节的后半部分内容，主要介绍了移动端优先设计原则指导下，实现主导航菜单的动态切换效果的具体细节及相关的注意事项。并介绍了视口 meta 标签相关的配置知识。涉及知识点的讲解，无一不深入浅出，循循善诱，强烈建议收藏！
uniapp实现页面开发中
CSDN_Admin0的博客
10-11 335
【代码】uniapp实现页面开发中。
CSS总结
qiuluoyuwang的博客
10-05 841
下午接着写
帮我用html,css,js写一个待办事项页面
06-12
好的，以下是一个简单的待办事项页面的HTML、CSS、JS代码： HTML代码： ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>待办事项</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <h1>待办事项</h1> <div class="input-container"> <input type="text" id="input" placeholder="请输入待办事项"> <button id="add">添加</button> </div> <ul id="list"></ul> </div> <script src="script.js"></script> </body> </html> ``` CSS代码： ``` * { box-sizing: border-box; } body { font-family: Arial, sans-serif; margin: 0; padding: 0; } .container { max-width: 500px; margin: 0 auto; padding: 20px; } h1 { text-align: center; } .input-container { display: flex; } #input { flex: 1; padding: 10px; margin-right: 10px; } #add { background-color: #4CAF50; color: white; border: none; padding: 10px; cursor: pointer; } #add:hover { background-color: #3e8e41; } ul { list-style-type: none; padding: 0; } li { display: flex; align-items: center; margin-bottom: 10px; } .check { margin-right: 10px; } .delete { background-color: #f44336; color: white; border: none; padding: 5px; cursor: pointer; } .delete:hover { background-color: #da190b; } ``` JS代码： ``` const input = document.getElementById('input'); const addBtn = document.getElementById('add'); const list = document.getElementById('list'); addBtn.addEventListener('click', () => { const text = input.value.trim(); if (text) { const item = document.createElement('li'); item.innerHTML = ` <input type="checkbox" class="check"> <span>${text}</span> <button class="delete">删除</button> `; list.appendChild(item); input.value = ''; } }); list.addEventListener('click', (event) => { if (event.target.classList.contains('check')) { const item = event.target.parentElement; if (event.target.checked) { item.classList.add('checked'); } else { item.classList.remove('checked'); } } else if (event.target.classList.contains('delete')) { const item = event.target.parentElement; list.removeChild(item); } }); ``` 这个页面有一个输入框和一个“添加”按钮，当用户输入文本并点击“添加”按钮时，页面会添加一个待办事项。每个待办事项包括一个复选框、一个文本和一个“删除”按钮。当用户勾选待办事项的复选框时，该待办事项会被标记为已完成；当用户点击待办事项的“删除”按钮时，该待办事项会被删除。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值