要创建带有时间指示器的自动隐藏模式,您可以按照以下步骤进行操作:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<div id="timeIndicator" class="alert alert-primary" role="alert">
<span id="time"></span>
<span id="message"></span>
</div>
<div id="content">
<!-- 需要隐藏的内容 -->
</div>
function autoHideWithTimeIndicator() {
// 获取时间指示器和内容的引用
const timeIndicator = document.getElementById('timeIndicator');
const content = document.getElementById('content');
// 定义隐藏的时间间隔(以毫秒为单位)
const hideDuration = 5000; // 5秒
// 获取当前时间
const currentTime = new Date();
// 更新时间指示器
const timeElement = document.getElementById('time');
timeElement.textContent = currentTime.toLocaleTimeString();
// 更新内容
const messageElement = document.getElementById('message');
messageElement.textContent = '内容将在5秒后自动隐藏';
// 隐藏内容并重置时间指示器
setTimeout(function() {
content.style.display = 'none';
timeIndicator.style.display = 'none';
}, hideDuration);
}
// 在页面加载完毕后调用自动隐藏函数
window.addEventListener('load', autoHideWithTimeIndicator);
这段代码会在页面加载完成后自动隐藏内容,并在时间指示器上显示当前时间,然后在5秒后隐藏内容和时间指示器。
这是一个简单的示例,您可以根据需要自定义样式和功能。希望这能帮助到您!
关于腾讯云相关产品和产品介绍链接地址,请您参考腾讯云官方文档或访问腾讯云官方网站获取更多信息。
领取专属 10元无门槛券
手把手带您无忧上云