js 实现简单todo效果

最新推荐文章于 2023-06-06 16:39:51 发布

ikebo

最新推荐文章于 2023-06-06 16:39:51 发布

阅读量4k

点赞数

分类专栏： javascript 文章标签： javascript todo

本文链接：https://blog.youkuaiyun.com/k_runtu/article/details/80827264

版权

javascript 专栏收录该内容

13 篇文章

订阅专栏

代码

<!DOCTYPE html>
<html>
<head>
    <title></title>
<style>
    .done {
        color: red;
        text-decoration: line-through;
    }
</style>
</head>
<body>
<div class="todo-main">
    <div class="todo-form">
        <input id="id-input-todo" type="text">
        <button id="id-button-add" type="button">Add</button>
    </div>

    <!-- todo列表 -->
    <div id="id-div-container">

    </div>
</div>
</body>
<script>
    var log = function() {
        console.log.apply(console, arguments);
    }

    var $ = function(ele) {
        return document.querySelector(ele);
    }

    var todoList = [];

    var addButton = $('#id-button-add');
    addButton.addEventListener('click', function() {
        var todoInput = $('#id-input-todo');
        var task = todoInput.value;
        var todo = {
            'task': task,
            'time': currentTime()
        }
        todoList.push(todo);
        saveTodos();
        insertTodo(todo);
    });

    var insertTodo = function(todo) {
        var todoContainer = $('#id-div-container');
        var t = templateTodo(todo);
        todoContainer.insertAdjacentHTML('beforeend', t);
    };

    var templateTodo = function(todo) {
        var t = `
            <div class='todo-cell'>
                <button class='todo-done'>完成</button>
                <button class='todo-delete'>删除</button>
                <span contenteditable='true'>${todo.task}</span>
                <span>${todo.time}</span>
            </div>
        `
        return t;
    };

    var todoContainer = $('#id-div-container');
    todoContainer.addEventListener('keydown', function(event) {
        var target = event.target;
        if(event.key === 'Enter') {
            target.blur();
            event.preventDefault();
            var index = indexOfElement(target);
            todoList[index].task = target.innerHTML;
            saveTodos();
        }
    });


    todoContainer.addEventListener('click', function(event){
        log('container click', event, event.target);
        var target = event.target;
        if(target.classList.contains('todo-done')) {
            log('done');
            // 给 todo div 开关一个状态 class
            var todoDiv = target.parentElement;
            toggleClass(todoDiv, 'done');
        } else if (target.classList.contains('todo-delete')) {
            log('delete');
            var todoDiv = target.parentElement;
            var index = indexOfElement(target);
            log('delete index',  index);
            todoDiv.remove();
            // 把元素从 todoList 中 remove 掉
            // delete todoList[index]
            todoList.splice(index, 1);
            saveTodos();
        }
    });

    var saveTodos = function() {
        var s = JSON.stringify(todoList);
        localStorage.todoList = s;
    };

    var loadTodos = function() {
        var s = localStorage.todoList;
        return JSON.parse(s);
    };


    var indexOfElement = function(element) {
        var parent = element.parentElement;
        for(var i = 0; i < parent.children.length; ++i) {
            var e = parent.children[i];
            if (e === element) {
                return i;
            }
        }
    };

    var toggleClass = function(element, className) {
        if (element.classList.contains(className)) {
            element.classList.remove(className);
        } else {
            element.classList.add(className);
        }
    };



    var currentTime = function() {
        var d = new Date();
        var month = d.getMonth() + 1;
        var date = d.getDate();
        var hours = d.getHours();
        var minutes = d.getMinutes();
        var seconds = d.getSeconds();
        var timeString = `${month}/${date} ${hours}:${minutes}:${seconds}`;
        return timeString;
    };  


    todoList = loadTodos();
    for(var i = 0; i < todoList.length; ++i) {
        var todo = todoList[i];
        insertTodo(todo);
    }

</script>
</html>

效果

这里写图片描述