名单管理js

 

目录

前言

一、效果图

二、后台代码讲解

判断用户是否可以进后台

删除功能

添加功能

三、源代码

所以代码图片已经放在我的博客里面https://download.csdn.net/download/qq_45048536/85060512

总结

---

前言

麻雀虽小但五脏俱全,今天给大家到来一个非常简单js小案例,非常适合刚刚学完js的新手做。

也是我大一的期末考试也是取得了优秀的成绩。

使用了也是最简单的DOM和BOM

一、效果图

流程图

登陆 

判断身份 如果不讲导航栏拉到最后判断无法进入

 进入后台进行操作

二、后台代码讲解

1. 判断用户是否可以进后台

     逻辑:我们可以通够下拉框是否到底最下面判断: 元素的高度 - 网页被卷去的高 ==网页可见区域高 代表用户已经把导航栏拉到了最下面。

当导航栏被拉到了最下面 我们便可以改按钮的属性。

function readAgree() {
    // readAgree 阅读同意判断
    var readExplain = document.getElementById('readExplain');
    var read = document.getElementById('read');
    var consentBox = document.getElementById('consentBox');
    var consentBtn = document.getElementById('consentBtn');
    var addInformation = document.getElementById('addInformation');
    //检查阅读同意的导航是不是在最下面 判断用户是否完成阅读
    read.onscroll = function () {
        var scroll = read.scrollHeight - read.scrollTop == read.clientHeight;
        if (scroll) {
            consentBox.disabled = false;
            consentBtn.style.backgroundColor = '#f66bab';
            consentBtn.disabled = false;
        }
    }
    // 当阅读成功 将遮挡页面隐藏
    consentBtn.onclick = function () {
        if (consentBox.checked) {
            readExplain.style.display = 'none';
            addInformation.style.display = 'block';
        }
    }

}
readAgree()

1. 删除功能

逻辑:获取找到元素 然后进行操作 使用prompt方法来进行密码判断 事件函数的return 取消浏览器默认行为。

//删除
function delA() {
    var main = document.getElementById('main');
    var a = main.getElementsByTagName('a');
    for (var i = 0; i < a.length; i++) {
        a[i].onclick = function () {
            var tr = this.parentNode.parentNode;
            var td = tr.getElementsByTagName('td');
            //用来判断密码是否正确
            if (prompt('请输入密码') == 'wzksghh') {
                if (confirm('删除' + td[0].innerHTML)) {
                    tr.parentNode.removeChild(tr);
                }
            } else {
                alert('密码是:wzksghh');
            }
            return false;
        }
    }
}
delA();

1. 添加功能

逻辑:一定要把var写在里面 转成全新的元素 这也是最基本的BOM查找添加了。

// 创建名单
function listAdd() {
    var add = document.getElementById('add')
    add.onclick = function () {
        var tr = document.createElement('tr');
        var nameTd = document.createElement('td');
        var classTd = document.createElement('td');
        var idTd = document.createElement('td');
        var faceTd = document.createElement('td');
        var sexTd = document.createElement('td');
        var aTd = document.createElement('td');
        var a = document.createElement('a');

        var tbody = document.getElementsByTagName('tbody')[0];
        var name = document.getElementById('name');
        var class1 = document.getElementById('class1');
        var id = document.getElementById('id');
        var sex = document.getElementById('sex');
        var face = document.getElementById('face');
        tbody.appendChild(tr);
        tr.appendChild(nameTd);
        tr.appendChild(classTd);
        tr.appendChild(idTd);
        tr.appendChild(sexTd);
        tr.appendChild(faceTd);
        tr.appendChild(aTd);
        aTd.appendChild(a);
        nameTd.innerHTML = name.value;
        classTd.innerHTML = class1.value;
        idTd.innerHTML = id.value;
        sexTd.innerHTML = sex.value;
        faceTd.innerHTML = face.value;
        a.innerHTML = '删除';
        a.style.color = 'blue';
        a.style.textDecoration = 'underline';
        a.style.cursor = 'pointer';
        delA();
    }
}
listAdd();

三、源代码

所以代码图片已经放在我的博客里面https://download.csdn.net/download/qq_45048536/85060512

​

---

总结

把这个练习完毕可以很好的提高自己的DOM和BOM的使用,非常简单代码量也不是很多