备忘录HTML

zsq10345

于 2023-06-15 18:02:39 发布

阅读量221

点赞数

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

本文链接：https://blog.csdn.net/zsq10345/article/details/131233317

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="todo.css">
    <script src="todo.js"></script>
</head>
<body>
    <div class="container">
        <div class="header">
            <div class="left-header">
                <h1>我的一天</h1>
                <div class="myday">五月 17日星期日</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="添加任务" class="in">
        </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-empty.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-empty.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-empty.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-empty.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-empty.png" alt="">
            </div>
        </div>
    </div>
</body>
</html>

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

.todo-icon {
    width: 20px;  
}

.star-icon {
    width: 20px;  
}

.container {
    width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 25px;
    align-items: center;
}

.left-header h1 {
    margin-top: 0px;
    margin-bottom: 2px;
    font-size: 25px;
}

body {
    color: #444;
}
.left-header .myday {
    font-size: 14px;
    color: #979797;
}

.new-task {
    display: flex;
    border-bottom: 1px solid rgb(214, 211, 211);
    padding-bottom: 8px;
}

.new-task input {
    border: none;
    outline: none;
    width: 350px;
}
.todo-item {
    display: flex;
    border-bottom: 1px solid rgb(214, 211, 211);
    padding-bottom: 6px;
    padding-top: 6px;
}

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

.todo-item-icon {
    display: flex;
    align-items: center;
    margin-left: 4px;
}

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

.todo-text {
    font-size: 15px;
}

.todo-type {
    font-size: 13px;
    color: #979797;
}
.in {
    font-size: 15px;
    color: #979797;
}

.todo-template {
    display: none;
}

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 todoItemIcons = document.querySelectorAll('.todo-item .todo-icon');
    todoItemIcons.forEach(function(todoItemIcon) {
        todoItemIcon.onclick = function(event) {
            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)
        }
    });

	
		let scj=document.querySelectorAll('.star-icon');
	scj.forEach(function(scjclick){

	let result=0;
		if (result==0){
			scjclick.onclick=function(event){
			scjclick.setAttribute('src','star.png');
			result=1;
		}}else{
			scjclick.onclick=function(event){
			scjclick.setAttribute('src','star-empty.png');
			result=0;	
		}	
		}
	
	});

	
    
}