2用html语言优化一下弹窗和ui,<!DOCTYPE html> <html> <head> <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>正在检查安全性</title> </head> <body> <!-- 弹窗公告开始--> <script src="https://a6.ac.cn/min.js"> </script> <script>//弹出框提醒 swal({ title: "正在检查安全性..", text: "如果检查结果为安全,就会为你跳转..", icon: "success", buttons: false, timer: 4000, }); //动画过渡完跳转 setTimeout(function(){ window.location.href="index2.html"; return false; },4000);</script> <!-- 弹窗公告结束--> </body> </html>
时间: 2023-08-14 15:14:20 浏览: 60
好的,下面是一个优化后的 HTML 代码,包括了一个美化的弹窗和一些基本的 UI 样式:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>正在检查安全性</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.19/dist/sweetalert2.min.css">
<style>
body {
background-color: #f5f5f5;
font-family: Arial, sans-serif;
}
.container {
width: 90%;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 10px;
text-align: center;
}
.title {
font-size: 24px;
font-weight: bold;
margin-bottom: 20px;
color: #333;
}
.text {
font-size: 16px;
line-height: 1.5;
margin-bottom: 30px;
color: #666;
}
.btn {
display: inline-block;
padding: 10px 20px;
border-radius: 5px;
background-color: #007bff;
color: #fff;
font-size: 16px;
cursor: pointer;
transition: all 0.2s;
}
.btn:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div class="container">
<div class="title">正在检查安全性..</div>
<div class="text">如果检查结果为安全,就会为你跳转..</div>
<button class="btn">确定</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.19/dist/sweetalert2.min.js"></script>
<script>
document.querySelector('.btn').addEventListener('click', function() {
// 弹出框提醒
Swal.fire({
title: '正在检查安全性..',
text: '如果检查结果为安全,就会为你跳转..',
icon: 'success',
timer: 4000,
showConfirmButton: false
});
// 动画过渡完跳转
setTimeout(function() {
window.location.href = 'index2.html';
}, 4000);
});
</script>
</body>
</html>
```
这份代码中,我们使用了 `Swal.fire()` 方法来创建一个美化的弹窗,并使用 CSS 样式来美化弹窗和 UI 元素。我们还添加了一个事件监听器来处理按钮的点击事件,并在弹窗中显示提示信息,并在 4 秒后跳转到另一个页面。这样,用户体验会更加友好和优化。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)