less -- 总结 01 -(增删改查)

最新推荐文章于 2024-09-30 15:42:36 发布

柿子来了

最新推荐文章于 2024-09-30 15:42:36 发布

阅读量469

点赞数 9

文章标签：前端

本文链接：https://blog.csdn.net/2301_78949452/article/details/141470220

版权

less的使用

// 下载插件 easy-less 
// 新建文件，后缀名是less，会自动生成一个后缀名为css的文件

// 浏览器只认识 html css js
// less css 是一种动态样式语言，属于 css预处理语言的一种，它使用类似 css的语法，为 css的赋予了动态语言的特性，如变量、继承、运算、函数等，更方便css的编写和维护
// less css可以在多种语言、环境中使用，包括浏览器端、桌面客户端、服务端

.box{
    width: 30px;
    height: 30px;
    border: 1px solid red;
}

变量的使用

@width-px:30px;
@main-color:red;
// less让css具有可编程性
.boxFather{
    .box{
        width: @width-px;
        height: @width-px;
        color:@main-color;
        // @main-color:skyblue;
        .boxSon{
            color: @main-color;
        }
    }
}

混合

.box{
    width: 300px;
    height: 200px;
    border: 2px solid red;
}
.main{
    color: skyblue;
    .box()
}

嵌套

nav{
    width: 1200px;
    height: 66px;
    margin: 0 auto;
    ul{
        display: flex;
        list-style: none;
        align-items: center;
        li{
            flex: 1;
            text-align: center;
            height: 66px;
            line-height: 66px;
            border: 1px solid red;
            a{
                text-decoration: none;
                display: block;
                &:hover{
                    background-color: red;
                }
            }
        }
    }
}

导入

// 后面必须要有英文 ; （分号），不然会报错
// ./嵌套 后缀的less可以省略，但css不能省略
@import './嵌套';
@import './混合.css';

使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./嵌套.css">
</head>
<body>
    <nav>
        <ul>
            <li><a href="">首页</a></li>
            <li><a href="">我的</a></li>
            <li><a href="">关于</a></li>
            <li><a href="">加入</a></li>
        </ul>
    </nav>    
</body>
</html>

增删改查

