基于原生js实现的todolist（todomvc）

最新推荐文章于 2022-02-04 23:59:27 发布
最新推荐文章于 2022-02-04 23:59:27 发布
阅读量666 收藏 5
点赞数
分类专栏： html JavaScript 文章标签： javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_22154647/article/details/106578187
版权 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>todolist</title>
    <style>
        .active {
            text-decoration: line-through;
            color: #ccc;
        }

        p {
            display: flex;
            height: 50px;
            width: 100%;
            justify-content: space-around;
            align-items: center;
            border-bottom: 1px solid;
        }

        #btn {
            width: 60px;
            height: 30px;
        }

        #todo {
            background: #eee;
            border-radius: 5px;
            border: 1px solid;
            text-align: center;
            width: 400px;
            height: 600px;
            margin: auto;
            position: relative;
        }

        #checkall {
            height: 20px;
            width: 20px;
        }

        #message {
            height: 30px;
            width: 240px;
            border-radius: 5px;
        }

        .message {
            width: 80px;
            height: 30px;
            border-radius: 5px;
        }

        ul {
            width: 100%;
            height: 100%;
            list-style-type: none;
            padding:0;
            margin: 0;
        }

        ul li {
            padding:0 20px;
            box-sizing: border-box;
            list-style-type: none;
            text-align: left;
            height: 40px;
            line-height: 40px;
            font-size: 20px;
            border-bottom: 1px solid #ccc;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        ul li input {
            width: 20px;
            height: 20px;
            line-height: 40px;
        }

        ul li #delbtn {
            width: 20px;
            height: 20px;
            color: tomato;
        }
        .foot{
            position: absolute;
            bottom: 0;
            height: 40px;
            width: 100%;
            border-top: 1px solid #ccc;
            display: flex;
            justify-content: space-around;
            align-items: center;
            color: #888;
        }
        .foot input{
            width: 14px;
            height: 14px;
        }
        #delsuc{
            cursor:pointer;
        }
        a{
            text-decoration: none;
            color: #888;
        }
        div ul li .li_msg{
            width: 300px;
            line-height: 40px;
        }
    </style>
</head>

