原生留言板案例

最新推荐文章于 2024-08-30 20:29:15 发布

Seven 遇见

最新推荐文章于 2024-08-30 20:29:15 发布

阅读量72

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/m0_67301837/article/details/127719760

版权

布局（有问题就把图片的路径换一下）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .message {
            width: 1000px;
            margin: 0px auto;
            background-color: #eee;
            padding: 20px 10px;
        }

        .face-active {
            border: 5px solid red;
        }
    </style>
</head>

<body>
    <div class="message" id="message">
        <!-- <form> -->
            <!-- 标题 -->
            <h2>添加员工信息</h2>
            <!-- 信息 -->
            <p>
                <label for="uname">姓名：</label>
                <input type="text" name="uname" id="uname" placeholder="请输入姓名">
            </p>
            <p class="face">
                个人头像：
                <img src="images/face.gif" alt="" class="face-active">
                <img src="images/face3.gif" alt="">
                <img src="images/face5.gif" alt="">
                <img src="images/face7.gif" alt="">
            </p>
            <p id="usex">
                <label for="">性别：</label>
                <input type="radio" name="usex" class="usex" value="1" checked>男
                <input type="radio" name="usex" class="usex" value="0">女
                <input type="radio" name="usex" class="usex" value="0.5">人妖
            </p>
            <p id='uhobby'>
                <label for="">兴趣：</label>
                <input type="checkbox" name="uhobby" value="吃" checked>吃
                <input type="checkbox" name="uhobby" value="喝">喝
                <input type="checkbox" name="uhobby" value="玩" checked>玩
                <input type="checkbox" name="uhobby" value="乐">乐
            </p>
            <p>
                <label for="">身份证号：</label>
                <input type="text" name="idCard" id="idCard" placeholder="请输入身份证号" maxlength="18">
            </p>
            <p>
                简介：
                <textarea name="introduce" id="txtarea" cols="40" rows="5" maxlength="20"></textarea>
                <strong> 还剩<i id="leftNum">20</i>个字</strong>
            </p>
            <p>
                <button id="doSubmit">提交数据</button>
                <button id="delSelected">删除所选</button>
                <button id="delAll">全部删除</button>
            </p>
        <!-- </form> -->
        <!-- 展示员工信息 -->
        <table border="1" cellspacing="0" cellpadding="5" width="1000">
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" name="" id="selectAll">
                        全选
                    </th>
                    <th>编号</th>
                    <th>头像</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>兴趣</th>
                    <th>身份证号码</th>
                    <th>个人简介</th>
                    <th>提交时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type="checkbox" name="" id=""></td>
                    <td>10001</td>
                    <td>
                        <img src="images/face.gif" alt="">
                    </td>
                    <td>马晨晨</td>
                    <td>非公</td>
                    <td>好男</td>
                    <td>1111111111111111111</td>
                    <td>除了丑，哥们一无所有！。。。</td>
                    <td>2021-06-21 15:33:01</td>
                    <td>
                        <a href="#">删除</a> 
                    </td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="" id=""></td>
                    <td>10001</td>
                    <td>
                        <img src="images/face.gif" alt="">
                    </td>
                    <td>马晨晨</td>
                    <td>非公</td>
                    <td>好男</td>
                    <td>1111111111111111111</td>
                    <td>除了丑，哥们一无所有！。。。</td>
                    <td>2021-06-21 15:33:01</td>
                    <td>
                        <a href="#">删除</a> 
                    </td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="" id=""></td>
                    <td>10001</td>
                    <td>
                        <img src="images/face.gif" alt="">
                    </td>
                    <td>马晨晨</td>
                    <td>非公</td>
                    <td>好男</td>
                    <td>1111111111111111111</td>
                    <td>除了丑，哥们一无所有！。。。</td>
                    <td>2021-06-21 15:33:01</td>
                    <td>
                        <a href="#">删除</a> 
                    </td>
                </tr>


                
            </tbody>
            <tfoot>
                <tr>
                    <th colspan="10">
                        目前 <strong id="sum">10</strong>条数据
                    </th>
                </tr>
            </tfoot>
        </table>
    </div>


</body>
<script src="js/index.js"></script>

</html>

js操作

