js todolist

最新推荐文章于 2024-07-24 11:09:48 发布

shyhsgs

最新推荐文章于 2024-07-24 11:09:48 发布

阅读量125

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_64655972/article/details/127915334

版权

页面代码

<!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>
</head>

<body>
    <div class="container">
        <div class="header">
            <div class="left-header">
                <h1>我的一天</h1>
                <!-- 日期 -->
                <div class="myday">六月28日 星期二</div>
            </div>
            <div class="right-header">
                <span>今天</span>
            </div>
        </div>
        <!-- 新建任务 -->
        <div class="new-task">
            <img class="todo-plus-icon" src="../image/zengjia.png" alt="">
            <input type="text" placeholder="添加任务..">
        </div>
        <!-- 未完成 -->
        <div class="todo-list">
            未完成
            <!-- </div> -->
            <!-- 已完成 -->

        </div>
        <div class="done-list">
            完成
            <!-- 复制模板 -->
            <div class="todo-template">
                <div class="todo-item">
                    <div class="todo-item-icon">
                        <img class="todo-icon" src="../image/weixuanzhongyuanquan.png" alt="">
                    </div>
                    <div class="time">
                        <select name="" id="shijian">
                            <option class="time-opt" value="0">10s</option>
                            <option class="time-opt" value="1">3s</option>
                            <option class="time-opt" value="2">1h</option>
                            <option class="time-opt" value="3">2h</option>
                        </select>
                    </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="../image/star.png" alt="">
                    </div>
                </div>
            </div>
        </div>
</body>

</html>
<link rel="stylesheet" href="todo.css">
<script src="todo.js"></script>

css代码

* {
    padding: 0;
    margin: 0;
}

body {
    color: #444;

}

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

.todo-icon {
    width: 20px;
}

.star-icon {
    width: 20px;
}


.container {
    width: 400px;
    margin: auto;
}

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

.left-header h1 {
    font-size: 25px;
}

.new-task {
    display: flex;
    margin-bottom: 15px;
}

.new-task input {
    width: 300px;
    border: none;
    outline: none;
    margin-left: 10px;
}

.done-list {
    /* border: 1px solid black; */
    margin-top: 20px;
}

.todo-item {
    display: flex;
    border: 1px solid rgb(206, 206, 206);
    padding-top: 6px;
    padding-bottom: 6px;
    margin: 10px 0px;
}

.todo-Wan-item {
    display: flex;
    border-bottom: 1px solid rgb(206, 206, 206);
    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: 14px;
}

.todo-type {
    font-size: 14pxs;
    color: rgb(179, 174, 174);
}

.todo-template {
    display: none;
}

.time {
    position: relative;
    top: 10;
    left: 280px;
}

js代码

window.onload = function () {
    // 时间
    var myday = document.querySelector('.myday');
    myday.innerHTML = getDate();
    function getDate() {
        var date = new Date();
        var year = date.getFullYear()
        var month = date.getMonth() + 1;
        var dates = date.getDate();
        var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
        var day = date.getDay();
        return year + '年' + month + '月' + dates + '日' + arr[day];
    }
    //添加事件
    //获取input
    let input = document.querySelector('.new-task input');
    input.addEventListener('keydown', function (e) {
        if (e.key === 'Enter') {
            let newListText = input.value;
            // console.log(newListText);
            // 模板复制
            let template = document.querySelector('.todo-template .todo-item');
            let todoList = document.querySelector('.todo-list');
            console.log(template);
            let newListNode = template.cloneNode(true);
            // 更换html
            newListNode.querySelector('.todo-text').innerText = newListText;
            //加入列表,第一个子元素前
            document.querySelector('.todo-list').insertBefore(newListNode, todoList.children[0])
            //清空input
            input.value = '';
            //添加事件
            //给图片添加
            let img = newListNode.querySelector('.todo-icon');
            let doneList = document.querySelector('.done-list');
            img.onclick = function (e) {
                if (img.src == template.querySelector('.todo-icon').src) {
                    img.setAttribute('src', '../image/yuanquangouxuan.png')
                    //加线
                    newListNode.querySelector('.todo-text').style.textDecoration = 'line-through';
                    doneList.appendChild(newListNode);
                } else {
                    img.setAttribute('src', '../image/weixuanzhongyuanquan.png')
                    newListNode.querySelector('.todo-text').style.textDecoration = 'none';
                    document.querySelector('.todo-list').insertBefore(newListNode, todoList.children[0])
                }
            }
            //定时
            var dingshi = document.querySelector('#shijian');
            var timeOne = 0;
            var p = true;
            function nao(a) {
                setTimeout(function () {
                    img.setAttribute('src', '../image/yuanquangouxuan.png')
                    //加线
                    newListNode.querySelector('.todo-text').style.textDecoration = 'line-through';
                    doneList.appendChild(newListNode);
                    // alert(1)
                }, a * 1000);
            }
            dingshi.onchange = function () {
                // console.log(1);
                // console.log(typeof dingshi.children[dingshi.value].innerText);
                let time = dingshi.children[dingshi.value].innerText;
                // console.log(time.indexOf('s'));
                if (time.indexOf('s') != -1) {
                    // clearTimeout(nao);
                    let miao = parseInt(time);
                    nao(miao)
                } else {
                    // clearTimeout(nao);
                    let shi = parseInt(time) * 3600;
                    nao(miao)
                }
            }

        }


    })
}