【前端】js 小项目,todolist 网页

主要是 jQuery,css 部分没难点
【前端】js 小项目,todolist 网页_第1张图片
一共3个文件,html,index.css,index.js
目录结构
【前端】js 小项目,todolist 网页_第2张图片

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>

    <link rel="stylesheet" href="css/index.css">
    <script src="js/jQuery.min.js">script>
    <script src="js/index.js">script>

head>

<body>
    <header>
        <section>
            <label for="title">ToDoListlabel>
            <input type="text" id="title" name="title" placeholder="添加ToDo">
        section>
    header>

    <section>
        <h2>正在进行<span id="todocount" class="todocount">0span>h2>
        <ol id="todolist" class="box">

        ol>

        <h2>已经完成<span id="donecount" class="todocount">0span>h2>
        <ul id="donelist">

        ul>

    section>

    <footer>
        Copyright © 2014 todolist.cn
    footer>
body>

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

li {
    list-style: none;
}

header {
    height: 50px;
    color: white;
    background-color: rgba(47, 47, 47, .98);
}

header section {
    width: 600px;
    margin: auto;
}

header label {
    width: 100px;
    height: 50px;
    line-height: 50px;
    font-size: 24px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #DDD;
    display: inline-block;
}

header input {
    width: 60%;
    height: 24px;
    float: right;
    margin-top: 12px;
    text-indent: 10px;
    border-radius: 5px;
    border: none;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.24), 0 1px 6px inset rgba(0, 0, 0, .45);
    outline: none;
}

section {
    width: 600px;
    padding: 0 10px;
    margin: 0 auto;
}

section h2 {
    position: relative;
}

span.todocount {
    height: 20px;
    color: #666;
    background-color: #E6E6FA;
    position: absolute;
    line-height: 22px;
    top: 2px;
    right: 5px;
    border-radius: 20px;
    display: inline-block;
    text-align: center;
    padding: 0 5px;
    font-size: 14px;
}

footer {
    font-size: 14px;
    color: #666;
    text-align: center;
}

ol,
ul {
    padding: 0;
}

section li {
    height: 32px;
    line-height: 32px;
    background-color: #fff;
    margin-top: 10px;
    padding: 0 45px;
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .07);
    position: relative;
}

li input {
    width: 22px;
    height: 22px;
    position: absolute;
    top: 2px;
    left: 10px;
}

li a {
    width: 14px;
    height: 12px;
    position: absolute;
    top: 2px;
    right: 5px;
    border-radius: 14px;
    border: 6px double #fff;
    display: inline-block;
    background-color: #ccc;
}

ol#todolist li {
    border-left: 5px solid #629A9C;
}

ul#donelist li {
    opacity: 0.5;
    border-left: 5px solid #999;
}
$(function() {
    // 文本框部分
    $("input#title").on('keydown', function(event) {
        if (event.key == "Enter") {
            if ($(this).val() == "") {
                alert("请输入您要的操作");
            } else {
                // 调用 localStorage
                var data = getDate();
                data.push({ "title": $(this).val(), "done": false });
                saveDate(data);
                $(this).val("");
                load();
            }
        }
    })

    // 删除操作
    $("ol, ul").on("click", "a", function() {
        // 获取 index
        var index = $(this).prop("id");
        // 删除
        var data = getDate();
        data.splice(index, 1);
        saveDate(data);
        load();
    })

    // 点击 checkbox 修改事项状态
    $("ol, ul").on("click", "input", function() {
        // index
        var index = $(this).siblings("a").prop("id");
        var data = getDate();
        data[index]["done"] = !data[index]["done"];
        saveDate(data);
        load();
    })

    load();

    // 获取 localStorage
    function getDate() {
        var data = window.localStorage.getItem("todo");
        if (data == null) {
            return [];
        }
        return JSON.parse(data);
    }

    // 保存 localStorage
    function saveDate(obj) {
        var data = window.localStorage.setItem("todo", JSON.stringify(obj));
    }

    // 加载
    function load() {
        // 先把原来的数据清空
        $("ol#todolist").html("");
        $("ul#donelist").html("");
        var data = getDate();
        var count = 0,
            done = 0,
            nodone = 0;
        $.each(data, function(index, obj) {
            var li = $('
  • ' + obj.title + '

  • '
    ); if (!obj.done) { $("ol#todolist").prepend(li); nodone++; } else { li.find("input").prop("checked", "checked"); $("ul#donelist").prepend(li); done++; } }) // 设置数量 $("span#todocount").html(nodone); $("span#donecount").html(done); } })

    你可能感兴趣的:(前端,前端,javascript,css)