/* 
    先哪个功能?先做简单==>哪些简单?==高亮简单?==>1个事件影响1个元素
                事件数        影响元素的个数
                 1               1
                 1              多
                 多个            1   计数功能---封装函数

                 多个           多个元素--多-->1(下标)-->多
        图片高亮 1个点击 改变 2个图片元素
*/
var oMsg = document.querySelector('#message');
var aImg = oMsg.querySelectorAll('.face>img');
var oTxta = oMsg.querySelector('#txtarea');
var oDelAll = oMsg.querySelector('#delAll');
var oTbody = oMsg.querySelector('table>tbody');
var oSelAll = oMsg.querySelector('#selectAll');
var oDelSel = oMsg.querySelector('#delSelected');
var oDoSubmit = oMsg.querySelector('#doSubmit');
var num = 10000;//用于保存最新编号
var selectedFace = "images/face.gif";//用于保存用户选中头像地址
var oIdCard = oMsg.querySelector('#idCard');
var left = oMsg.querySelector('#leftNum');
var oSum = oMsg.querySelector('#sum');

//多个事件 影响 1个元素（封装函数）
//功能8：计数功能
/* 
    影响计数功能的因素：页面加载完成/发布/单删/全删/选删
    封装函数：函数三要素：
        作用：计算tbody中tr的数量，并且更新oSum的内容
        参数：无
        返回值：无
*/
function getTrNum() {
    //计算tbody中tr的数量
    var num = oMsg.querySelectorAll('tbody>tr').length;
    //更新oSum的内容
    oSum.innerHTML = num;
}
//页面加载完成，计算
getTrNum()

//功能9：反选功能
/* 
    业务逻辑：当于点击tbody中复选框，当tbody中复选框的数量 和 tbody中被选中的复选框的数量 一致 的时候，thead中全选按钮被选中，
                否则不被选中
    所有动态添加的元素，绑定事件，都需要使用事件委派
*/
// oTbody.addEventListener('click', function (ev) {
//     var target = ev.target;
//     if (target.nodeName.toLowerCase() == 'input') {
//         //1.计算tbody中复选框的数量
//         var checkNum = oTbody.children.length
//         //2.计算tbody中被选中的复选框的数量
//         var checkedNum = oTbody.querySelectorAll(":checked").length;
//         // console.log(checkNum, checkedNum)
//         if(checkNum == checkedNum){
//             //全选按钮被选中
//             oSelAll.checked = true;
//         }else{
//             //全选按钮取消被选中
//             oSelAll.checked = false;
//         }
//     }
// })

//1个事件 影响 多个元素
//功能6:发布
oDoSubmit.onclick = function () {
    //1.获取用户输入的信息
    //1.1编号自增
    num++;
    //1.2获取用户名
    var uname = oMsg.querySelector('#uname')
    var nameVal = uname.value.trim();

    //非空判断
    if (!nameVal.length) {
        alert("姓名不能为空，请输入姓名");
        return false;//禁止代码继续往下执行
    }

    //1.3获取单选值
    var usex = oMsg.querySelector("#usex>:checked").value;
    usex = usex == "1" ? "男"
        : usex == "0" ? "女"
            : "人妖";

    //1.4获取多选框值
    var aHobby = oMsg.querySelectorAll('#uhobby>:checked');
    var sHobby = "";
    for (var i = 0, len = aHobby.length; i < len; i++) {
        sHobby += aHobby[i].value + " "
    }

    //1.5获取加密后的身份证
    //1.5.1获取用户输入的身份证号
    var idCard = oIdCard.value.trim();

    //非空判断
    if (!idCard.length) {
        alert("身份证号不能为空，请输入身份证号");
        return false;//禁止代码继续往下执行
    }

    //长度非18位提示
    if (idCard.length !== 18) {
        alert('身份证号只能是18位，请输入身份证号')
        return false;//禁止代码继续往下执行
    }

    // 需求：4）列表中的身份证号码后四位使用＊＊＊＊代替(20分)
    //1234567890 12345678 ==》1234567890 1234****
    //字符串截取
    // var idVal = idCard.slice(0,14) + "****"

    //3）需求：身份证号码倒数第二位使用＊代替(20分)
    //1234567890123456 * 8
    //方式一：将身份证号看成三部分：前16位、*、最后一位
    var idVal = idCard.substr(0, 16) + "*" + idCard[17]
    //方式二：转数组


    //1.6获取简介
    var intrVal = oTxta.value.trim();

    //非空判断
    if (!intrVal.length) {
        alert("简介不能为空，请输入简介");
        return false;//禁止代码继续往下执行
    }

    //2.字符串拼接tr
    var sTr = `
                <tr>
                    <td><input type="checkbox" name="" id=""></td>
                    <td>${num}</td>
                    <td>
                        <img src="${selectedFace}" alt="">
                    </td>
                    <td>${nameVal}</td>
                    <td>${usex}</td>
                    <td>${sHobby}</td>
                    <td>${idVal}</td>
                    <td>${intrVal}</td>
                    <td>${new Date().toLocaleString()}</td>
                    <td>
                        <a href="#">删除</a> 
                    </td>
                </tr>
    `

    //3.tbody内部前插(追加)
    oTbody.innerHTML = sTr + oTbody.innerHTML;
    // oTbody.insertAdjacentHTML("afterbegin",sTr)
    //#region 
    /*     var oTr = document.createElement('tr');
        oTr.innerHTML = `
                        <td><input type="checkbox" name="" id=""></td>
                        <td>10002</td>
                        <td>
                            <img src="images/face.gif" alt="">
                        </td>
                        <td>马晨晨</td>
                        <td>非公</td>
                        <td>好男</td>
                        <td>1111111111111111111</td>
                        <td>除了丑，哥们一无所有！。。。</td>
                        <td>2021-06-21 15:33:01</td>
                        <td>
                            <a href="#">删除</a> 
                        </td>
                    `
    
        oTbody.insertBefore(oTr,oTbody.children[0]) */
    //#endregion

    //4.清空输入框
    uname.value = "";
    oIdCard.value = "";
    oTxta.value = "";
    //5.初始化剩余字数
    var maxlen = oTxta.maxLength;
    left.innerHTML = maxlen;

    //6.计算条数
    getTrNum()
}

