ToDoList_todolist的页面初始化样式-CSDN博客

本文链接：https://blog.csdn.net/csertuh/article/details/120874531

1、页面初始化样式如图

2. 顶部input框中输入内容，按下回车enter键后，“正在进行” 列表中加入该条内容。

3. 顶部input框中输入内容，按下回车enter键后，“正在进行” 列表中继续加入内容。右上角的数字跟随列表数目变化而变化。

4. 点击列表左侧checkbox，可以将“正在进行”的列表项变更为“已经完成”的列表项。每个列表中的数字要跟随变动。

5. 点击列表项右侧的删除按钮可以删除列表项。

6.将当前列表项内容保存在cookie中，做持久存储，下一次访问页面的时候，仍可以看到以前的列表项内容。

7. 要求样式布局尽量和图片上保持一致

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ToDoList</title>
   <style type="text/css">
   	* {
   	    margin: 0;
   	    padding: 0;
   	}
   	.box {
   	    width: 1302px;
   	    background-color: #cdcdcd;
   	    margin: 0 auto;
   	    border-radius: 5px;
   	}
   	.box1 {
   	    width: 100%;
   	    height: 92px;
   	    background: #333;
   	    margin: auto;
   	    margin-top: 100px;
   	}
   	#title {
   	    width: 724px;
   	    height: 50px;
   	    margin-right: 53px;
   	    position: relative;
   	    top: -15px;
   	    border-radius: 5px;
   	    outline: none;
   	    font-size: 22px;
   	}
   	section {
   	    width: 1302px;
   	    margin: 0 auto;
   	    background-color: #cdcdcd;
   	}
   	#p1 {
   	    height: 100%;
   	    width: 486px;
   	    display: inline-block;
   	    color: white;
   	    font-size: 30px;
   	    font-weight: bold;
   	    padding-left: 30px;
   	    padding-top: 25px;
   	    position: relative;
   	    top: -12px;
   	}
   	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 {
   	    width: 1272px;
   	    height: 146px;
   	    background-color: #cdcdcd;
   	    display: flex;
   	    justify-content: space-between;
   	    font-weight: bold;
   	    font-size: 44px;
   	    line-height: 146px;
   	    padding-left: 30px;
   	
   	}
   	span {
   	    display: block;
   	    width: 40px;
   	    height: 40px;
   	    background-color: #e6e6fa;
   	    text-align: center;
   	    line-height: 40px;
   	    border-radius: 50%;
   	    margin-right: 63px;
   	    margin-top: 50px;
   	    font-size: 20px;
   	}
   	ol,ul {
   	    padding: 0;
   	    list-style: none;
   	}
   	li input {
   	    position: absolute;
   	    top: 2px;
   	    border: #CDCDCD 1px solid;
   	    left: 10px;
   	    width: 36px;
   	    height: 100%;
   	    cursor: pointer;
   	    margin-left: 30px;
   	}
   	p {
   	    position: relative;
   	    margin: 0;
   	    width: 1070px;
   	    height: 100%;
   	    left: 40px;
   	    line-height: 64px;
   	    font-size: 30px;
   	}
   	li p input {
   	    top: 3px;
   	    left: 40px;
   	    width: 70%;
   	    height: 20px;
   	    line-height: 14px;
   	    text-indent: 5px;
   	    font-size: 14px;
   	}
   	li {
   	    width: 1150px;
   	    height: 64px;
   	    line-height: 40px;
   	    line-height: 32px;
   	    background: #fff;
   	    position: relative;
   	    margin-bottom: 20px;
   	    padding: 0 45px;
   	    border-radius: 5px;
   	    border-left: #629a9c 10px solid;
   	    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: 43px;
   	    height: 38px;
   	    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;
   	    border-radius: 50%;
   	}
   </style>
</head>
<body>
    <div class="box">
        <div class="box1">
            <div class="box2">
                <form action="javascript:postaction()" id="form">
                    <p id="p1" for="title">ToDoList</p>
                    <input type="text" id="title" name="title" placeholder="添加ToDo" required="required"
                        autocomplete="off" />
                </form>
            </div>
        </div>
    </div>
    <section>
        <h2 onclick="save()">正在进行 <span id="todocount"></span></h2>
        <ol id="box3" class="demo-box">
        </ol>
        <h2>已经完成 <span id="span1"></span></h2>
        <ul id="surface">
        </ul>
    </section>
</body>
</html>
<script src="jQuery.js"></script>
<script>
	$(function () {
	    load();
	    $('#title').on('keydown', function (event) {
	        if (event.keyCode === 13) {
	            if ($(this).val() === "") {
	            } else {
	                var local = getDate();
	                // console.log(local);
	                local.push({
	                    title: $(this).val(),
	                    done: false
	                });
	                saveDate(local);
	                load();
	                $(this).val("");
	            }
	        }
	    });
	    $("ol,ul  ").on("click", "a", function () {
	        var data = getDate();
	        var index = $(this).attr("id");
	        data.splice(index, 1);
	        saveDate(data);
	        load();
	    });
	    $("ol,ul").on("click", "input", function () {
	        var data = getDate();
	        var index = $(this).siblings("a").attr("id");
	        console.log(index);
	        data[index].done = $(this).prop("checked");
	        console.log(data);
	        saveDate(data);
	        load();
	    });
	    function getDate() {
	        var data = localStorage.getItem('todolist');
	        if (data !== null) {
	            return JSON.parse(data);
	        } else {
	            return [];
	        }
	    }
	    //保存本地存储数据
	    function saveDate(data) {
	        localStorage.setItem('todolist', JSON.stringify(data));
	    }
	    //渲染加载数据
	    function load() {
	        var data = getDate();
	        // console.log(data);
	        $("ol,ul").empty();
	        var todoCount = 0;
	        var doneConunt = 0;
	        $.each(data, function (i, n) {
	            // console.log(n);
	            if (n.done) {
	                $("ul").prepend("<li><input type='checkbox' checked='checked' id='button'><p>" + n.title +
	                    "</p> <a href='javascript: ;' id=" + i + "></a></li>");
	                doneConunt++;
	            } else {
	                $('ol').prepend("<li><input type='checkbox' id='button'> <p>" + n.title +
	                    "</p> <a href='javascript: ;' id=" + i + "></a></li>")
	                todoCount++;
	            }
	        });
	        $("#todocount").text(todoCount);
	        $("#span1").text(doneConunt);
	    }
	})
</script>

!!!注意引入jQuery.js文件