todolist

AmyGeng123發表於2020-10-06

使用jQuery製作todolist

HTML部分：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>ToDoList—最簡單的待辦事項列表</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/todolist.js"></script>
</head>
<body>
    <header>
        <section>
            <label for="title">ToDoList</label>
            <input type="text" id="title" name="title" placeholder="新增ToDo" required="required" autocomplete="off" />
        </section>
    </header>
    <section>
        <h2>正在進行 <span id="todocount"></span></h2>
        <ol id="todolist" class="demo-box">

        </ol>
        <h2>已經完成 <span id="donecount"></span></h2>
        <ul id="donelist">
        </ul>
    </section>
    <footer>
        Copyright &copy; 2014 todolist.cn
    </footer>
</body>
</html>

書寫的css部分:

body {
    margin: 0;
    padding: 0;
    font-size: 16px;
    background: #CDCDCD;
}

header {
    height: 50px;
    background: #333;
    background: rgba(47, 47, 47, 0.98);
}

section {
    margin: 0 auto;
}

label {
    float: left;
    width: 100px;
    line-height: 50px;
    color: #DDD;
    font-size: 24px;
    cursor: pointer;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

header input {
    float: right;
    width: 60%;
    height: 24px;
    margin-top: 12px;
    text-indent: 10px;
    border-radius: 5px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24), 0 1px 6px rgba(0, 0, 0, 0.45) inset;
    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 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;
}

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);
}

ol li {
    cursor: move;
}

ul li {
    border-left: 5px solid #999;
    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 {
    color: #666;
    text-decoration: none;
    color: #999;
}

@media screen and (max-device-width: 620px) {
    section {
        width: 96%;
        padding: 0 2%;
    }
}

@media screen and (min-width: 620px) {
    section {
        width: 600px;
        padding: 0 10px;
    }
}

書寫的js部分:

$(function () {
    // 設定輸入框滑鼠彈起事件
    $('#title').on('keyup', function (e) {
        if (e.keyCode === 13) {
            if ($(this).val().trim() == '') return $(this).val('');
            var data = getData();
            data.push({ title: $(this).val().trim(), done: false });
            setData(data);
            load(data);
            $(this).val('')
        }
    })
    // 點選刪除按鈕刪除當前內容
    $('#todolist,#donelist').on('click', 'a', function () {
        var data = getData();
        var index = $(this).attr('id');
        data.splice(index, 1);
        setData(data);
        load(data);
    })
    //點選核取方塊,改變內容的渲染位置
    $('#todolist,#donelist').on('click', 'li #checkbox', function (e) {
        var data = getData();
        var index = parseInt($(this).siblings('a').attr('id'));
        // console.log(index);
        // console.log(data[index]);
        data[index].done = $(this).prop('checked');
        setData(data);
        load(data);
    })
    //雙擊核取方塊,可以修改核取方塊中的資料
    $('#todolist,#donelist').on('dblclick', 'li p', function (e) {
        window.getSelection ? window.getSelection().removeAllRanges() : document.selection.e;//阻止雙擊選中文字
        var index = parseInt($(this).siblings('a').attr('id'));
        //將當前元素中的內容儲存在變數str中
        var str = $(this).html()
        //點選時在當前元素中新增一個input標籤
        $(this).html('<input type="text">');
        //獲取新增的元素
        var input = $(this).children("input")[0];
        //將元素中原來的內容賦值給新增的input標籤
        input.value = str;
        //設定標籤中的內容預設為選中狀態
        input.select();
        //設定新增的標籤失去焦點事件 失去焦點需要重新渲染頁面
        input.onblur = function () {
            // 獲取本地儲存
            var data = getData();
            // 修改資料
            data[index].title = this.value;
            //重新儲存到本地
            setData(data);
            //頁面渲染
            load(data);
        }
        input.onkeyup = function (e) {
            if (e.keyCode == 13) {
                this.blur()
            }
        }
    })
    //獲取本地儲存中的資料
    function getData() {
        var data = localStorage.getItem('item');
        if (data) {
            return JSON.parse(data);
        } else {
            return [];
        }
    }
    //將新的資料儲存到本地儲存中
    function setData(data) {
        localStorage.setItem('item', JSON.stringify(data))
    }
    load(getData())//頁面載入時就需要呼叫本地儲存中的資料來渲染頁面
    //渲染頁面
    function load(array) {
        var todoCount = 0;
        var doneCount = 0;
        $('#todolist,#donelist').html('')
        array.forEach(function (value, index) {
            if (value.done) {
                doneCount++;
                var li = `<li><input type='checkbox' checked='checked' id='checkbox'><p>${value.title}</p> <a href='javascript:;' id=" ${index}"></a></li>`;
                $('#donelist').prepend(li)
            } else {
                todoCount++;
                var li = `<li><input type='checkbox' id='checkbox'><p>${value.title}</p> <a href='javascript:;' id=" ${index}"></a></li>`;
                $('#todolist').prepend(li)
            }
        })
        $('#todocount').html(todoCount);
        $('#donecount').html(doneCount);
    }

})

此外還需要引入jQuery中的js檔案

總結

實現todolist主要有四大核心

  • 獲取本地儲存
  • 修改資料
  • 建立本地儲存
  • 渲染頁面

注意

  • 本地儲存裡面只能儲存字串的資料格式 儲存時如果是物件或陣列,需要使用 JSON.stringify() 轉換為字串格式
  • 獲取本地儲存的資料 需要把裡面的字串資料使用 JSON.parse() 轉換為物件或陣列格式

相關文章