//功能5:全选/全不选
/* 获取thead中复选框的checked属性值,将获取的值赋给tbody中所有复选框 */
oSelAll.onchange = function () {
    //1.获取thead中复选框的checked属性值
    // var checked = this.checked;
    //将获取的值赋给tbody中所有复选框
    //2.通过属性选择器,获取tbody中所有的复选框
    var aTbodychkbox = oTbody.querySelectorAll('[type="checkbox"]')
    for (var i = 0, len = aTbodychkbox.length; i < len; i++) {
        aTbodychkbox[i].checked = this.checked
    }
}

//功能7:删除所选
oDelSel.onclick = function () {
    //1.通过伪类选择器,获取tbody中被选中的复选框
    var aTbChecked = oTbody.querySelectorAll(':checked');
    //2.获取到所有被选中复选框所在的tr,并删除
    for (var i = 0, len = aTbChecked.length; i < len; i++) {
        aTbChecked[i].parentElement.parentElement.remove()
    }

    //6.计算条数
    getTrNum()
}

//  1个事件影响1个元素
//功能1:点击图片,切换高亮
for (var i = 0, len = aImg.length; i < len; i++) {
    aImg[i].onclick = function () {
        //排他
        var activeImg = oMsg.querySelector('.face-active');
        activeImg.classList.remove('face-active');

        //让当前被点击的图片高亮--添加类名face-active
        this.classList.add('face-active');
        //保存用户选中的头像地址
        selectedFace = this.getAttribute('src');
    }
}

//功能2:键盘抬起,计算剩余字数
oTxta.onkeyup = function () {
    //3.1获取用户输入内容的长度
    var uNum = this.value.trim().length;
    //3.2最大允许输入长度
    // var maxlen = this.getAttribute('maxLength') - 0;
    var maxlen = this.maxLength - 0;
    //3.3求1和2的差值
    var diff = (maxlen - uNum) < 0 ? 0 : (maxlen - uNum)

    //3.4更新剩余字数
    left.innerHTML = diff
}

//功能3:全删
oDelAll.onclick = function () {
    oTbody.innerHTML = ""
    // oTbody.children.remove();
    // oTbody.removeChild(oTbody.children)
    //6.计算条数
    getTrNum()
}

//功能4:单删---事件委派
//功能9：反选功能
oTbody.addEventListener('click', function (ev) {
    //获取触发事件的元素
    var target = ev.target;
    
    //单删功能
    //只有点击a标签时,才能删除所在的tr
    if (target.nodeName.toLowerCase() == 'a') {
        target.parentElement.parentElement.remove()

        //6.计算条数
        getTrNum()
    }

    //反选功能
    if (target.nodeName.toLowerCase() == 'input') {
        //1.计算tbody中复选框的数量
        var checkNum = oTbody.children.length
        //2.计算tbody中被选中的复选框的数量
        var checkedNum = oTbody.querySelectorAll(":checked").length;
        // console.log(checkNum, checkedNum)
        if(checkNum == checkedNum){
            //全选按钮被选中
            oSelAll.checked = true;
        }else{
            //全选按钮取消被选中
            oSelAll.checked = false;
        }
    }
})