html-css 代码

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<title></title>  
<style>  
    /* 简单的样式 */  
    table { width: 100%; border-collapse: collapse; }  
    th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }  
    .modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4); }  
    .modal-content { background-color: #fefefe; margin: 15% auto; padding: 20px; border: 1px solid #888; width: 80%; }  
    .close { color: #aaa; float: right; font-size: 28px; font-weight: bold; }  
    .close:hover, .close:focus { color: black; text-decoration: none; cursor: pointer; }  
</style>  
</head>  
<body>  
    <h1>用户信息</h1>  
    <div>  
        <input type="text" id="searchPhone" placeholder="输入手机号查询">  
        <button onclick="searchUser()">查询</button>  
    </div>  
    <button type="button" onclick="showModal('add')">添加用户</button>  
    <table id="userTable">  
        <thead>  
            <tr>  
                <th>身份证号</th>  
                <th>手机号</th>  
                <th>操作</th>  
            </tr>  
        </thead>  
        <tbody>  
            <!-- 用户数据将通过JavaScript动态添加 -->  
        </tbody>  
    </table>  
  
    <!-- 自定义弹框 -->  
    <div id="myModal" class="modal">  
        <div class="modal-content">  
            <span class="close" onclick="closeModal()">&times;</span>  
            <h2 id="modalTitle">添加用户</h2>  
            <form id="userInfoForm">  
                <label for="idCard">身份证号:</label>  
                <input type="text" id="idCard" required>  
                <br>  
                <label for="phone">手机号:</label>  
                <input type="text" id="phone" required>  
                <br>  
                <button type="button" onclick="submitForm()">提交</button>  
            </form>  
        </div>  
    </div>  
  
    <script src="script.js"></script>  
</body>  
</html>

js代码

let users = [];  
let editMode = false;  
let editIndex = null; // 用于存储当前编辑的用户的索引  
  
const idCardRegex = /^(1[1-5]|2[1-3]|3[1-7]|4[1-6]|5[0-4]|6[1-5])\d{4}((19|20)\d{2})(0[1-9]|1[0-2])(0[1-9]|[12][0-9]|3[01])\d{3}(\d|[Xx])$/;  
const phoneRegex = /^1[3-9]\d{9}$/;  
  
function validateIdCard(idCard) {  
    return idCardRegex.test(idCard);  
}  
  
function validatePhone(phone) {  
    return phoneRegex.test(phone);  
}  
  
function showModal(mode, index = null) {  
    editMode = mode === 'edit';  
    editIndex = index;  
    document.getElementById('myModal').style.display = 'block';  
    document.getElementById('modalTitle').textContent = editMode ? '修改用户' : '添加用户';  
  
    const idCardInput = document.getElementById('idCard');  
    const phoneInput = document.getElementById('phone');  
  
    if (editMode) {  
        const user = users[index];  
        idCardInput.value = user.idCard;  
        phoneInput.value = user.phone;  
    } else {  
        idCardInput.value = '';  
        phoneInput.value = '';  
    }  
}  
  
function closeModal() {  
    document.getElementById('myModal').style.display = 'none';  
    editMode = false;  
    editIndex = null;  
}  
  
function submitForm() {  
    const idCard = document.getElementById('idCard').value;  
    const phone = document.getElementById('phone').value;  
  
    if (validateIdCard(idCard) && validatePhone(phone)) {  
        if (editMode) {  
            // 修改用户  
            users[editIndex] = { idCard, phone };  
        } else {  
            // 添加新用户  
            users.push({ idCard, phone });  
        }  
  
        // 更新表格  
        updateTable();  
        closeModal();  
    } else {  
        alert('请输入有效的身份证号和手机号！');  
    }  
}  
  
function updateTable() {  
    const tbody = document.getElementById('userTable').getElementsByTagName('tbody')[0];  
    tbody.innerHTML = ''; // 清空表格  
  
    users.forEach((user, index) => {  
        const row = tbody.insertRow();  
        const idCardCell = row.insertCell(0);  
        const phoneCell = row.insertCell(1);  
        const actionCell = row.insertCell(2);  
  
        idCardCell.textContent = user.idCard;  
        phoneCell.textContent = user.phone;  
  
        // 添加操作按钮  
        const editButton = document.createElement('button');  
        editButton.textContent = '编辑';  
        editButton.onclick = () => showModal('edit', index);  
  
        const deleteButton = document.createElement('button');  
        deleteButton.textContent = '删除';  
        deleteButton.onclick = () => deleteUser(index);  
  
        actionCell.appendChild(editButton);  
        actionCell.appendChild(document.createTextNode(' ')); // 添加一些间隔  
        actionCell.appendChild(deleteButton);  
    });  
}  
function deleteUser(index) {  
    users.splice(index, 1); // 从数组中删除用户  
    updateTable(); // 更新表格  
}  
function searchUser() {  
    const searchPhone = document.getElementById('searchPhone').value.trim(); // 去除首尾空格  
  
    // 如果输入为空，则显示所有数据  
    if (!searchPhone) {  
        displayAllUsers();  
        return;  
    }  
  
    // 如果输入不是有效的手机号，则提示错误  
    if (!validatePhone(searchPhone)) {  
        alert('请输入有效的手机号！');  
        return;  
    }  
  
    // 过滤并显示匹配的用户  
    const filteredUsers = users.filter(user => user.phone === searchPhone);  
  
    if (filteredUsers.length === 0) {  
        alert('未找到该手机号的用户！');  
        return;  
    }  
  
    // 更新表格以显示查询结果  
    const tbody = document.getElementById('userTable').getElementsByTagName('tbody')[0];  
    tbody.innerHTML = ''; // 清空表格  
  
    filteredUsers.forEach(user => {  
        const row = tbody.insertRow();  
        const idCardCell = row.insertCell(0);  
        const phoneCell = row.insertCell(1);  
        // 假设不需要操作列，如果需要可以添加  
  
        idCardCell.textContent = user.idCard;  
        phoneCell.textContent = user.phone;  
    });  
}  
// 假设这是用于显示所有用户的函数  
function displayAllUsers() {  
    const tbody = document.getElementById('userTable').getElementsByTagName('tbody')[0];  
    tbody.innerHTML = ''; // 清空表格  
  
    users.forEach(user => {  
        const row = tbody.insertRow();  
        const idCardCell = row.insertCell(0);  
        const phoneCell = row.insertCell(1);  
        // 假设不需要操作列，如果需要可以添加  
  
        idCardCell.textContent = user.idCard;  
        phoneCell.textContent = user.phone;  
    });  
}  
function validatePhone(phone) {  
    const regex = /^1(3|4|5|6|7|8|9)\d{9}$/;  
    return regex.test(phone);  
}  
users.push({ idCard: '410521200100001234', phone: '18200000000' });  
users.push({ idCard: '4105211200011224321', phone: '18400000000' });  
updateTable(); // 初始显示表格