写一个 js 信息弹出确认框 并判断 点击的是确认还是取消 
时间: 2023-05-26 19:02:21 浏览: 34
可以使用 JavaScript 的内置函数 `confirm()` 来创建一个信息弹出确认框。当点击确认按钮时,该函数会返回 `true`,否则返回 `false`。下面是一个实例:
```javascript
if (confirm("你确定要删除这篇文章吗?")) {
// 如果用户点击确认按钮
console.log("点击了确认按钮");
} else {
// 如果用户点击取消按钮
console.log("点击了取消按钮");
}
```
在这个例子中,当弹出确认框时,会显示一条提示消息,询问用户是否删除文章。如果用户点击确认按钮,则会在控制台输出点击了确认按钮的消息;如果用户点击取消按钮,则会在控制台输出点击了取消按钮的消息。
相关问题
django 按钮点击后 页面弹出确定框是否执行视图函数
实现 Django 按钮点击后页面弹出确定框是否执行视图函数的关键是在 JavaScript 中发送 AJAX 请求,然后在确认框的回调函数中判断用户是否点击了确定按钮,如果点击了确定按钮,则继续发送 AJAX 请求,执行视图函数。
以下是一个大致的实现思路:
1. 在 Django 模板中,将按钮的点击事件绑定到 JavaScript 函数上,同时设置按钮的 ID 和 URL:
```html
<button id="myButton" data-url="{% url 'my_view' %}" onclick="confirmAction()">点击我</button>
```
2. 在 JavaScript 中,实现确认框的逻辑,如果用户点击了确定按钮,则发送 AJAX 请求,执行视图函数:
```javascript
function confirmAction() {
var myButton = document.getElementById("myButton");
var url = myButton.getAttribute("data-url");
var result = confirm("确定执行操作吗?");
if (result) {
// 用户点击了确定按钮,发送 AJAX 请求
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// AJAX 请求成功,执行视图函数
// 可以在这里添加你的逻辑代码
}
};
xhr.open("GET", url, true);
xhr.send();
} else {
// 用户点击了取消按钮,不执行操作
}
}
```
3. 在 Django 中,定义视图函数:
```python
from django.http import HttpResponse
def my_view(request):
# 在这里添加你的逻辑代码
return HttpResponse("执行成功")
```
4. 在 Django 中,将视图函数的 URL 映射到 URLConf 中:
```python
from django.urls import path
from . import views
urlpatterns = [
path("my_view/", views.my_view, name="my_view"),
]
```
这样,当用户点击按钮时,会弹出一个确认框,用户可以选择是否执行视图函数。如果用户点击了确定按钮,就会发送 AJAX 请求,执行视图函数。如果用户点击了取消按钮,就不会执行操作。
帮我写一个JavaScript中prompt()
### 回答1:
函数的语法和用法是什么?
JavaScript 中 prompt() 函数用于显示一个带有消息和输入框的对话框,让用户输入一些信息。它的语法如下:
prompt(message, default);
其中,message 是要显示在对话框中的消息,可以是字符串或变量;default 是可选参数,表示输入框中的默认值。当用户点击“确定”按钮时,prompt() 函数将返回用户输入的字符串,如果用户点击“取消”按钮,则返回 null。
### 回答2:
当用户点击一个按钮时,可以使用JavaScript中的prompt()函数弹出一个对话框,用于获取用户输入的值。下面是一个简单的例子:
```html
<!DOCTYPE html>
<html>
<head>
<title>Prompt Example</title>
</head>
<body>
<button onclick="getInput()">点击弹出输入框</button>
<script>
function getInput() {
// 使用prompt()函数弹出输入框,并将用户输入的值存储在变量中
var userInput = prompt("请输入你的名字:");
// 检查用户是否输入了值
if (userInput != null && userInput != "") {
alert("你好," + userInput + "!");
} else {
alert("请输入你的名字!");
}
}
</script>
</body>
</html>
```
在这个例子中,当用户点击按钮时,`getInput()`函数会被调用。在`getInput()`函数中,`prompt()`函数被用来弹出一个对话框,要求用户输入他们的名字。用户输入的值会被存储在`userInput`变量中。
接着,我们使用if语句检查用户是否输入了一个非空的值。如果用户输入了一个非空的值,我们会用`alert()`函数弹出一个含有用户输入名字的欢迎信息。如果用户没有输入任何值,我们会提示他们输入名字。
提示框是一个简单而常用的交互工具,你可以根据自己的需求定制更复杂的prompt()函数。
### 回答3:
prompt()是JavaScript中的一个函数,用于在浏览器中弹出一个对话框,以便用户输入一段文本。下面是一个简单示例的JavaScript中的prompt()函数:
```javascript
var name = prompt("请输入您的姓名:");
if (name != null && name != "") {
alert("您好," + name + "!欢迎来到我们的网站。");
} else {
alert("您没有输入姓名,请重新加载页面输入。");
}
```
在这个例子中,浏览器会弹出一个对话框,要求用户输入姓名。用户可以在文本框中输入姓名,然后点击确定按钮提交。如果用户输入了姓名并点击确定按钮,那么会弹出一个欢迎消息,显示出用户输入的姓名。如果用户没有输入姓名或者点击了取消按钮,那么会弹出一个提示消息,要求重新加载页面进行输入。
需要注意的是,prompt()返回的是一个字符串,所以我们可以将用户输入的内容存储在一个变量中,以供其他逻辑进行处理。在上面的例子中,我们将用户输入的姓名存储在一个名为name的变量中,并进行了相应的逻辑判断和处理。
这只是一个简单的示例,你可以根据具体的需求和情况来使用prompt()函数,并根据用户的输入进行相应的后续处理。
相关推荐


