<button id="openBtn">选择文件</button> <button id = "saveBtn">保存</button> <br><br> <textarea id="fileContent" cols="80" rows="30"></textarea> <script> $(document).ready(function(){ $("#openBtn").click(function(){ $.ajax({ url:"ntp.php", type:"GET", success:function(response){ $("#fileContent").val(response); } }); }); $("#saveBtn").click(function(){ var fileContent = $("#fileContent").val(); $.ajax({ url:"ntp.php", type:"POST", data:{content:fileContent}, success:function(response){ alert("File saved successfully!"); } }); }); }); 调用以下代码$file_path = "/etc/ntp.conf"; $file_content = file_get_contents($file_path); $file_content1 = $_POST['content']; file_put_contents($file_path,$file_content); php文件不需要echo $file_content html文件就可以将$file_content的值输入到文本框中

好的，以下是使用JavaScript实现的代码： HTML部分： ``` <h1>通讯录</h1> <button class="add-btn">添加联系人</button> <input type="text" id="search-input" placeholder="搜索姓名或电话"> <table> <thead> <tr> <th>姓名</th> <th>电话</th> <th>邮箱</th> <th>操作</th> </tr> </thead> <tbody id="contact-list"> <!-- 数据渲染 --> </tbody> </table> <!-- 分页按钮 --> <div id="page-buttons"></div> <!-- 弹出层，用于添加或编辑联系人 --> <div id="modal" class="modal" style="display: none;"> <div class="modal-content"> <span class="close">&times;</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> ``` CSS部分： ``` /* 省略其他样式 */ /* 分页按钮样式 */ #page-buttons { margin-top: 20px; display: flex; justify-content: center; align-items: center; } .page-btn { margin: 0 10px; padding: 5px 10px; border: 1px solid #ccc; cursor: pointer; } .page-btn.active { background-color: #ccc; color: #fff; } ``` JavaScript部分： ``` // 定义全局变量 var contacts = []; // 联系人数据 var currentPage = 1; // 当前页码 var pageSize = 5; // 每页显示的数据条数 var totalPages = 1; // 总页数 // 页面加载完成后执行 window.onload = function() { // 获取元素 var contactList = document.getElementById('contact-list'); var searchInput = document.getElementById('search-input'); var pageButtons = document.getElementById('page-buttons'); // 添加联系人按钮点击事件 var addBtn = document.querySelector('.add-btn'); addBtn.onclick = function() { showModal(); }; // 关闭弹出层 var closeBtn = document.querySelector('.close'); closeBtn.onclick = function() { hideModal(); }; // 取消按钮点击事件 var cancelBtn = document.getElementById('cancel-btn'); cancelBtn.onclick = function() { hideModal(); }; // 保存按钮点击事件 var saveBtn = document.getElementById('save-btn'); saveBtn.onclick = function(event) { event.preventDefault(); // 阻止表单提交 // 获取表单数据 var name = document.getElementById('name').value.trim(); var phone = document.getElementById('phone').value.trim(); var email = document.getElementById('email').value.trim(); // 判断表单数据是否为空 if (!name || !phone || !email) { alert('请填写完整的联系人信息！'); return; } // 保存联系人数据 var contact = {name: name, phone: phone, email: email}; contacts.push(contact); saveContacts(); hideModal(); renderContacts(); // 重新渲染联系人数据 }; // 搜索框输入事件 searchInput.oninput = function() { renderContacts(); }; // 渲染联系人数据 function renderContacts() { var keyword = searchInput.value.trim(); // 获取搜索关键字 var filteredContacts = contacts.filter(function(contact) { // 过滤联系人数据 return contact.name.indexOf(keyword) !== -1 || contact.phone.indexOf(keyword) !== -1; }); // 计算分页数据 totalPages = Math.ceil(filteredContacts.length / pageSize); currentPage = Math.min(currentPage, totalPages); // 渲染分页按钮 var pageBtns = ''; for (var i = 1; i <= totalPages; i++) { pageBtns += '<div class="page-btn ' + (i === currentPage ? 'active' : '') + '">' + i + '</div>'; } pageButtons.innerHTML = pageBtns; // 绑定分页按钮点击事件 var pageBtnList = document.querySelectorAll('.page-btn'); for (var i = 0; i < pageBtnList.length; i++) { pageBtnList[i].onclick = function() { currentPage = parseInt(this.innerText); renderContacts(); }; } // 计算数据起始和结束索引 var startIndex = (currentPage - 1) * pageSize; var endIndex = startIndex + pageSize; // 渲染联系人数据 var html = ''; for (var i = startIndex; i < endIndex && i < filteredContacts.length; i++) { var contact = filteredContacts[i]; html += '<tr>'; html += '<td>' + contact.name + '</td>'; html += '<td>' + contact.phone + '</td>'; html += '<td>' + contact.email + '</td>'; html += '<td><button class="edit-btn">编辑</button><button class="delete-btn">删除</button></td>'; html += '</tr>'; } contactList.innerHTML = html; // 绑定编辑按钮点击事件 var editBtnList = document.querySelectorAll('.edit-btn'); for (var i = 0; i < editBtnList.length; i++) { editBtnList[i].onclick = function() { var tr = this.parentNode.parentNode; var name = tr.children[0].innerText; var phone = tr.children[1].innerText; var email = tr.children[2].innerText; showModal(name, phone, email); }; } // 绑定删除按钮点击事件 var deleteBtnList = document.querySelectorAll('.delete-btn'); for (var i = 0; i < deleteBtnList.length; i++) { deleteBtnList[i].onclick = function() { var tr = this.parentNode.parentNode; var name = tr.children[0].innerText; var phone = tr.children[1].innerText; var index = findContactIndex(name, phone); if (index !== -1 && confirm('确定要删除该联系人吗？')) { contacts.splice(index, 1); saveContacts(); renderContacts(); // 重新渲染联系人数据 } }; } } // 显示弹出层 function showModal(name, phone, email) { var modal = document.getElementById('modal'); var title = name ? '编辑联系人' : '添加联系人'; var saveBtn = document.getElementById('save-btn'); document.querySelector('.modal-content h2').innerText = title; document.getElementById('name').value = name || ''; document.getElementById('phone').value = phone || ''; document.getElementById('email').value = email || ''; saveBtn.innerText = name ? '保存' : '添加'; modal.style.display = 'block'; } // 隐藏弹出层 function hideModal() { var modal = document.getElementById('modal'); modal.style.display = 'none'; } // 查找联系人索引 function findContactIndex(name, phone) { for (var i = 0; i < contacts.length; i++) { if (contacts[i].name === name && contacts[i].phone === phone) { return i; } } return -1; } // 保存联系人数据到本地存储 function saveContacts() { localStorage.setItem('contacts', JSON.stringify(contacts)); } // 加载联系人数据 var savedContacts = localStorage.getItem('contacts'); if (savedContacts) { contacts = JSON.parse(savedContacts); } renderContacts(); }; ``` 以上就是添加了搜索框和分页功能的通讯录代码。使用正则表达式进行匹配也可以在过滤函数中实现，但这样会影响性能，因此建议使用字符串的indexOf方法进行匹配。

