526互联

便签页面仿写

发布时间 2023-06-19 08:55:44作者: 香香的泡泡
<style>
    body {
        background-color: #f6f6f6;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        margin: 0;
        padding: 0;
    }

    .container {
        max-width: 600px;
        margin: 20px auto;
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        padding: 20px;
    }

    .header {
        text-align: center;
        margin-bottom: 20px;
        color: #3f51b5;
    }

    .todo-form {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
    }

    .todo-input {
        flex: 1;
        padding: 10px;
        border: none;
        border-radius: 5px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    .todo-button {
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        background-color: #3f51b5;
        color: #fff;
        cursor: pointer;
    }

    .todo-list {
        list-style: none;
        padding: 0;
    }

    .todo-item {
        display: flex;
        align-items: center;
        padding: 10px;
        border-radius: 5px;
        margin-bottom: 10px;
        background-color: #e8e8e8;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    .todo-item:last-child {
        margin-bottom: 0;
    }

    .todo-item-checkbox {
        margin-right: 10px;
    }

    .todo-item-text {
        flex: 1;
        color: #3f51b5;
        font-weight: bold;
    }

    .todo-item-delete {
        padding: 5px 10px;
        border: none;
        border-radius: 5px;
        background-color: #ff6b6b;
        color: #fff;
        cursor: pointer;
        transition: background-color 0.3s;
    }

    .todo-item-delete:hover {
        background-color: #ff4f4f;
    }
</style>
</head>
<body>
<div class="container">
    <h1 class="header">Todo List</h1>
    <form class="todo-form" id="todoForm" action="/">
        <input type="text" class="todo-input" placeholder="Add a new todo" id="todoInput">
            <button type="submit" class="todo-button">Add</button>
        </form>
        <ul class="todo-list" id="todoList">  
        </ul>
    </div>
</html>

</body>
</html>
<script>
    const toDoForm=document.getElementById('todoForm')
    const todoList=document.getElementById('todoList')
    const todoInput=document.getElementById('todoInput')
   
    function creatTodoItem(text){

      const li=document.createElement('li')
      li.className='todo-item'
      li.innerHTML=`
            <input type="checkbox" class="todo-item-checkbox">
            <span class="todo-item-text">${text}</span>
            <button class="todo-item-delete">Delete</button>
            `  
      return li      
    }
    toDoForm.onsubmit=function(event){
        event.preventDefault()//onsubmit事件应该跳转新网页，用这个取消默认跳转
        //console.log(todoInput.value.trim())//trim去掉字符串头的空格
        const todoText=todoInput.value
        if(!todoText)return
        const li=creatTodoItem(todoText.trim())
     /*    const li=creatTodoItem(todoInput.value.trim()) */
        //把生成的li放到ul里面
        todoList.appendChild(li)
        todoInput.value=""
       

    }
    todoList.onclick=function(event){
        if(event.target.className=="todo-item-delete"&& confirm('提示语言：确定删除吗'))
        event.target.parentNode.remove()
    //删除便签框
    }
</script>