<body>
    <div id="todo">
        <div>
            <h3>todolist</h3>
            <p>
                <input type="checkbox" data-id="checkall" id="checkall">
                <label for="checkall">全选</label>
                <input type="text" id="message">
                <button id="btn">添加</button>
            </p>

        </div>
        <div id="listbox">

        </div>
        <div class="foot">
            <span>
                <input type="checkbox" id="seeall">
                <label for="seeall">全部</label>
            </span>
            <span> <input type="checkbox" id="suc">
            <label for="suc">已完成</label></span>
           <span>  <input type="checkbox" id="un">
            <label for="un">未完成</label></span>
          
            <span id="delsuc">删除完成</span>
        </div>
    </div>
    <script>
        class Todolist {
            constructor() {
                this.message = document.getElementById("message")
                this.btn = document.getElementById("btn")
                this.listbox = document.getElementById("listbox")
                this.all = document.getElementById("checkall")
                this.delsuc=document.getElementById("delsuc")
                this.seeall=document.getElementById("seeall")
                this.suc=document.getElementById("suc")
                this.un=document.getElementById("un")
                this.addEvent()
            }
            addEvent() {
                this.render()
                this.checkall()
                btn.onclick = () => {
                    if (this.message.value) {
                        this.add()
                    }
                }
                this.all.onclick = () => {
                    this.checkdone()
                }
                this.delsuc.onclick=()=>{
                    this.deldone()
                }
                this.suc.onclick=(e)=>{
                    location.href="#/suc"
                    if(this.suc.checked==true){
                        this.seeall.checked=false
                        this.un.checked=false
                    }
                    this.render()
                }
                this.un.onclick=(e)=>{
                    location.href="#/un"
                    if(this.un.checked==true){
                        this.seeall.checked=false
                        this.suc.checked=false
                    }
                    this.render()
                }
                this.seeall.onclick=(e)=>{
                    location.href="#/"
                    if(this.seeall.checked==true){
                        this.un.checked=false
                        this.suc.checked=false
                    }
                    this.render()
                }
            }
            add() {
                var list = this.getdata() || [];
                var obj = {}
                obj.state = false;
                obj.order = Date.now()
                obj.message = this.message.value
                list.push(obj)
                this.setdata(list)
                this.message.value = ""
                this.render()
            }
            getdata() {
                return JSON.parse(localStorage.getItem("todolist"))
            }
            setdata(arr) {
                localStorage.setItem("todolist", JSON.stringify(arr))
                this.checkall()
                
            }
            checkall() {
                var list = this.getdata()
                if (list.length > 0) {
                    var allstate = list.every((item) => {
                        return item.state == true
                    })
                    if (allstate) {
                        this.all.checked = true
                    }else {
                            this.all.checked = false
                        }
                    } 
            }
            checkdone() {
                // console.log(this.all.checked)
                var list = this.getdata()
                list.forEach((item) => {
                    item.state = this.all.checked
                });
                // console.log(list)
                this.setdata(list)
                this.render()
            }
            deldone(){
                var list=this.getdata()
                list=list.filter((item)=>{
                    return item.state!=true
                })
                this.setdata(list)
                this.render()
            }
            render() {
                
                var list = this.getdata() || [];
                var str = `<ul>`;
                    var ha=location.hash.slice(2)
                // console.log(ha)
                if(ha==""){
                    this.seeall.checked=true
                }else if(ha=="suc"){
                    this.suc.checked=true
                    list=list.filter((item=>{
                        return item.state==true
                    }))
                }else if(ha=="un"){
                    this.un.checked=true
                    list=list.filter((item)=>{
                        return item.state==false
                    })
                }
                if(this.seeall.checked==true){
                    this.seeall.parentNode.style.color="#333"
                }else{
                    this.seeall.parentNode.style.color="#888"
                }
                if(this.suc.checked==true){
                    this.suc.parentNode.style.color="#333"
                }else{
                    this.suc.parentNode.style.color="#888"
                }
                if(this.un.checked==true){
                    this.un.parentNode.style.color="#333"
                }else{
                    this.un.parentNode.style.color="#888"
                }
                list.forEach((item, index) => {
                    str += `<li data-id=${item.order}  class=${item.state ? "active" : ""}>
                        <aside><input type="checkbox" ${item.state ? "checked" : ""}    data-check=${item.order}>
                        <span data-id=${item.order} class="msg">${item.message}</span></aside>
                        <input type="button" value="x" id="delbtn"/>
                        </li>`
                });
                str += `</ul>`
                this.listbox.innerHTML = str
                var myul = document.getElementsByTagName("ul")[0]
                
                myul.onclick = (e) => {
                    var mytype = e.target.getAttribute("class")
                    if (e.target.type == "button") {
                        var i = e.target.parentNode.getAttribute("data-id")
                        
                        var list = this.getdata()
                        var ix = 0
                        list.forEach((item, index) => {
                            if (item.order == i) {
                                ix = index
                            }
                        });
                        list.splice(ix, 1)
                        this.setdata(list)
                        this.render()
                    }
                    if (e.target.type == "checkbox") {
                        e.target.parentNode.parentNode.classList.add("active")
                        if (e.target.checked == false) {
                            e.target.parentNode.parentNode.classList.remove("active")
                        }
                        var i = e.target.parentNode.parentNode.getAttribute("data-id")
                        var list = this.getdata()

                        var ix = 0
                        list.forEach((item, index) => {
                            if (item.order == i) {
                                ix = index
                            }
                        });
                        list[ix].state = !list[ix].state
                        this.setdata(list)
                        this.render()
                    }
                }
                myul.ondblclick=(e)=>{
                    if(e.target.tagName=="LI"){
                        // console.log(e.target)
                        // console.log(e.target.children[0].children[1].innerHTML)
                        var li_msg=e.target.children[0].children[1].innerHTML
                        var edit=`<input type="text" class="li_msg" value=${li_msg} />`
                        // console.log(edit)
                        e.target.children[0].children[1].innerHTML=edit
                        e.target.children[0].children[1].children[0].focus()
                        e.target.children[0].children[1].children[0].onblur=(e)=>{
                            // console.log(e.target.value)
                            edit=e.target.value;
                            var id=(e.target.parentNode.dataset.id)
                            let list=this.getdata()
                            var ix = 0
                        list.forEach((item, index) => {
                            if (item.order == id) {
                                list[index].message=edit
                            }
                        });
                            
                            this.setdata(list)
                            e.target.parentNode.innerHTML=edit
                        }
                    }
                }
            }
        }
        new Todolist()
    </script>
