html，css，原生js写todolist网页

最新推荐文章于 2024-06-01 09:35:09 发布
最新推荐文章于 2024-06-01 09:35:09 发布
阅读量1.6k 收藏 4
点赞数 2
分类专栏： start
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43905448/article/details/88747040
版权

希望得到的界面

在这里插入图片描述

代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    header{
        height: 60px;
        background:slategrey;
    }
    header .box,.ToDoList{
        width: 600px;
        padding: 0 10px;
        margin: 0 auto;
    }
    body{
        background-color: darkgray;
        margin: 0;
        padding: 0;
        font-size: 16px;
    }
    label{
        float: left;
        width: 150px;
        line-height: 60px;
        color:rgb(10, 10, 10);
        font-size: 20px;
        cursor:auto;
    }
    header input{
        float: right;
        width: 70%;
        height: 30px;
        margin-top:15px;
        text-indent: 5px;
        border-radius:3px;
        box-shadow: 0 1px 0 darkgray;
        border: none;
    }
    input:focus{
        outline-width: 0;
    }
    h2{
        position: relative;
    }
    span {
    position: absolute;
    top: 2px;
    right: 5px;
    /* 设置行内块 有宽高*/
    display: inline-block;
    padding: 0 5px;
    height: 20px;
    border-radius: 20px;
    background: #E6E6FA;
    line-height: 22px;
    text-align: center;
    color: #666;
    font-size: 14px;
}
   ol,ul{
       padding: 0;
       list-style: none;
   }
   li{
    height: 32px;
    line-height: 32px;
    background: #fff;
    position: relative;
    margin-bottom: 10px;
    padding: 0 45px;
    border-radius: 3px;
    border-left: 5px solid #629A9C;
    box-shadow: 0 1px 2px rgba(0,0,0,0.07);
   }
   li input {
    position: absolute;
    top: 2px;
    left: 10px;
    width: 22px;
    height: 22px;
    cursor: pointer;
}
    p{
        margin: 0;

    }
    li p input{
    top: 3px;
    left: 40px;
    width: 70%;
    height: 20px;
    line-height: 14px;
    text-indent: 5px;
    font-size: 14px;
    }
    ul li{
    border-left: 5px solid #999;
    /*不透明度 0完全透明~1完全不透明*/
    opacity: 0.5;
    }
    li a{
    position: absolute;
    top: 2px;
    right: 5px;
    display: inline-block;
    width: 14px;
    height: 12px;
    border-radius: 14px;
    border: 6px double #FFF;
    background: #CCC;
    line-height: 14px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    }
    footer{
    color: #666;
    font-size: 14px;
    text-align: center;
    }
    footer a{
        text-decoration:bisque;
        color: black;
    }


    </style>
</head>
<body>
    <header>
        <div class="box">
            <form action="javascript:postaction()" id="form">
                    <!-- for将label标签绑定到input -->
                    <label for="title">ToDoList</label>
                    <!-- required规定提交表单之前有必填字段  autocomplete:自动补齐-->
                    <input type="text" id="title" name="title" placeholder="添加ToDo" required="required" autocomplete="off" />
                </form>
            </div>
    </header>
    <div class="ToDoList">
            <h2 onclick="save()">正在进行 <span id="todocount"></span></h2>
            <ol id="todolist" class="demo-box">
            </ol>
            <h2>已经完成 <span id="donecount"></span></h2>
            <ul id="donelist">
            </ul>
    </div>
    <footer>
        <a href="javascript:clear();">清除内容</a>
    </footer>
    <script type="text/javascript">
            function clear() {
                localStorage.clear();
                load();
            }
            function postaction() {
    // 获取title节点
    var title = document.getElementById("title");
    if (title.value.trim() == "") {
        alert("内容不能为空");
    } else {
        var data = loadData();
        var todo = { "title": title.value, "done": false };
        data.push(todo);
        saveData(data);
        var form = document.getElementById("form");
        form.reset();
        load();
    }
}
function loadData() {
    var collection = localStorage.getItem("todo");
    if (collection != null) {
        return JSON.parse(collection);
    } else return [];
}
function saveSort() {
    var todolist = document.getElementById("todolist");
    var donelist = document.getElementById("donelist");
    var ts = todolist.getElementsByTagName("p");
    var ds = donelist.getElementsByTagName("p");
    var data = [];
    for (i = 0; i < ts.length; i++) {
        var todo = { "title": ts[i].innerHTML, "done": false };
        data.unshift(todo);
    }
    for (i = 0; i < ds.length; i++) {
        var todo = { "title": ds[i].innerHTML, "done": true };
        data.unshift(todo);
    }
    saveData(data);
}

            function saveData(data) {
    localStorage.setItem("todo", JSON.stringify(data));
}

