首页>案例集

js小案例:QQ邮箱拖拽删除邮件

QQ邮箱效果图.gif

具体效果点击查看

具体的js代码如下:

<script>
        // 加载数据
        // 拼接字符串 ""  +  ""
        // ES6   模板字符串  ` ${} `
        var oUl = document.querySelector(".emailListUl");
        var oCheckAll = document.querySelector(".emailHead input");
        var oCheckSingle = oUl.getElementsByTagName("input");
        var oLi = oUl.children;
        var oTip = document.querySelector("#hint3");
        var oDelBtn = document.querySelector("#delet");
        var oBeenDel = document.querySelector(".beenDel");

        var oUlHTML = list.map(function (item) {
            return `<li>
                            <input type="checkbox" data-id="${item.id}">
                            <div>
                                <span>${item.caption}</span>
                                <span>${item.time}</span>
                            </div>
                            <p>${item.desc}</p>
                        </li>`
        }).join(" ");
        oUl.innerHTML = oUlHTML;



        // 点击全选
        oCheckAll.onclick = function () {
            [...oCheckSingle].forEach(function (item) {
                item.checked = oCheckAll.checked;
            })
            if (this.checked) {
                [...oLi].forEach(function (item) {
                    item.style.backgroundColor = "#f2f6f9";
                })
            } else {
                [...oLi].forEach(function (item) {
                    item.style.backgroundColor = "";
                })
            }


        };


        // 点击单选
        [...oCheckSingle].forEach(function (item) {
            item.onclick = function (ev) {
                var ev = ev || event;
                var isCheckedAll = [...oCheckSingle].every(function (item) {
                    return item.checked;
                })
                oCheckAll.checked = isCheckedAll ? true : false;
                this.parentNode.style.backgroundColor = this.checked ? "#f2f6f9" : "";
            }
            // 阻止点击单选框的时候出现小提示
            item.onmousedown = function (ev) {
                var ev = ev || event;
                ev.stopPropagation ? ev.stopPropagation() : ev.cancelBubble = true;
            }
        });


        // 点击li,出现tips
        [...oLi].forEach(function (item) {

            item.onmousedown = function (ev) {
                // 判断是否被选中
                var oInputSingle = this.querySelector("input");
                if (!oInputSingle.checked) {
                    return;
                }
                var checkedLen = checkedCount().length;
                var ev = ev || event;
                oTip.style.display = "block";
                oTip.style.left = ev.clientX + 3 + "px";
                oTip.style.top = ev.clientY + 3 + "px";
                oTip.innerText = `选中${checkedLen}封邮件`;

                var isCollision = false;

                document.onmousemove = function (ev) {
                    var ev = ev || event;
                    oTip.style.left = ev.clientX + 3 + "px";
                    oTip.style.top = ev.clientY + 3 + "px";

                    if (collision(oTip, oBeenDel)) {
                        isCollision = true;
                    }

                    ev.preventDefault();
                }
                document.onmouseup = function () {
                    oTip.style.display = "none";
                    document.onmousemove = document.onmouseup = null;
                    if (isCollision) {
                        del();
                    }
                }
            }

        })
        // 点击删除按钮
        oDelBtn.onclick = function () {
            del();
        }

        function checkedCount() {
            var checkedArr = [];
            [...oCheckSingle].forEach(function (item) {
                if (item.checked) {
                    checkedArr.push(item);
                }
            })
            return checkedArr;
        }

        function del(){
var checkedArr=checkedCount();
checkedArr.forEach(function(itemInput){
// 删除li结构
itemInput.parentNode.remove();
// 删除数据
list.forEach(function(item,index){
if(itemInput.dataset.id==item.id){
list.splice(index,1);
}
})
console.log(list);
})


}

</script>

点赞


0
保存到:

相关文章

Top