<div> <button>开始</button> </div> <script> alert("刷新") </script>添加一下代码,点击按钮再弹窗
时间: 2023-11-14 18:07:00 浏览: 38
可以尝试以下代码:
```
<div>
<button onclick="showAlert()">开始</button>
</div>
<script>
function showAlert() {
alert("刷新");
}
</script>
```
当点击按钮时,会触发 `showAlert()` 函数,该函数会弹出一个包含 "刷新" 的提示框。
相关问题
<button>登录</button> 添加登录失败弹出
当用户登录失败时,您可以通过弹出一个提示框来告诉用户登录失败的原因。以下是一个使用JavaScript和CSS实现的示例:
HTML代码:
```
<button id="login-btn">登录</button>
```
CSS代码:
```
.modal-mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
}
.modal-dialog {
background-color: #fff;
border-radius: 4px;
padding: 20px;
width: 300px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
position: relative;
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.modal-header h3 {
margin: 0;
}
.close-btn {
border: none;
background-color: transparent;
font-size: 20px;
cursor: pointer;
}
.modal-body {
margin-top: 20px;
}
.modal-body input {
width: 100%;
margin-bottom: 10px;
padding: 8px;
border-radius: 4px;
border: 1px solid #ccc;
font-size: 14px;
}
.modal-footer {
display: flex;
justify-content: flex-end;
margin-top: 20px;
}
.modal-footer button {
border: none;
background-color: #007bff;
color: #fff;
padding: 8px 16px;
border-radius: 4px;
font-size: 14px;
cursor: pointer;
}
.modal-error {
color: red;
font-size: 14px;
margin-top: 10px;
}
```
JavaScript代码:
```
var loginBtn = document.getElementById("login-btn");
loginBtn.addEventListener("click", function() {
var loginModal = document.createElement("div");
loginModal.innerHTML = `
<div class="modal-mask"></div>
<div class="modal-dialog">
<div class="modal-header">
<h3>登录</h3>
<button class="close-btn">×</button>
</div>
<div class="modal-body">
<input type="text" placeholder="用户名">
<input type="password" placeholder="密码">
<div class="modal-error" style="display: none;">用户名或密码错误</div>
</div>
<div class="modal-footer">
<button class="login-btn">登录</button>
</div>
</div>
`;
loginModal.classList.add("modal");
document.body.appendChild(loginModal);
var closeBtn = loginModal.querySelector(".close-btn");
closeBtn.addEventListener("click", function() {
document.body.removeChild(loginModal);
});
var loginBtn = loginModal.querySelector(".login-btn");
loginBtn.addEventListener("click", function() {
var username = loginModal.querySelector("input[type='text']").value;
var password = loginModal.querySelector("input[type='password']").value;
if (username === "admin" && password === "123456") {
alert("登录成功");
document.body.removeChild(loginModal);
} else {
var errorDiv = loginModal.querySelector(".modal-error");
errorDiv.style.display = "block";
}
});
});
```
当用户输入的用户名或密码不正确时,提示框会显示"用户名或密码错误"的提示信息。您可以根据具体需求进行修改。
<div> <button onclick="showAlert()">开始</button> </div> <script> function showAlert() { alert("刷新"); } </script>设置这个弹窗显示2秒
可以使用setTimeout函数来实现弹窗显示2秒的效果,具体代码如下:
```
<div>
<button onclick="showAlert()">开始</button>
</div>
<script>
function showAlert() {
alert("刷新");
setTimeout(function(){alert("2秒后自动关闭");}, 2000);
}
</script>
```
在弹窗显示后,使用setTimeout函数再次弹出一个提示框,等待2秒后自动关闭。