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

news/2024/9/13 2:41:37/ 标签: 前端

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(); // 初始显示表格