master

分支 (1)

管理

管理

master

js
/
test25.html

<!DOCTYPE html>
<html>
<head>
<title>test25 JavaScript实例-待办事项</title>
<meta charset="UTf-8">
<style>
body {
    margin: 0;
    min-width: 250px;
}

/* 在元素的总宽度和高度中包括填充和边框 */
* {
    box-sizing: border-box;
}

/* 从列表中删除边距和填充 */
ul {
    margin: 0;
    padding: 0;
}

/* 设置ul li 的样式 */
ul li {
    cursor: pointer;
    position: relative;
    padding: 12px 8px 12px 40px;
    background: #eee;
    font-size: 18px;
    transition: 0.2s;

    /* 使列表项不可选择 */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* 将所有奇数列表项设置为不同的颜色（斑马条纹） */
ul li:nth-child(odd) {
    background: #f9f9f9;
}

/* 悬停时背景颜色较深 */
ul li:hover {
    background: #ddd;
}

/* 单击后，添加背景色并显示删除文本效果 */
ul li.checked {
    background: #888;
    color: #fff;
    text-decoration: line-through;
}

/* 单击时添加“选中”标记 */
ul li.checked::before {
    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: 0;
    top: 0;
    padding: 12px 16px 12px 16px;
}

.close:hover {
    background-color: #3652f4;
    color: white;
}

/* 头部样式 */
.header {
    background-color: #3652f4;
    padding: 30px 40px;
    color: white;
    text-align: center;
}

/* 清除标题后的浮动 */
.header:after {
    content: "";
    display: table;
    clear: both;
}

/* 输入框样式 */
input {
    border: none;
    width: 75%;
    padding: 10px;
    float: left;
    font-size: 16px;
}

/* "添加按钮"样式 */
.addBtn {
    padding: 8.5px;
    width: 25%;
    background: #d9d9d9;
    color: #555;
    float: left;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer; /* 光标样式-手指 */
    transition: 0.3s;
}

.addBtn:hover {
    background-color: #bbb;
}
</style>

</head>
<body>
<div id="myDIV" class="header">
    <h2 style="margin:5px">待办事项清单</h2>
    <h2></h2>
    <input type="text" id="myInput" placeholder="请输入您的待办事项">
    <span onclick="newElement()" class="addBtn">新增</span>
</div>

<ul id="myUL">
    <li class="checked">9:00 给XXX回复电话</li>
    <li>10:30 前往XXX见XXX</li>
    <li>11:30 参见公司视频会议</li>
    <li>15:00 前往政务服务中心</li>
</ul>

<script>
//功能需求
//1.单击关闭按钮隐藏当前列表项
var myNodelist = document.getElementsByTagName("LI");
var i;
for (i = 0 ; i < myNodelist.length ; i++){
    //createElement()去创建span元素
    var span = document.createElement("SPAN");
    //包含一个文本内容：×
    var txt = document.createTextNode("\u00D7");
    span.className = "close";
    //将文本内容包含至span标签
    span.appendChild(txt);
    //为所有的li标签添加span元素及其内容
    myNodelist[i].appendChild(span);
}
var close = document.getElementsByClassName("close");
var i;
for(i = 0;i<close.length; i++){
    close[i].onclick = function(){
        var r =confirm('确认删除该事项吗?')
        if(r == true){
            //执行删除功能——先找到父级元素
            var div = this.parentElement;
            //设置其display的属性为none，实现隐藏效果
            div.style.display = "none";
        }
    }
}
//2.单击列表项内容时添加“选中”效果
//querySelector()方法 返回文档中匹配指定的css选择器的一个元素
var list = document.querySelector('ul');
//addEventListener()方法在文档中添加事件监听 参数1：具体的事件，参数2：执行的函数（方法），参数3：默认为false的参数，默认在冒泡执行，如为ture 则为拦截执行
list.addEventListener('click',function(ev){
    //target:事件属性 可返回时间的目标节点 （触发事件的节点）
    //tagName:获取元素的标签名；ev.target.tagName :表示触发事件的节点的名字 ：在这里应该就是li标签的名字，即为li
    if(ev.target.tagName === 'LI'){
        //将对应的元素的CSS类名 进行切换 用当下的类名与目标（checked）进行切换，再次触发时间则往回切换
        ev.target.classList.toggle('checked');
    }
},false);
//3.单击“添加”按钮时创建一个新的列表项
function newElement(){
    //要实现创建新的li元素
    var li = document.createElement("li");
    //获取input输入框里的内容
    var inputValue = document.getElementById("myInput").value;
    //将获取到的内容 包含至 li 元素中
    var t = document.createTextNode(inputValue);
    //对元素及内容进行组合
    li.appendChild(t);
    //判断输入框的内容是否为空
    if(inputValue === ""){
        alert("输入框内容不能为空！")
    }else{
        //将li的内容包含至ul中
        document.getElementById("myUL").appendChild(li);
    }
    //初始化输入框的内容为空
    document.getElementById('myInput').value ="";
    //新增创建一个span元素
    var span = document.createElement("SPAN");
    //为元素添加一个删除符号
    var txt = document.createTextNode("×");
    //令该span元素的类名为close
    span.className = "close";
    //将该span元素包含值li元素中
    span.appendChild(txt);
    li.appendChild(span);

    for(i = 0 ; i<close.length ; i ++){
        close[i].onclick =function(){
            var r =confirm('确认删除该事项吗?')
            if(r == true){
                //执行删除功能——先找到父级元素
                var div = this.parentElement;
                //设置其display的属性为none，实现隐藏效果
                div.style.display = "none";
            }
        }
    }
}


</script>
</body>
</html>