亲爱的c知道,我将测试你,你能否用html做一个弹窗,弹弹窗是一进入就弹出,需要一个关闭x且能成功关闭,标题写公告,标题右边希望可以搞一个现在时间,内容是什么,ui希望好看点
时间: 2024-05-11 12:19:17 浏览: 80
一款很漂亮的首页弹窗公告HTML代码分享
当然可以的!以下是一个简单的 HTML 弹窗:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>公告</title>
<style>
body {
font-family: Arial, sans-serif;
font-size: 16px;
background-color: #f5f5f5;
}
.modal {
background-color: #ffffff;
border-radius: 5px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
max-width: 600px;
margin: 50px auto;
padding: 20px;
position: relative;
text-align: center;
overflow: hidden;
}
.modal-header {
font-size: 24px;
font-weight: bold;
margin: 0;
padding-bottom: 10px;
border-bottom: 1px solid #cccccc;
}
.modal-header .modal-time {
float: right;
font-size: 14px;
color: #999999;
}
.modal-content {
margin-top: 20px;
}
.modal-close {
position: absolute;
top: 10px;
right: 10px;
font-size: 20px;
color: #cccccc;
cursor: pointer;
}
</style>
</head>
<body>
<div class="modal">
<div class="modal-header">
公告
<div class="modal-time" id="modal-time"></div>
<span class="modal-close" onclick="closeModal()">×</span>
</div>
<div class="modal-content">
<p>这里是公告的内容。</p>
</div>
</div>
<script>
// 获取当前时间
function getCurrentTime() {
var now = new Date();
var year = now.getFullYear();
var month = now.getMonth() + 1;
var day = now.getDate();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
var time = year + "/" + month + "/" + day + " " + hour + ":" + minute + ":" + second;
return time;
}
// 显示当前时间
document.getElementById("modal-time").innerHTML = getCurrentTime();
// 关闭弹窗
function closeModal() {
var modal = document.querySelector(".modal");
modal.parentNode.removeChild(modal);
}
</script>
</body>
</html>
```
这个弹窗会在页面加载完毕后自动弹出,并且你可以通过点击右上角的 `x` 来关闭它。弹窗标题为“公告”,右侧显示当前时间,内容可以自行修改。同时,我也为弹窗添加了一些简单的样式,让它看起来更美观。
阅读全文