function remove(i) {
    var data = loadData();
    var todo = data.splice(i, 1)[0];
    saveData(data);
    load();
}

function update(i, field, value) {
    var data = loadData();
    var todo = data.splice(i, 1)[0];
    todo[field] = value;
    data.splice(i, 0, todo);
    saveData(data);
    load();
}

function edit(i) {
    load();
    var p = document.getElementById("p-" + i);
    title = p.innerHTML;
    p.innerHTML = "<input id='input-" + i + "' value='" + title + "' />";
    var input = document.getElementById("input-" + i);
    input.setSelectionRange(0, input.value.length);
    input.focus();
    input.onblur = function() {
        if (input.value.length == 0) {
            p.innerHTML = title;
            alert("内容不能为空");
        } else {
            update(i, "title", input.value);
        }
    };
}

function load() {
    var todolist = document.getElementById("todolist");
    var donelist = document.getElementById("donelist");
    var collection = localStorage.getItem("todo");
    if (collection != null) {
        var data = JSON.parse(collection);
        var todoCount = 0;
        var doneCount = 0;
        var todoString = "";
        var doneString = "";
        for (var i = data.length - 1; i >= 0; i--) {
            if (data[i].done) {
                doneString += "<li draggable='true'><input type='checkbox' onchange='update(" + i + ",\"done\",false)' checked='checked' />" +
                    "<p id='p-" + i + "' onclick='edit(" + i + ")'>" + data[i].title + "</p>" +
                    "<a href='javascript:remove(" + i + ")'>-</a></li>";
                doneCount++;
            } else {
                todoString += "<li draggable='true'><input type='checkbox' onchange='update(" + i + ",\"done\",true)' />" +
                    "<p id='p-" + i + "' onclick='edit(" + i + ")'>" + data[i].title + "</p>" +
                    "<a href='javascript:remove(" + i + ")'>-</a></li>";
                todoCount++;
            }
        };
        todocount.innerHTML = todoCount;
        todolist.innerHTML = todoString;
        donecount.innerHTML = doneCount;
        donelist.innerHTML = doneString;
    } else {
        todocount.innerHTML = 0;
        todolist.innerHTML = "";
        donecount.innerHTML = 0;
        donelist.innerHTML = "";
    }
}

window.onload = load;
    </script>
</body>
</html>

最后得出的效果图

在这里插入图片描述

心得：

没想到一个简单的todolist想要实现基本的功能这么难；
从html到css到js一步一步按着http://www.todolist.cn/模仿才能写出来；
写完之后发现每一个板块都有大量的知识空缺。

