html5！的简单形式

有没有人会这个样式的html5代码呀！如何实现这个代码呢？我的基础不太好没怎么学这个方向的

img

vue 实现？ 这个是todoliat百度一下就有 vue的入门案例

js 操作dom


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>todoList</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        html,
        body {
            width: 100%;
        }
        
        body {
            padding-top: 150px;
        }
        
        header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 80px;
            line-height: 80px;
            font-size: 36px;
            font-weight: bold;
            text-align: center;
            background-color: #f4f4f4;
        }
        
        li {
            list-style: none;
            width: 100%;
            height: 30px;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-around;
            border: 1px dotted #999
        }
        
        li input {
            width: 5%;
            height: 30px;
        }
        
        li p {
            width: 90%;
            height: 30px;
            line-height: 30px;
            text-indent: 10px;
            text-align: center;
        }
        
        li button {
            width: 10%;
            height: 30px;
            line-height: 30px;
            text-align: center;
            font-size: 30px;
        }
        
        .cons {
            margin: 0 auto;
            width: 60%;
        }
        
        .header {
            width: 100%;
            height: 50px;
            margin: 5px 0;
            font-size: 22px;
            line-height: 50px;
            text-align: center;
            color: teal;
        }
        
        .addRession {
            width: 100%;
            height: 40px;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-items: center;
            background-color: lightgrey;
        }
        
        .addRession span {
            line-height: 35px;
            font-size: 26px;
            font-weight: bold;
            margin-right: 10%;
        }
        
        .addRession input {
            width: 50%;
            height: 30px;
            border-radius: 5%;
            font-size: 22px;
            text-indent: 5px;
        }
        
        .addRession button {
            width: 15%;
            height: 35px;
            line-height: 35px;
            font-size: 20px;
            text-align: center;
            border-radius: 5%;
        }
        
        .ressionList {
            background-color: lightgrey;
        }
        
        .num {
            margin: 0 3px;
            padding: 0 2px;
            background-color: wheat;
            border-radius: 20%;
        }
        
        ul input,
        .addBtn,
        .delBtn:hover {
            cursor: pointer;
        }
        
        .empty input,
        .empty button {
            cursor: not-allowed;
        }
    </style>

</head>

<body>
    <header>todoList</header>
    <div class="cons">
        <div class="addRession">
            <span>添加任务</span>
            <input type="text" class="addBox" placeholder="请输入任务内容..." onkeyup="this.value=this.value.replace(/^ +| +$/g,'')">
            <button class="addBtn">确认添加</button>
        </div>
        <p class="header"><span>未完成任务</span>-<span class="num waitNum">0</span>个</p>
        <ul class="ressionList waitList">

        </ul>
        <p class="header"><span>已完成任务</span>-<span class="num endNum">0</span>个</p>
        <ul class="ressionList endList">

        </ul>
    </div>
    <script>
        function init() {
            initEvent();
            num();
        }

        function initEvent() {
            let dataList = getData();
            if (dataList.length > 0) {
                showList(dataList)
            } else {
                $(".waitList").empty();
                $(".endList").empty();
            }
        }
        // 任务添加
        $(".addBtn").click(function() {
            let addCons = $(".addBox").val();
            if (addCons) {
                let todoList = getData();
                if (todoList.length > 0) {
                    let newRession = {
                        cons: addCons,
                        checked: false
                    };
                    todoList.push(newRession)
                } else {
                    todoList = [{
                        cons: addCons,
                        checked: false
                    }]
                }
                setData(todoList);
                init()
            } else {
                alert("请输入任务内容")
            }
        });
        // 输入框回车
        $(".addBox").keydown(function(e) {
            if (e.keyCode === 13) {
                $(".addBtn").trigger("click");
            }
        });
        // 展示列表
        function showList(dataList) {
            $(".waitList").empty();
            $(".endList").empty();
            $.each(dataList, function(index, item) {
                if (item.checked) {
                    $(".endList").append('<li index="' + (index + 1) + '"><input type="checkbox" checked><p>' + item.cons + '</p><button class="delBtn">×</button></li>');

                } else {
                    $(".waitList").append('<li index="' + (index + 1) + '"><input type="checkbox"><p>' + item.cons + '</p><button class="delBtn">×</button></li>');
                }
            })
        }
        // 改变任务类型
        $("ul").on("click", "input", function() {
                let changeIndex = $(this).parent().attr("index");
                let todoLists = getData();
                let changeList = todoLists[changeIndex - 1];
                console.log(changeList);

                todoLists.splice(changeIndex - 1, 1, {
                    cons: changeList.cons,
                    checked: !changeList.checked
                });
                setData(todoLists);
                init();
            })
            // 删除localStorage
        $("ul").on("click", ".delBtn", function() {
            let delIndex = $(this).parent().attr("index");
            let todoLists = getData();
            todoLists.splice((delIndex - 1), 1);
            setData(todoLists);
            init();
        });
        // 任务数量
        function num() {
            let waitNum = $(".waitList input").length;
            let endNum = $(".endList input").length;
            if (!waitNum) {
                $(".waitList").append('<li class="empty"><input type="checkbox" disabled><p>暂无任务</p><button disabled>×</button></li>');
            }
            if (!endNum) {
                $(".endList").append('<li class="empty"><input type="checkbox" disabled><p>暂无任务</p><button disabled>×</button></li>');
            }
            $(".waitNum").html(waitNum);
            $(".endNum").html(endNum);
        }
        // 获取localStorage
        function getData() {
            let data = localStorage.getItem("data");
            if (data) {
                return JSON.parse(data)
            } else {
                return []
            }
        }
        // 保存至localStorage
        function setData(list) {
            let date = JSON.stringify(list);
            localStorage.setItem("data", date)
        }
        init()
    </script>
</body>

</html>