js练习-待办事项列表

最新推荐文章于 2023-12-07 16:21:44 发布

星辰落海

最新推荐文章于 2023-12-07 16:21:44 发布

阅读量1.5k

点赞数

分类专栏： js 前端文章标签： js css

本文链接：https://blog.csdn.net/weixin_45596380/article/details/106005654

版权

js 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

前端

3 篇文章 0 订阅

订阅专栏

知识点
document.createElement();
方法通过指定名称创建一个元素

document.createTextNode();
可创建文本节点

appendChild();
方法可向节点的子节点列表的末尾添加新的子节点。

parentElement();
查找父元素

addEventListener() 方法用于向指定元素添加事件句柄。
语法：element.addEventListener(event, function, useCapture)；
event：必须，指定事件名称；
function:必须，指定执行的函数;
useCapture:可选，布尔值，指定事件是否在捕获或冒泡阶段执行。
true：事件句柄在捕获阶段执行
false:默认，事件句柄在冒泡阶段执行

target 事件属性
target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。

classList
classList 属性返回元素的类名，作为 DOMTokenList 对象。
该属性用于在元素中添加，移除及切换 CSS 类。
classList 属性是只读的，但你可以使用 add() 和 remove() 方法修改它。

toggle
在元素中切换类名。
第一个参数为要在元素中移除的类名，并返回 false。
如果该类名不存在则会在元素中添加类名，并返回 true。
第二个是可选参数，是个布尔值用于设置元素是否强制添加或移除类，不管该类名是否存在。

代码部分如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实现待办事项列表</title>
    <link rel="stylesheet" href="../css/实现待办事项列表.css">
</head>
<body>
<div class="header">
    <h1  class="h1">My To Do List</h1>
    <input type="text" id="myInput" placeholder="添加...">
    <span class="addBtn">添加</span>
</div>
<ul id="myUL">
</ul>
<script src="../js/实现待办事项列表.js">
</script>
</body>
</html>

*{
    box-sizing: border-box;
}
body{
    padding:0;
    margin:0;
}
.header{
    width:100%;
    text-align: center;
    padding:20px 50px;
    background:#f44336;
    color: #ffffff;
}
#myInput{
    width:800px;
    font-size: 40px;
    border: 1px solid #555555;
    color: #00adad;
    font-family:宋体;
}
.addBtn{
    font-size: 40px;
    display: inline-block;
    width:200px;
    background:gray;
    border-radius: 10px;
    cursor: pointer;
}
.addBtn:hover{
    background-color: #999999;
}
#myUL{
    width:100%;
    padding:0;
    margin: 0;
}
#myUL li{
    position: relative;
    cursor: pointer;
    margin:0;
    list-style: none;
    width:100%;
    height:90px;
    background:pink;
    padding:5px 5px 5px 300px;
    font-size: 40px;
    line-height:90px;
    transition: 0.2s;
    user-select: none;
}
#myUL li:nth-child(odd){
    background: #f9f9f9;
}
#myUL li:hover{
    background-color: gray;
    color: #ffffff;

}
.close{
    position: absolute;
    right:0;
    top:0;
    padding:0 30px;
}
.close:hover{
    background-color: #f44336;
}
.checked{
    background-color: gray;
    color:#000;
    text-decoration:line-through;
}

window.onload=function () {
    //添加删除键
    var  myli=document.getElementsByTagName("li");
    for(var i=0;i<myli.length;i++){
        var span=document.createElement("span");
        var txt=document.createTextNode("\u00D7");
        span.className="close";
        span.appendChild(txt);
        myli[i].appendChild(span);
    }
    //清除功能
    var close=document.getElementsByClassName("close");
    for(var i=0;i<close.length;i++){
        close[i].onclick=function () {
        var div=this.parentElement;
        div.style.display="none";
    }
    }
    var list=document.querySelector("ul");
    list.addEventListener("click",function (ev) {
        if(ev.target.tagName==="LI"){
            ev.target.classList.toggle("checked")
        }
    },false);
    //添加功能
    var add=document.getElementsByClassName("addBtn")[0];
    add.onclick=function () {
    var ul=document.getElementById("myUL");
    var li=document.createElement("li");
    var inputvalue =document.getElementById("myInput").value;
    var t=document.createTextNode(inputvalue);
    li.appendChild(t);
    if(inputvalue==""){
        alert("请输入要添加的事项");
    }else {
        ul.appendChild(li);
    }
    document.getElementById("myInput").value="";
    var span=document.createElement("span");
    var txt=document.createTextNode("\u00D7");
        span.className="close";
    span.appendChild(txt);
    li.appendChild(span);
    for(var i=0;i<close.length;i++){
        close[i].onclick=function () {
            var div=this.parentElement;
            div.style.display="none";
        }
    }
    }
}

星辰落海

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js练习-待办事项列表

知识点document.createElement();方法通过指定名称创建一个元素document.createTextNode();可创建文本节点appendChild();方法可向节点的子节点列表的末尾添加新的子节点。parentElement();查找父元素addEventListener() 方法用于向指定元素添加事件句柄。语法：element.addEventListener(event, function, useCapture)；event：必须，指定事件名称；fun
复制链接

扫一扫

专栏目录