//const 基本使用 =>

`const` 是JavaScript中的一种关键字，用于声明常量，即一旦赋值就不能更改其值的变量。使用 `const` 定义的变量有以下几个特点： 1. **不可变性**：一旦给 `const` 变量分配了值，这个值就无法再被改变。尝试修改它的值会抛出错误。 2. **作用域限定**：`const` 关键字声明的变量属于块级作用域，如果在函数内部使用 `const`，那么它只在该函数内部有效。 3. **引用不可变**：对于复杂数据结构（如对象或数组），`const` 实际上只是创建了一个指向该对象的引用，并不是复制对象本身。这意味着对 `const` 对象内部属性的修改不会影响到原始对象，但如果对象本身是可变的，这可能会导致意外的结果。 ```javascript // 示例 const pi = 3.14; // pi 是一个常数，不可以被重新赋值 let arr = [1, 2, 3]; // 使用 const 但可以修改引用的对象 arr.push(4); // 正确，修改的是数组引用内的元素 const obj = {name: 'John'}; // 对象也是引用类型，obj.name = 'Doe' 会报错，因为改变了引用 //

<h1>通讯录</h1> <button class="add-btn">添加联系人</button> <table> <thead> <tr> <th>姓名</th> <th>电话</th> <th>邮箱</th> <th>操作</th> </tr> </thead> <tbody>  </tbody> </table>  <div id="modal" class="modal" style="display: none;"> <div class="modal-content"> <span class="close">×</span> <form> <div class="form-group"> <label for="name">姓名</label> <input type="text" id="name" name="name" required> </div> <div class="form-group"> <label for="phone">电话</label> <input type="text" id="phone" name="phone" required> </div> <div class="form-group"> <label for="email">邮箱</label> <input type="text" id="email" name="email" required> </div> <button id="save-btn">保存</button> <button id="cancel-btn">取消</button> </form> </div> </div>给这个页面添加一个搜索信息的功能使用正则查找

好的，可以通过以下代码实现一个搜索联系人的功能： ```html  <div> <label for="search-input">搜索联系人：</label> <input type="text" id="search-input"> </div> <script> const searchInput = document.getElementById('search-input'); const tableBody = document.querySelector('tbody'); // 监听搜索框输入 searchInput.addEventListener('input', () => { const searchText = searchInput.value.trim().toLowerCase(); const rows = tableBody.querySelectorAll('tr'); // 遍历每一行联系人信息，使用正则表达式匹配搜索文本 rows.forEach(row => { const name = row.querySelector('td:nth-child(1)').textContent.toLowerCase(); const phone = row.querySelector('td:nth-child(2)').textContent.toLowerCase(); const email = row.querySelector('td:nth-child(3)').textContent.toLowerCase(); if (name.match(searchText) || phone.match(searchText) || email.match(searchText)) { row.style.display = ''; } else { row.style.display = 'none'; } }); }); </script> ``` 在页面中添加一个输入框和一个表格，然后使用 JavaScript 监听输入框的输入事件，获取搜索文本的值。接着遍历表格中每一行联系人信息，将姓名、电话、邮箱三个字段的文本内容转换为小写字母，并使用 `match` 方法与搜索文本进行匹配。如果匹配成功，则显示该行联系人信息，否则隐藏该行信息。这样就实现了一个基本的联系人搜索功能。

根据这个页面制作一个js完善功能<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>购物车</title> <link rel="stylesheet" href="style.css"> <script src="script.js"></script> </head> <body> <header> <h1>欢迎来到我们的网站！</h1> <nav> <ul> <li><a href="index.html">首页</a></li> <li><a href="details_page.html">商品</a></li> <li><a href="cart.html">购物车</a></li> <li><a href="login.html">登录</a></li> </ul> </nav> </header> <main> <h2>购物车</h2> <ul> <li> <img src="product1.jpg" alt="商品1"> <p>商品1</p> <p>价格：100元</p> <form> <label for="quantity1">数量：</label> <input type="number" id="quantity1" min="1" value="1"> <button type="submit">更新</button> </form> <button class="remove">删除</button> </li> <li> <img src="product2.jpg" alt="商品2"> <p>商品2</p> <p>价格：200元</p> <form> <label for="quantity2">数量：</label> <input type="number" id="quantity2" min="1" value="1"> <button type="submit">更新</button> </form> <button class="remove">删除</button> </li> </ul> <p>总价：300元</p> <button id="checkout">结算</button> </main> <footer> <p>版权所有 © 2021</p> </footer> </body> </html>

