html + css + js 基础

一个最简单最简单的备忘录，点击添加新增，点击条目进行删除

result :

html


<html>
 
<head>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            outline: none;
        }
 
        .action {
            display: flex;
        }
 
 
        input {
            flex: 1;
            width: 300px;
            height: 50px;
        }
 
        button {
            background-color: orange;
            color: white;
            width: 100px;
            height: 50px;
        }
 
        .item {
            height: 50px;
            list-style: none;
            border: 1px solid #acc;
            margin-top: 20px;
            line-height: 50px;
            padding-left: 20px;
            border-left: 5px solid orange;
        }
 
        .wrapper {
            width: 500px;
            margin: 50px auto 50px auto;
        }
    style>
head>
 
<body>
    <div class="wrapper">
        <div class="action">
            <input type="text">
            <button>添加button>
        div>
        <ul>
        ul>
    div>
 
    <script>
 
        var inputElement = document.querySelector('input');
        var ulElement = document.querySelector('ul');
        var btnElement = document.querySelector('button');
 
        var todos = JSON.parse(localStorage.getItem('todolist')) || [];
 
        todos.forEach(function (value) {
            var liElement = document.createElement('li');
            liElement.className = 'item';
            liElement.innerText = value;
            ulElement.appendChild(liElement);
        })
 
 
 
        // add event
        function addItem() {
            var liElement = document.createElement('li');
            liElement.className = 'item';
            liElement.innerText = inputElement.value;
 
            ulElement.appendChild(liElement);
            todos.push(inputElement.value);
            // console.log(todos);
 
            localStorage.setItem('todolist', JSON.stringify(todos));
 
        }
 
        // del event 
        function deleteItem(event) {
            if (event.target.tagName === 'LI') {
                event.target.remove();
            }
 
            todos.forEach(function (value, index) {
                if (value === event.target.innerText) {
                    todos.splice(index, 1);
                }
            })
 
            // console.log(todos);
 
            localStorage.setItem('todolist', JSON.stringify(todos));
 
        }
 
        btnElement.addEventListener('click', addItem);
        ulElement.addEventListener('click', deleteItem);
 
 
 
    script>
 
body>
 
html>

相关阅读:
Java毕设项目——大学生社团管理系统(java+SSM+Maven+Mysql+Jsp)
15:00进去，15:08就出来了，问的问题太变态了。
MySQL语法笔记（自用）
怎么把图片转换成表格？这三种办法值得收藏
【节能学院】智能操控装置在高压开关柜的应用
ATFX汇市：美联储宣布维持利率不变，鲍威尔继续发表鹰派言论
【洛谷 P1115】最大子段和题解（贪心算法）
外包做了3个月，技术退步明显。。。。。
好用的vscode插件
计算机系统概论、进制转换部分习题

原文地址：https://blog.csdn.net/sinat_15355869/article/details/126343014