</body>

</html>

 

fjxylin
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
原生js实现todolist案例
weixin_69761220的博客
08-04 1113
todolist
JavaScript组件化开发实战——TodoMVC
asrocky的博客
09-26 1403
JavaScript组件化开发实战——TodoMVC requirejs + jquery 实现前端代码组件化开发 特点： 1) 组件之间的关系可视化 2) 组件之间不直接调用对方的函数，而是通过消息来完成交互。
TodoMVC模板的原生js待办事项卡片
zhiqiang_xiong的博客
05-04 581
个人待办事项记录簿 简介： 这是基于todoMVC模板的一个记录待办事项页面，模板地址。 该模板需要自行通过npm下载初始化页面样式，而且没有各种交互的逻辑代码。 该项目的交互代码是采用原生js结合es6的数组方法实现。 虽然项目要实现的功能多，但实现起来都比较简单，非常适合练手。 实现的功能 待办事项的完成、添加、删除、全选和反选所有待办等功能，单击重新编辑待办功能、实时显示剩余未完成待办的功能、三个按钮的事项筛选功能、将所有事项存储到客户端中、一键清除所有已完成事项功能； 利用单一数据流的特点对项
Angular.js学习之路一：使用angular.js实现todomvc
weixin_33796177的博客
06-28 133
需要的知识 html、js、初步了解angularjs 熟悉npm、git的操作 起步 在github上给我们提供了一个todomvc的模板，我们可以clone下来，使用 安装npm,安装git（具体安装不在描述，请自行百度） 在本地新建文件夹todomvc，打开终端进入当前目录，执行下面的命令 git clone https:/...
marionettejs实现todoMVC（更新版）
10-17
marionettejs实现todoMVC对前一个版本的资源，进行了更加marionettejs的写法，用于对statusview显示和关闭
原生JavaScript实现todolist功能
10-18
本篇文章给大家介绍了通过原生JavaScript实现todolist功能相关知识点，对此有需要的朋友可以学习下。
Todolist-js:原生js实现Todolist
03-20
Todolist-js 原生js实现Todolist原项目参照使用ES6写法将其中逻辑代码进行重组告别加程序员逐步（雾..
React实现TodoList效果案例
最新发布
04-02
使用 React 脚手架实现 TodoList 功能 功能: 组件化实现此功能 1. 显示所有todo列表 2. 输入文本, 点击按钮显示到列表的首位, 并清除输入的文本 实现方式： App.js 为父组件，通过组件之间的传参来实现所有功能
基于vuejs实现一个todolist项目
10-20
主要为大家详细介绍了基于vuejs实现一个todolist项目，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
纯JavaScript实现的简单TodoMVC示例应用
08-12
纯JavaScript实现的简单Todo MVC示例应用
使用Alpine.js的TodoMVC快速实现-JavaScript开发
05-26
使用Alpine.js快速创建TodoMVC应用程序TodoMVC应用程序模板用于创建TodoMVC应用程序的模板入门在接触模板之前，请阅读应用程序规范。 删除此文件，然后将app-readme.md重命名为readme.md并填写。 克隆此仓库，并通过运行以下命令使用npm安装依赖项：npm install。 许可TasteJS的本作品根据知识共享署名4.0国际许可获得许可。
TodoMVC::clipboard:TodoMVC 基于原生 HTML+JS+CSS | 同济大学SSE网络编程课程项目
08-05
TodoMVC :globe_with_meridians: :package: 手机端模拟long touch 便利贴Todo 浮动球 除此之外 系统主题自适应 字体大小自适应 safari浏览器优化 开发环境 关于作者 项目结构 背景介绍 TodoMVC 是一个开源项目，实现了一个 Todo Application，广泛用于 MV* 框架的选择 功能，对应数据库表中记录的增删查改操作（CRUD），TodoMVC 功能是完备的，同时还有表单编辑（edit）功能，过滤（filter）功能等。 扩展，TodoMVC 本身没有实现网络，本地数据存储，路由等功能，教学过程中可以很方便地扩展这些功能，让学生对所学功能有一个更全面的认识；这个过程很有趣，因为你在通过所学知识逐渐让 TodoMVC 变得更加实用。 实用，大量框架和语言实现了 TodoMVC，这带来了一个额外的优势: 一旦熟悉了 TodoMVC，今后熟悉一门新框架（或语言、工具）的成本就更低了
todoMVC案例(Vuejs)
欣欣酱博客
01-14 750
所有实现代码在文章结尾处 分析整个实现过程的步骤： 1.显示大标题“todoMVC" 在h1中引入{{msg}}，在js文件中将msg赋值，从而在html中显示大标签的内容 2.当没有数据时，两块模板需要隐藏，用到v-if标签。将两个模板放在一个template标签中，当items.length=0时，则v-if=false,进而两块模板隐藏。 3.引入数据。将JS中写好的默认数据引入在html的每一个li标签中。 4.将每个事件划分为完成/未完成。该功能用到双向数据绑定，可以在浏览器中vue模
（22）Vue.js 综合案例：TodoMVC
Java田根旺
02-04 1027
一、TodoMVC介绍 TodoMVC 是一个经典项目，让开发者快速实践到框架开发方式。 官网地址：http://todomvc.com/ TodoMVC一句话评价：功能完备不冗余，多样实现引深思。 其实就说的是我们可以再内容中去使用到Vue.js的语法，但不会为了去练习语法而练习语法，再不同的场景体会语法带来的不同效果，对语法进行更深刻的理解。 二、TodoMVC准备工作 安装git版本控制工具：https://git-scm.com/ Git是一个开源的分布式版本控制系统，用于敏捷高效地.
vue.js实现任务列表（ToDoMVC）
hackerlee
05-10 2251
案例介绍 TodoMVC 需求说明 TodoMVC 需求说明 脑图整理的需求说明 开始 TodoMVC 模板仓库 # 下载模板到本地，重命名为 todomvc-vue # --depth=1 表示只下载最后一次的 commit，其它历史记录不要，这样可以提高下载速度 git clone https://github.com/tastejs/todom...
用vue.js写todoMvc
m0_38027483的博客
10-11 323
HTML部分 &lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
ToDoMVC ( jQuery )
algzjh的博客
07-15 1100
index.html<!doctype html> <html lang="en" data-framework="jquery"> <head> <meta charset="utf-8"> <title>jQuery • TodoMVC</title> <link rel="stylesheet" href="node_modules/to
AngularJS实现TodoMVC
weixin_30326745的博客
01-18 70
一个小的to do list,界面如下 首先安装angular js，出现了无非安装到桌面的问题，安装到D盘了 npm install angular 文件结构： index.html: <!doctype html> <html lang="en"> <head> <meta charse...
原生js dom实现todolist
03-16
原生JS DOM实现todolist的步骤如下： 1. 创建一个HTML页面，包含一个输入框和一个按钮，用于添加新的任务。 2. 创建一个空的任务列表，用于存储所有的任务。 3. 当用户点击添加按钮时，获取输入框中的文本，并将...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值