• html + css + js 基础

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

    result :

     html 

    1. <html>
    2.  
    3. <head>
    4.     <style>
    5.         * {
    6.             margin: 0;
    7.             padding: 0;
    8.             list-style: none;
    9.             outline: none;
    10.         }
    11.  
    12.         .action {
    13.             display: flex;
    14.         }
    15.  
    16.  
    17.         input {
    18.             flex: 1;
    19.             width: 300px;
    20.             height: 50px;
    21.         }
    22.  
    23.         button {
    24.             background-color: orange;
    25.             color: white;
    26.             width: 100px;
    27.             height: 50px;
    28.         }
    29.  
    30.         .item {
    31.             height: 50px;
    32.             list-style: none;
    33.             border: 1px solid #acc;
    34.             margin-top: 20px;
    35.             line-height: 50px;
    36.             padding-left: 20px;
    37.             border-left: 5px solid orange;
    38.         }
    39.  
    40.         .wrapper {
    41.             width: 500px;
    42.             margin: 50px auto 50px auto;
    43.         }
    44.     style>
    45. head>
    46.  
    47. <body>
    48.     <div class="wrapper">
    49.         <div class="action">
    50.             <input type="text">
    51.             <button>添加button>
    52.         div>
    53.         <ul>
    54.         ul>
    55.     div>
    56.  
    57.     <script>
    58.  
    59.         var inputElement = document.querySelector('input');
    60.         var ulElement = document.querySelector('ul');
    61.         var btnElement = document.querySelector('button');
    62.  
    63.         var todos = JSON.parse(localStorage.getItem('todolist')) || [];
    64.  
    65.         todos.forEach(function (value) {
    66.             var liElement = document.createElement('li');
    67.             liElement.className = 'item';
    68.             liElement.innerText = value;
    69.             ulElement.appendChild(liElement);
    70.         })
    71.  
    72.  
    73.  
    74.         // add event
    75.         function addItem() {
    76.             var liElement = document.createElement('li');
    77.             liElement.className = 'item';
    78.             liElement.innerText = inputElement.value;
    79.  
    80.             ulElement.appendChild(liElement);
    81.             todos.push(inputElement.value);
    82.             // console.log(todos);
    83.  
    84.             localStorage.setItem('todolist', JSON.stringify(todos));
    85.  
    86.         }
    87.  
    88.         // del event 
    89.         function deleteItem(event) {
    90.             if (event.target.tagName === 'LI') {
    91.                 event.target.remove();
    92.             }
    93.  
    94.             todos.forEach(function (value, index) {
    95.                 if (value === event.target.innerText) {
    96.                     todos.splice(index, 1);
    97.                 }
    98.             })
    99.  
    100.             // console.log(todos);
    101.  
    102.             localStorage.setItem('todolist', JSON.stringify(todos));
    103.  
    104.         }
    105.  
    106.         btnElement.addEventListener('click', addItem);
    107.         ulElement.addEventListener('click', deleteItem);
    108.  
    109.  
    110.  
    111.     script>
    112.  
    113. body>
    114.  
    115. html>

  • 相关阅读:
    【前端知识】Three 学习日志（九）—— 阵列立方体和相机适配体验
    微服务保护
    Spring事务实现原理和工作原理
    Seata介绍
    scrapy--豆瓣top250--中间件
    人工智能在无人驾驶领域有哪些方面的运用和应用
    Java基础教学 日期类Api导学
    聊聊如何让办公网络直连Kubernetes集群PodIP/ClusterIP/Service DNS等
    JVM之Class文件分析详解
    ARK：《BIG IDEAS 2024》
  • 原文地址：https://blog.csdn.net/sinat_15355869/article/details/126343014