【无标题】利用JS实现简单的todoList（记事本）效果

最新推荐文章于 2023-05-12 20:12:59 发布

JIAY_WX

最新推荐文章于 2023-05-12 20:12:59 发布

阅读量340

点赞数

分类专栏： JavaScript 文章标签： javascript html 前端

本文链接：https://blog.csdn.net/JIAY_WX/article/details/124528293

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

原创

效果

文件结构

代码

HTML

<%@ page language="java" contentType="text/html;charset=UTF-8"%>
<html lang="en"><!--向搜索引擎表示该页面是html语言，且为英文网站，en是英文，zh是中文网站-->
<head>
  <meta charset="UTF-8">
  <title>ToDoList</title>
  <link rel="stylesheet" href="todoList.css">
</head>
<body>
<div class="myhead">
  <h2>My ToDoList</h2>

<table>
  <tr>
    <td>
      <input type="text" id="things" placeholder="请输入待办事项">
    </td>
    <td>
      <span id="add" onclick="addElement()">add</span>
    </td>
  </tr>
</table>
</div>
<ul>
  <li>Hit the gym</li>
  <li class="checked">Pay bills</li>
  <li>Meet George</li>
</ul>

<%--<div class="test2"></div>--%>
<!--将JavaScript元素放在后面，否则在执行JavaScript的时候，dom树还未构建，会出现意想不到的错误-->
</body>
<script src="todoList.js" type="text/javascript"></script>
</html>

CSS

@font-face {
    font-family: 'iconfont';  /* Project id 2680005 */
    src: url('//at.alicdn.com/t/font_2680005_2v81j5og00f.woff2?t=1626424842361') format('woff2'),
    url('//at.alicdn.com/t/font_2680005_2v81j5og00f.woff?t=1626424842361') format('woff'),
    url('//at.alicdn.com/t/font_2680005_2v81j5og00f.ttf?t=1626424842361') format('truetype');
}
body {
    margin: 0;
    padding: 0;
}
*{
    box-sizing: border-box;
}
.myhead{
    background-color: black;
    text-align: center;
    padding: 5px 0px 10px 30px;
    color: #ac177b;
}
table{
    margin: 0 auto;
}
#things{
    width: 180px;
    height: 30px;
    border-radius: 3px;
    outline: none;
    border: solid 1px #ac177b;
}
#add{
    display: inline-block;
    width: 80px;
    height: 30px;
    background-color: gainsboro;
    color: black;
    border-radius: 3px;
    line-height: 30px;
}
#add:hover{
    /*:hover把鼠标放在链接上的状态*/
    cursor: pointer;
    background-color:darkgrey ;
    color: grey;
}
ul{
    margin: 0px;
    padding: 0px;
}
ul li{
    list-style: none;
    /*text-align: center;*/
    position: relative;
    padding-left:40px;
    height: 40px;
    line-height: 40px;
}
ul li:nth-child(odd) {
    background-color: #f9f9f9;
}
ul li:hover{
    cursor: pointer;
    background-color: #dddddd;
}

ul li.check{
    /*选择所有选中的表单元素*/
    background-color: #888888;
    text-decoration: line-through;
    color: #f9f9f9;
}
ul li.check::before{
    /*:before在每个<p>元素之前插入内容*/
    content: '';
    position: absolute;
    border-color: #fff;
    border-style: solid;
    border-width: 0 2px 2px 0;
    top: 10px;
    left: 16px;

    transform: rotate(45deg);
    height: 15px;
    width: 7px;
}
.close{
    position: absolute;
    right: 0px;
    top: 0px;
    padding: 0px 20px;
    font-size: 16px;
}
.close:hover{
    background-color: #f44336;
    color: white;
}

JavaScript

//1.在每个span后面添加close节点
var myNodelist=document.getElementsByTagName("li")//返回带有指定标签名的对象的集合  getElementsByTagName()可以获取任何类型的html元素列表

for (var i=0;i<myNodelist.length;i++)
{
    var span=document.createElement("span");
    /*
    document.createElement(tagName,[options]);
    该方法用创建一个标签名为tagName的指定标签元素。
    参数：
    tagName:指定要创建的元素类型的字符串，再html文档上调用createElement()方法创建元素之前会将tagName转化成小写
    options:一个可选的参数ElementCreationOptions是包含一个属性为is的对象，该对象的值是用customElements.define()方法定义过的一个自定义元素的标签名。

     */

    var txt=document.createTextNode("\u00D7");
    /*
    document.createTextNode("\u00D7");
    创建一个新的文本节点
     */
    span.className="close";
    span.appendChild(txt);
    /*
    .appendChild(node)
    向节点添加最后一个子节点
    参数：node是必须的，希望添加的节点对象
     */
    myNodelist[i].appendChild(span);

}

//2.处理删除事件
var close=document.getElementsByClassName("close")
for (var i=0;i<close.length;i++)
{
    close[i].onclick=function () {
        //parentElement表示返回当前节点的父元素节点
        var div=this.parentElement
        div.style.display="none"
    }
}

//3.处理任务完成事件
var list=document.querySelector("ul")
/*
document.querySelector(selectors);
文档对象模型Document引用的querySelector()方法返回文档中与指定选择器或选择器组匹配的第一个Element对象，如果找不到匹配项则返回null。
selectors:包含一个或多个要匹配的选择器的DOM字符串DOMString。该字符串必须是有效的CSS选择器字符串，如果不是则引发异常。
 */
console.log(list)
list.addEventListener('click',function (ev) {
//event.target属性可以用来实现事件委托，例如将事件绑定在ul上，但是点击li时可以被触发
    //tagName是获取元素的标签名，返回事件的大写标签
    if (ev.target.tagName === 'LI')
    {
        //toggle方法是在元素中切换类名，在被选元素上进行hide（）和show（）之间的切换
        //classList对元素的class继续操作
        ev.target.classList.toggle('check')
    }
},false);

//4.处理点击add按钮，列表中添加一个待办事项

function addElement(){
    var things=document.getElementById('things').value

    // alert(localStorage.setItem("mutodolist",JSON.stringify(things)))

    var li=document.createElement('li')

    var t=document.createTextNode(things)

    if (things == '')
    {
        alert("请输入待办事件")
    }
    else
    {
        list.appendChild(li)
        li.appendChild(t)
    }

    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"
        }
    }
}

JIAY_WX

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【无标题】利用JS实现简单的todoList（记事本）效果

原创效果文件结构代码HTML<%@ page language="java" contentType="text/html;charset=UTF-8"%><html lang="en"><head> <meta charset="UTF-8"> <title>ToDoList</title&gt..
复制链接

扫一扫