洋大槐
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
todolist（网页版记事本）
fusheng_cn的博客
07-24 1485
todolist（网页版记事本）
todolist.zip
08-24
在本项目中，"todolist.zip" 包含了一个使用前端三大核心技术——HTML、CSS和JavaScript实现的简单待办事项列表应用。这个小巧的应用旨在帮助用户管理日常任务，通过交互式的界面来添加、删除和查看待办事项。下面将...
todolist:网页版代办事项列表
07-07
TodoList 一个网页的代办事项列表 Quick Start go get github.com/Bluek404/todolist 或者直接从releases下载 编辑config.yaml 运行 完成度 多用户支持 支持待办事项分类 支持隐藏已完成事项 支持添加待办事项 支持编辑待办事项 支持删除待办事项 支持多终端登录自动同步各个终端列表 支持自定义事项背景颜色 支持代办事项支持时间提醒w 支持指定日期提醒 支持间隔一定时间提醒 支持固定时间提醒（生日、闹钟等） 支持达到时间使用邮件提醒 支持达到时间使用短信提醒 支持达到时间使用QQ提醒
推荐开源项目：To-Do-List——简单的任务管理网站
最新发布
gitblog_00010的博客
06-01 353
推荐开源项目：To-Do-List——简单的任务管理网站 项目地址:https://gitcode.com/tusharnankani/ToDoList To-Do-List 是一个简洁而实用的在线任务管理工具，它以用户友好和响应式设计为特色，可适应各类设备，并支持本地存储功能，确保你的待办事项永不丢失。此外，该应用还提供多种主题选择，让你的工作环境更加个性化。 项目技术分析 该项目基于 HTML...
HTML+CSS+JS实现TodoList应用和动画
宝子的博客
11-23 823
todoList实现清单，实现了本地存储，刷新不会损失数据，可以定时提醒，并添加了三个动画。
todolist 案例 原生JavaScript写法+HTML代码+CSS代码
hangshao_123的博客
11-06 2500
1. html结构： <header> <section> <label for="title">ToDoList</label> <input type="text" id="title" name="title" placeholder="添加ToDo" required="required" autocomplete="off" /> </sectio
手把手叫你做ToDoList
码媛小洋的博客
08-17 7336
ToDoList案例：案例介绍 文本框里面输入内容，按下回车，就可以生成待办事项。 点击待办事项复选框，就可以把当前数据添加到已完成事项里面。 点击已完成事项复选框，就可以把当前数据添加到待办事项里面。 但是本页面内容刷新页面不会丢失。 toDoList 分析以及注意点 刷新页面不会丢失数据，因此需要用到本地存储 localStorage。 核心思路： 不管按下回车，还是点击复选框，都是把本地存储的数据加载到页面中，这样保证刷新关闭页面不会丢失数据。 存储的数据格式：var todolist =
todolist项目，js原生入门项目
12-21
【标题】"todolist项目，js原生入门项目"是一个基于JavaScript原生代码实现的简单待办事项管理应用。这个项目旨在帮助初学者理解JavaScript的基础和实际应用，特别是在客户端Web开发中的基本操作。 【描述】提到，...
Vanilla-Js-ToDoList:这是Vanilla JavaScript To-Do List应用程序，用于通过测试任务
04-05
《Vanilla-Js-ToDoList：纯JavaScript实现的待办事项应用详解》 在Web开发领域，JavaScript是一种不可或缺的语言，而“Vanilla-Js-ToDoList”是一个使用纯JavaScript（Vanilla JS）编写的待办事项（Todo List）应用...
nodejs-todolist
04-01
**Node.js与TodoList应用** Node.js是一款基于Chrome V8引擎的JavaScript运行环境，它让JavaScript可以在服务器端执行，极大地拓宽了JavaScript的应用场景。在这个"nodejs-todolist"项目中，开发者使用Node.js构建...
Vanilla-Js-TodoList-Meski
02-09
【描述】在“Vanilla-Js-TodoList-Meski”项目中，开发者使用了HTML、CSS和JavaScript的基本原理来构建用户界面和交互逻辑。这是一个很好的学习资源，可以帮助初学者理解如何在实际项目中运用这些技术，以及它们之间...
原生JavaScript实现todolist功能
11-28
该项目主要可以练习js操控dom，事件，事件触发之间的逻辑关系，以及如何写入缓存，获取缓存。 主要功能： 将用户输入添加至待办项 可以对todolist进行分类，用户勾选即将待办项分入已完成组 todolist的每一项可删除和编辑 将用户输入数据写入localStorage本地缓存，实现对输入数据的保存 可以清楚域名下本地缓存，并清空所有todolist项 具体功能的实现 HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>todolist-prime</title
js实现todoList
weixin_47207556的博客
09-30 1500
原来用js也能写出来很漂亮的todoList 实现了todolist的添加，切换完成状态，删除功能。数据是存储在localStorgage上的因此刷新，或者重新进入数据都是存在的。 思路：将每个li节点用js对象来模拟，监听form，提交时添加li元素并追加到ul列表中。为每个创建的li绑定事件，切换状态。 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &
python todo-list网页实现
weixin_42954615的博客
10-05 836
python todo-list网页实现开始先献上代码代码剖析main.py初始化添加根路由添加接口开始运行templates/todolist.html初始化标题操作部分todo项存放用的divscript部分初始化100ms一次接收数据新建项整理todo-list部分最后闭环github作者 开始 先献上代码 todolist.py from flask import Flask,render_template todolist = [] app = Flask(__name__) @app.route
JavaScript（四）——实现ToDoList
Geng_____的博客
06-06 654
使用Javascript实现todolist部分功能
js实现Todolist
qq_63730529的博客
12-26 615
学习JavaScript过程中制作的一个Todolist
【前端】js 小项目，todolist 网页
qq_49150070的博客
03-15 274
一共3个文件，html，index.css，index.js。主要是 jQuery，css 部分没难点。
TODOLIST--一个简单的网页，实现事件的添加、修改、删除、标记
weixin_61144851的博客
03-26 206
一个简单网页
todolist——制作个人的代办事项网页
胡图图不糊涂的博客
03-12 448
写的代码较简单，考虑的没有那么全面但是可以运行 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>轮播图</title> <script type="text/javascri...
用HTML、CSS、Javascript写todolist
09-23
### 回答1： 好的，我来帮助您写一个简单的 Todo List。 首先，需要使用 HTML 来构建页面的基本结构。可以使用一个 `<input>` 元素作为输入框，一个 `<button>` 元素作为提交按钮，以及一个 `<ul>` 元素作为 Todo List 的容器。 ``` <input type="text" id="item"> <button id="add">Add</button> <ul id="todolist"></ul> ``` 然后，可以使用 CSS 来美化页面。 ``` #item { padding: 0.5em; font-size: 1em; width: 20em; } button { padding: 0.5em; font-size: 1em; background-color: lightblue; color: white; border: none; border-radius: 5px; cursor: pointer; } ul { list-style-type: none; padding: 0; margin: 0; } li { background-color: lightgray; margin-top: 0.5em; padding: 0.5em; } ``` 最后，可以使用 JavaScript 来实现添加和删除 Todo 的功能。 ``` const itemInput = document.querySelector("#item"); const addButton = document.querySelector("#add"); const todoList = document.querySelector("#todolist"); addButton.addEventListener("click", function() { const itemValue = itemInput.value; if (!itemValue) return; const li = document.createElement("li"); li.textContent = itemValue; const deleteButton = document.createElement("button"); deleteButton.textContent = "Delete"; deleteButton.addEventListener("click", function() { todoList.removeChild(li); }); li.appendChild(deleteButton); todoList.appendChild(li); itemInput.value = ""; }); ``` 整个 Todo List 完整代码如下： ``` <!DOCTYPE html> <html> <head> <style> #item { padding: 0.5em; font-size: 1em; width: 20em; } button { padding: 0.5em; font-size: ### 回答2： 编写一个todolist（待办事项清单）的网页应用可以使用HTML、CSS和Javascript来完成。以下是一个简单的实现方案： 首先，使用HTML来创建网页结构。可以使用一个无序列表（ul）来显示所有的待办事项。每个待办事项都是一个列表项（li），并包含一个复选框（checkbox）和文本内容。另外，可以添加一个输入框用于用户输入新的待办事项，并配上一个按钮用于提交。最后，添加一个空的段落（p）用于显示已完成的事项数量。 接下来，使用CSS来美化网页。可以选择自定义样式，根据自己设计的需求来设置字体、颜色、间距等。可以为复选框和文本内容分别设置样式，使它们看起来更加美观。 最后，使用Javascript来给网页添加交互功能。可以为提交按钮添加一个点击事件，当用户点击按钮时，使用Javascript获取输入框中的文本内容，并将其添加为新的待办事项。同时，还可以为每个复选框添加一个点击事件，当用户点击复选框时，使用Javascript来检查复选框的状态（选中或未选中），并相应更新已完成的事项数量。 此外，还可以使用Javascript来添加其他功能，比如删除待办事项、编辑待办事项等。可以根据需求来决定所需的功能，并相应编写Javascript代码来实现。 综上所述，使用HTML、CSS和Javascript编写todolist的网页应用，可以实现简单的交互功能，将用户输入的待办事项显示在页面上，并支持用户标记已完成的事项。通过合理的设计和编程，可以让网页应用更加美观和实用。 ### 回答3： 使用HTML、CSS和JavaScript编写todolist是一种常见的Web开发任务。以下是一个简单的示例： 首先，在HTML中创建一个div容器，用于显示todolist的标题和待办事项列表。在该div中，我们还可以添加一个表单元素，用于用户输入待办事项。例如： ```html <div> <h1>Todolist</h1> <form id="todo-form"> <input type="text" id="todo-input" placeholder="添加任务"> <button type="submit">添加</button> </form> <ul id="todo-list"> <!-- 待办事项会在这里显示 --> </ul> </div> ``` 接下来，在JavaScript中，我们可以使用事件监听器来获取表单提交事件，以便将用户输入的待办事项添加到列表中。我们还可以使用localStorage来存储用户的待办事项，以便在页面重载后能够保留它们。 ```javascript // 获取表单元素和列表元素 const form = document.querySelector('#todo-form'); const input = document.querySelector('#todo-input'); const list = document.querySelector('#todo-list'); // 从localStorage中获取待办事项 const savedTodos = localStorage.getItem('todos'); const todos = savedTodos ? JSON.parse(savedTodos) : []; // 将待办事项添加到列表中 function addTodo() { const todo = input.value.trim(); if (todo) { todos.push(todo); input.value = ''; renderTodos(); saveTodos(); } } // 删除待办事项 function deleteTodo(index) { todos.splice(index, 1); renderTodos(); saveTodos(); } // 渲染待办事项列表 function renderTodos() { list.innerHTML = ''; todos.forEach((todo, index) => { const li = document.createElement('li'); li.textContent = todo; const deleteBtn = document.createElement('button'); deleteBtn.textContent = '删除'; deleteBtn.addEventListener('click', () => deleteTodo(index)); li.appendChild(deleteBtn); list.appendChild(li); }); } // 保存待办事项到localStorage function saveTodos() { localStorage.setItem('todos', JSON.stringify(todos)); } // 在表单提交时调用addTodo函数 form.addEventListener('submit', (event) => { event.preventDefault(); addTodo(); }); // 页面加载时渲染待办事项列表 window.addEventListener('load', renderTodos); ``` 最后，在CSS中为todolist添加样式，使其看起来更加美观。可以使用CSS选择器来选择对应的HTML元素并设置样式。例如，可以使用以下样式为列表项添加一些装饰： ```css li { margin-bottom: 10px; padding: 10px; background-color: #f5f5f5; border-radius: 5px; } ``` 以上是一个简单的使用HTML、CSS和JavaScript编写的todolist示例。根据实际需求，你可以进一步扩展和优化代码，添加更多功能，如编辑待办事项、标记已完成的事项等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值