好的，以下是一个简单的示例，供您参考： HTML代码： ```html <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"> <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" class="btn">保存</button> <button id="cancel-btn" class="btn">取消</button> </form> </div> ``` CSS代码： ```css /* 全局样式 */ body { font-family: 'Microsoft Yahei', 'PingFang SC', sans-serif; background-color: #f5f5f5; } /* 表格样式 */ table { width: 80%; margin: 30px auto; border-collapse: collapse; background-color: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .2); } th, td { padding: 10px 20px; text-align: center; border: 1px solid #d9d9d9; } th { background-color: #f2f2f2; font-weight: bold; } tbody tr:nth-child(even) { background-color: #f9f9f9; } /* 添加联系人按钮 */ .add-btn { display: block; margin: 30px auto; padding: 10px 20px; background-color: #d9d9d9; color: #fff; border: none; border-radius: 5px; box-shadow: 0 2px 4px rgba(0, 0, 0, .2); transition: all .3s ease; } .add-btn:hover { background-color: #a0d8ef; cursor: pointer; } /* 弹出层样式 */ .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .5); z-index: 999; } .modal form { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 400px; padding: 30px; background-color: #fff; border-radius: 5px; box-shadow: 0 2px 4px rgba(0, 0, 0, .2); } .modal label { display: inline-block; margin-bottom: 10px; font-weight: bold; } .modal input[type="text"] { display: block; width: 100%; padding: 10px; margin-bottom: 20px; border-radius: 5px; border: 1px solid #ddd; box-shadow: none; transition: all .3s ease; } .modal input[type="text"]:focus { outline: none; border-color: #a0d8ef; box-shadow: 0 2px 4px rgba(0, 0, 0, .2); } .modal .btn { display: inline-block; padding: 10px 20px; margin-right: 20px; background-color: #d9d9d9; color: #fff; border: none; border-radius: 5px; box-shadow: 0 2px 4px rgba(0, 0, 0, .2); cursor: pointer; transition: all .3s ease; } .modal .btn:hover { background-color: #a0d8ef; } ``` JavaScript代码： ```javascript // 获取页面元素 const addBtn = document.querySelector('.add-btn'); const modal = document.getElementById('modal'); const saveBtn = document.getElementById('save-btn'); const cancelBtn = document.getElementById('cancel-btn'); // 点击添加联系人按钮弹出弹出层 addBtn.addEventListener('click', () => { modal.style.display = 'block'; }); // 点击保存按钮关闭弹出层 saveBtn.addEventListener('click', () => { modal.style.display = 'none'; }); // 点击取消按钮关闭弹出层 cancelBtn.addEventListener('click', () => { modal.style.display = 'none'; }); ``` PS: 由于我不知道您希望的具体中式风格是怎样的，因此在示例中只是提供了一个简单的样式。如果您有更具体的要求，可以提出来，我会尽力满足。