好的,这个需求比较详细,需要分别实现弹出对话框、添加记录、删除记录和修改记录这几个功能。下面我将逐步进行代码实现。
首先,我们需要在HTML页面中创建点餐按钮和点餐记录表格:
html
<!DOCTYPE html>
<html>
<head>
<title>淄博烧烤季点餐页面</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
淄博烧烤季点餐页面
<button id="order-btn">点餐</button>
菜品
数量
价格
操作
点餐
<label for="dish-input">菜品:</label>
<input type="text" id="dish-input" placeholder="请输入菜品名称">
<label for="quantity-input">数量:</label>
<input type="number" id="quantity-input" placeholder="请输入数量">
<label for="price-input">价格:</label>
<input type="number" id="price-input" placeholder="请输入价格">
<button id="confirm-btn">确定</button>
<button id="cancel-btn">取消</button>
删除记录
确定要删除该记录吗?
<button id="delete-confirm-btn">确定</button>
<button id="delete-cancel-btn">取消</button>
修改记录
<label for="modify-dish-input">菜品:</label>
<input type="text" id="modify-dish-input" placeholder="请输入菜品名称">
<label for="modify-quantity-input">数量:</label>
<input type="number" id="modify-quantity-input" placeholder="请输入数量">
<label for="modify-price-input">价格:</label>
<input type="number" id="modify-price-input" placeholder="请输入价格">
<button id="modify-confirm-btn">确定</button>
<button id="modify-cancel-btn">取消</button>
<script src="script.js"></script>
</body>
</html>
在CSS文件中,我们可以对弹出对话框进行样式设置,如下所示:
css
.dialog {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 100;
background-color: white;
border: 1px solid black;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.dialog h2 {
margin-top: 0;
}
.dialog label {
display: inline-block;
width: 60px;
}
.dialog input {
margin-bottom: 10px;
}
.dialog button {
margin-left: 10px;
}
接下来,我们开始编写JavaScript代码。首先,我们需要获取页面中的元素:
javascript
const orderBtn = document.getElementById('order-btn');
const orderList = document.getElementById('order-list');
const orderDialog = document.getElementById('order-dialog');
const dishInput = document.getElementById('dish-input');
const quantityInput = document.getElementById('quantity-input');
const priceInput = document.getElementById('price-input');
const confirmBtn = document.getElementById('confirm-btn');
const cancelBtn = document.getElementById('cancel-btn');
const deleteDialog = document.getElementById('delete-dialog');
const deleteConfirmBtn = document.getElementById('delete-confirm-btn');
const deleteCancelBtn = document.getElementById('delete-cancel-btn');
const modifyDialog = document.getElementById('modify-dialog');
const modifyDishInput = document.getElementById('modify-dish-input');
const modifyQuantityInput = document.getElementById('modify-quantity-input');
const modifyPriceInput = document.getElementById('modify-price-input');
const modifyConfirmBtn = document.getElementById('modify-confirm-btn');
const modifyCancelBtn = document.getElementById('modify-cancel-btn');
然后,我们需要为点餐按钮添加点击事件,使其能够弹出点餐对话框:
javascript
orderBtn.addEventListener('click', () => {
orderDialog.style.display = 'block';
});
接着,我们需要为点餐对话框中的确定按钮添加点击事件,使其能够添加点餐记录到表格中:
javascript
confirmBtn.addEventListener('click', () => {
const dish = dishInput.value.trim();
const quantity = parseInt(quantityInput.value);
const price = parseFloat(priceInput.value);
if (!dish || !quantity || !price) {
alert('请填写完整的点餐信息!');
return;
}
const tr = document.createElement('tr');
tr.innerHTML =
${dish}
${quantity}
${price.toFixed(2)}
<button class="delete-btn">删除</button>
<button class="modify-btn">修改</button>
;
orderList.appendChild(tr);
dishInput.value = '';
quantityInput.value = '';
priceInput.value = '';
orderDialog.style.display = 'none';
});
这里我们使用了 innerHTML 属性来创建一个新的表格行,并设置了菜品、数量、价格以及操作按钮。在添加操作按钮时,我们分别设置了删除按钮和修改按钮,并为它们添加类名,方便后续操作。
接下来,我们需要为删除按钮和修改按钮添加点击事件,分别弹出删除对话框和修改对话框:
javascript
orderList.addEventListener('click', (event) => {
const target = event.target;
if (target.classList.contains('delete-btn')) {
deleteDialog.style.display = 'block';
} else if (target.classList.contains('modify-btn')) {
modifyDialog.style.display = 'block';
}
});
在这里,我们使用了事件委托的方式,只为订单列表添加一个点击事件,然后通过判断点击的元素是否包含删除按钮或修改按钮的类名,来决定弹出哪个对话框。
为了能够删除记录,我们需要为删除对话框中的确定按钮添加点击事件:
javascript
deleteConfirmBtn.addEventListener('click', () => {
const tr = deleteDialog.parentElement;
tr.parentElement.removeChild(tr);
deleteDialog.style.display = 'none';
});
在这里,我们首先获取到当前要删除的表格行,然后从它的父元素中将其删除。
为了能够取消删除记录,我们需要为删除对话框中的取消按钮添加点击事件:
javascript
deleteCancelBtn.addEventListener('click', () => {
deleteDialog.style.display = 'none';
});
类似地,我们还需要为修改对话框中的确定按钮和取消按钮添加点击事件:
javascript
modifyConfirmBtn.addEventListener('click', () => {
const dish = modifyDishInput.value.trim();
const quantity = parseInt(modifyQuantityInput.value);
const price = parseFloat(modifyPriceInput.value);
if (!dish || !quantity || !price) {
alert('请填写完整的点餐信息!');
return;
}
const tr = modifyDialog.parentElement;
tr.children[0].textContent = dish;
tr.children[1].textContent = quantity;
tr.children[2].textContent = price.toFixed(2);
modifyDishInput.value = '';
modifyQuantityInput.value = '';
modifyPriceInput.value = '';
modifyDialog.style.display = 'none';
});
modifyCancelBtn.addEventListener('click', () => {
modifyDialog.style.display = 'none';
});
在这里,我们首先获取到当前要修改的表格行,然后将其中的菜品、数量和价格分别修改为修改对话框中输入的值。
至此,我们就完成了点餐页面的JavaScript代码编写。完整代码如下所示:
javascript
const orderBtn = document.getElementById('order-btn');
const orderList = document.getElementById('order-list');
const orderDialog = document.getElementById('order-dialog');
const dishInput = document.getElementById('dish-input');
const quantityInput = document.getElementById('quantity-input');
const priceInput = document.getElementById('price-input');
const confirmBtn = document.getElementById('confirm-btn');
const cancelBtn = document.getElementById('cancel-btn');
const deleteDialog = document.getElementById('delete-dialog');
const deleteConfirmBtn = document.getElementById('delete-confirm-btn');
const deleteCancelBtn = document.getElementById('delete-cancel-btn');
const modifyDialog = document.getElementById('modify-dialog');
const modifyDishInput = document.getElementById('modify-dish-input');
const modifyQuantityInput = document.getElementById('modify-quantity-input');
const modifyPriceInput = document.getElementById('modify-price-input');
const modifyConfirmBtn = document.getElementById('modify-confirm-btn');
const modifyCancelBtn = document.getElementById('modify-cancel-btn');
orderBtn.addEventListener('click', () => {
orderDialog.style.display = 'block';
});
confirmBtn.addEventListener('click', () => {
const dish = dishInput.value.trim();
const quantity = parseInt(quantityInput.value);
const price = parseFloat(priceInput.value);
if (!dish || !quantity || !price) {
alert('请填写完整的点餐信息!');
return;
}
const tr = document.createElement('tr');
tr.innerHTML =
${dish}
${quantity}
${price.toFixed(2)}
<button class="delete-btn">删除</button>
<button class="modify-btn">修改</button>
;
orderList.appendChild(tr);
dishInput.value = '';
quantityInput.value = '';
priceInput.value = '';
orderDialog.style.display = 'none';
});
orderList.addEventListener('click', (event) => {
const target = event.target;
if (target.classList.contains('delete-btn')) {
deleteDialog.style.display = 'block';
} else if (target.classList.contains('modify-btn')) {
modifyDialog.style.display = 'block';
}
});
deleteConfirmBtn.addEventListener('click', () => {
const tr = deleteDialog.parentElement;
tr.parentElement.removeChild(tr);
deleteDialog.style.display = 'none';
});
deleteCancelBtn.addEventListener('click', () => {
deleteDialog.style.display = 'none';
});
modifyConfirmBtn.addEventListener('click', () => {
const dish = modifyDishInput.value.trim();
const quantity = parseInt(modifyQuantityInput.value);
const price = parseFloat(modifyPriceInput.value);
if (!dish || !quantity || !price) {
alert('请填写完整的点餐信息!');
return;
}
const tr = modifyDialog.parentElement;
tr.children[0].textContent = dish;
tr.children[1].textContent = quantity;
tr.children[2].textContent = price.toFixed(2);
modifyDishInput.value = '';
modifyQuantityInput.value = '';
modifyPriceInput.value = '';
modifyDialog.style.display = 'none';
});
modifyCancelBtn.addEventListener('click', () => {
modifyDialog.style.display = 'none';
});









好的,以下是使用JavaScript实现的代码:
HTML部分:
通讯录
<button class="add-btn">添加联系人</button>
<input type="text" id="search-input" placeholder="搜索姓名或电话">
姓名
电话
邮箱
操作
×
<form>
<label for="name">姓名</label>
<input type="text" id="name" name="name" required>
<label for="phone">电话</label>
<input type="text" id="phone" name="phone" required>
<label for="email">邮箱</label>
<input type="text" id="email" name="email" required>
<button id="save-btn">保存</button>
<button id="cancel-btn">取消</button>
</form>
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 += '<span>' + i + '';
}
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 + '';
html += '' + contact.phone + ' ';
html += '' + contact.email + ' ';
html += '<button class="edit-btn">编辑</button><button class="delete-btn">删除</button> ';
html += '';
}
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方法进行匹配。





