온라인/오프라인 상태 표시 배너
페이지 정보
작성자 익명 (192.♡.0.1) 작성일 23-09-16 14:24 조회 5,220 댓글 1본문
오프라인일 경우 오프라인입니다 배너를 출력(고정), 온라인으로 전환될 경우 온라인입니다. 배너 3초 출력
*온라인
*오프라인
(*그누보드에 적용할 경우 head.php의 </head>바로 위 또는 환경설정>기본환경설정>추가 script, css에 아래의 코드를 붙여넣기 하여 적용합니다.
[code]<!--온/오프라인 배너-->
<style>
.offline-banner {
background-color: #f2f2f2;
color: #333;
text-align: center;
padding: 10px;
border-top: 1px solid #ccc;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 9999;
display: none;
}
.online-banner {
background-color: #4CAF50;
color: white;
text-align: center;
padding: 10px;
border-top: 1px solid #ccc;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 9999;
display: none;
}
.banner-content {
display: flex;
align-items: center;
justify-content: center;
}
.icon {
margin-right: 10px;
}
</style>
<div id="status-banner" class="offline-banner">
<div class="banner-content">
<div class="icon">📡</div>
<div class="status-text">오프라인입니다.</div>
</div>
</div>
<script>
const statusBanner = document.getElementById('status-banner');
const statusText = document.querySelector('.status-text');
function checkOnlineStatus() {
if (navigator.onLine) {
statusText.textContent = '온라인입니다.';
statusBanner.classList.remove('offline-banner');
statusBanner.classList.add('online-banner');
setTimeout(() => {
statusBanner.style.display = 'none';
}, 3000);
} else {
statusText.textContent = '오프라인입니다.';
statusBanner.style.display = 'block';
statusBanner.classList.remove('online-banner');
statusBanner.classList.add('offline-banner');
}
}
checkOnlineStatus();
window.addEventListener('online', checkOnlineStatus);
window.addEventListener('offline', checkOnlineStatus);
</script>[/code]
좋아요60
이 글을 좋아요하셨습니다
2kat님의 댓글
?