这份 HTML 代码已经包含了一个基本的购物车页面的结构和样式，但是还需要一个 JavaScript 文件来添加一些交互和功能。以下是一个示例 JavaScript 文件，你可以在 script.js 文件中添加它： ``` // 获取所需的元素 const quantityInputs = document.querySelectorAll('input[type="number"]'); const updateButtons = document.querySelectorAll('form button[type="submit"]'); const removeButtons = document.querySelectorAll('.remove'); const checkoutButton = document.getElementById('checkout'); const totalPrice = document.querySelector('main p'); // 计算总价 function calculateTotalPrice() { let total = 0; quantityInputs.forEach((input, index) => { const price = input.parentNode.querySelector('p:last-of-type').textContent.slice(3); total += parseInt(price) * parseInt(input.value); }); totalPrice.textContent = `总价：${total}元`; } // 更新数量 function updateQuantity(event) { event.preventDefault(); const input = event.target.previousElementSibling; const price = event.target.parentNode.querySelector('p:last-of-type').textContent.slice(3); const subtotal = parseInt(price) * parseInt(input.value); event.target.parentNode.parentNode.querySelector('p:last-of-type').textContent = `小计：${subtotal}元`; calculateTotalPrice(); } // 删除商品 function removeItem(event) { event.target.parentNode.remove(); calculateTotalPrice(); } // 点击更新按钮时更新数量 updateButtons.forEach(button => { button.addEventListener('click', updateQuantity); }); // 点击删除按钮时删除商品 removeButtons.forEach(button => { button.addEventListener('click', removeItem); }); // 点击结算按钮时弹出提示框 checkoutButton.addEventListener('click', () => { alert('结算成功！'); }); ``` 这段代码包含了三个函数，分别用于更新数量、删除商品和计算总价。还有一些事件监听器，用于监听更新按钮、删除按钮和结算按钮的点击事件。在每个事件监听器中，都会调用对应的函数来实现相应的功能。最后，你需要将这个 JavaScript 文件链接到你的 HTML 文件中，就可以让页面具备交互和功能了。

阅读全文

//const 基本使用 =>

相关推荐

C++语言const 关键字使用方法图文详解

React/Redux应用使用Async/Await的方法

c++中const关键字使用详解

int fun() { //=======begin======= //========end======== return 0; }编写实现动态数组的程序

"/subpkg/addMedical/addMedical?id=403&type=look"微信小程序中如何截取链接上的403

// 是否需要设置 token const isToken = (config.headers || {}).isToken === false

export const getRoutes = () => requests({ url: /getRoutes, method: 'get', data: null, })报错

基本html中使用three.js

const geometry = new THREE.BoxGeometry()

最新推荐

如何使用JavaScript实现无缝滚动自动播放轮播图效果

MATLAB实现基于SVM-RFE-BP多输入单输出回归预测（含完整的程序和代码详解）

磁性吸附笔筒设计创新，行业文档精选

管理建模和仿真的文件

深入LINQ：泛型在查询表达式中的强大应用

在Java中，当人数 为M ，我们需要按照给定的比例来分配人数到不同的等级（M*10%为A，M*20%为B，M*50%为C，M*10%为D，M*10%为E）

Java Swing实现的俄罗斯方块游戏代码分享

"互动学习：行动中的多样性与论文攻读经历"

C#泛型工具类设计：创建通用且高效的代码库的艺术

Requests库常用的方法：get，post，13个控制参数

在Java中，当人数为M ，我们需要按照给定的比例来分配人数到不同的等级（M10%为A，M20%为B，M50%为C，M10%为D，M*10%为E）