宝宝辅食大全2

captainfly_

已于 2023-06-16 12:59:54 修改

阅读量233

点赞数

文章标签：数学建模 java 算法

于 2023-06-13 00:00:18 首次发布

本文链接：https://blog.csdn.net/captainfly_/article/details/131179187

版权

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="todo.css">
    <script src="js.js"></script>
</head>
<body>
    <div class="container">
        <div class="header">
            <div class="left-header">
                <h1>我的一天</h1>
                <div class="myday">6月12日 星期一</div>
            </div>
            <div class="right-header">
                <span>今天</span>
            </div>
        </div>
        <div class="new-task">
            <img class="todo-plus-icon" src="plus.png" alt="">
            <input type="text" placeholder="添加任务">
        </div>
        <div class="todo-list">
            <div class="todo-item">
                <div class="todo-item-icon">
                    <img class="todo-icon" src="circle.png" alt="">
                </div>
                <div class="todo-content">
                    <div class="todo-text">放学后去写作业</div>
                    <div class="todo-type">任务</div>
                </div>
                <div class="todo-star-icon">
                     <img class="star-icon" src="star.png" alt="">
                </div>
            </div>
            <div class="todo-item">
                <div class="todo-item-icon">
                <img class="todo-icon" src="circle.png" alt="">
                </div>
                <div class="todo-content">
                    <div class="todo-text">放学后去写作业</div>
                    <div class="todo-type">任务</div>
                </div>
                <div class="todo-star-icon">
                <img class="star-icon" src="star.png" alt="">
                </div>
            </div>
        </div>
        <div class="done-list">
            <div class="todo-item">
                <div class="todo-item-icon">
                <img class="todo-icon" src="circle-done.png" alt="">
                </div>
                <div class="todo-content">
                    <div class="todo-text">放学后去写作业</div>
                    <div class="todo-type">任务</div>
                </div>
                <div class="todo-star-icon">
                <img class="star-icon" src="star.png" alt="">
                </div>
            </div>
    </div>
    </div>
    <div class="todo-template">
        <div class="todo-item">
            <div class="todo-item-icon">
            <img class="todo-icon" src="circle.png" alt="">
            </div>
            <div class="todo-content">
                <div class="todo-text">放学后去写作业</div>
                <div class="todo-type">任务</div>
            </div>
            <div class="todo-star-icon">
            <img class="star-icon" src="star.png" alt="">
            </div>
        </div>
    </div>
</body>
</html>

css

.todo-plus-icon{
    width: 30px;
}
.todo-icon{
    width: 20px;
}
.star-icon{
    width: 20px;
}

.container{
    width: 400px;
    margin-left: auto;
    margin-right: auto;
}
.header{
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}
.left-header h1{
    margin-top: 0px;
    margin-bottom: 0px;
    font-size: 30px;
}
.left-header .myday
{
    font-size: small;

}
.header{
    display: flex;
    align-items: center;
}
body{
    color: #444;
}
.new-task{
    display: flex;
    border-bottom: 1px solid grey;

}
.new-task input{
    border: none;
    outline: none;
    width: 300px;
}
.todo-item{
    display: flex;
    border-bottom: 1px  solid grey;
    padding-top: 6px;
    padding-bottom: 6px;

}
.todo-content{
    flex: 10;
    padding-left: 10px;
}

.todo-item-icon{
    display: flex;
    align-items: center;

}
.todo-star-icon{
     display: flex;
     align-items: center;
}
.todo-text{
    font-size: 18px;

}
.todo-type{
    font-size: 16px;
    color: #444;
}
.todo-template{
    display: none;
}

JavaScript

window.onload = function(){
   let newTaskInput = document.querySelector('.new-task input');
   newTaskInput.onkeydown = function(event){
    if(event.keyCode == 13){
        let newTaskText = newTaskInput.value;
        let template = document.querySelector('.todo-template');
        let newTaskContainer = template.cloneNode(true);
        let newTaskNode = newTaskContainer.querySelector('.todo-item');
        newTaskNode.querySelector('.todo-text').innerText = newTaskText;
        let firstTodo = document.querySelector('.todo-list .todo-item')
        document.querySelector('.todo-list').insertBefore(newTaskNode,firstTodo);
        newTaskInput.value = '';

        let icon = newTaskNode.querySelector('.todo-icon');
        icon.onclick = function(event){
            if(icon.src.includes('done')){
                icon.setAttribute('src','circle.png');
           let todoText = todoItemIcons.parentElement.parentElement.querySelector('.todo-text');
           todoText.style.textDecoration = 'none';
           let firstTodo = document.querySelector('.todo-list .todo-item')
           document.querySelector('.todo-list').insertBefore(icon.parentElement.parentElement,firstTodo);
          
            } else {
           icon.setAttribute('src','circle-done.png');
           let todoText = icon.parentElement.parentElement.querySelector('.todo-text');
           todoText.style.textDecoration = 'line-through';
           document.querySelector('.done-list').appendChild(icon.parentElement.parentElement);
            }
        };
      }
    };
    let todoItemIcons = document.querySelectorAll('.todo-list .todo-icon');
    todoItemIcons.forEach(function(todoItemIcon){
       todoItemIcon.onclick = function(event){
        if(todoItemIcon.src.includes('done')){
            todoItemIcon.setAttribute('src','circle.png');
       let todoText = todoItemIcons.parentElement.parentElement.querySelector('.todo-text');
       todoText.style.textDecoration = 'none';
       let firstTodo = document.querySelector('.todo-list .todo-item')
       document.querySelector('.todo-list').insertBefore(todoItemIcon.parentElement.parentElement,firstTodo);
      
        } else {
        todoItemIcon.setAttribute('src','circle-done.png');
       let todoText = todoItemIcon.parentElement.parentElement.querySelector('.todo-text');
       todoText.style.textDecoration = 'line-through';
       document.querySelector('.done-list').appendChild(todoItemIcon.parentElement.parentElement);
        }
    }
 });
}