익명 ·
2023.09.16 ·
조회 10,034
온라인/오프라인 상태 표시 배너
<p>오프라인일 경우 오프라인입니다 배너를 출력(고정), 온라인으로 전환될 경우 온라인입니다. 배너 3초 출력</p><p><img src="https://dsclub.kr/data/editor/2309/5baa8178660c7c9f8249cc59a6d92183_1694841580_6103.jpeg" title="5baa8178660c7c9f8249cc59a6d92183_1694841580_6103.jpeg" alt="5baa8178660c7c9f8249cc59a6d92183_1694841580_6103.jpeg"></p><p><span>*온라인</span></p><p><span><br style="clear:both;"></span><img src="https://dsclub.kr/data/editor/2309/5baa8178660c7c9f8249cc59a6d92183_1694841586_1684.jpeg" title="5baa8178660c7c9f8249cc59a6d92183_1694841586_1684.jpeg" alt="5baa8178660c7c9f8249cc59a6d92183_1694841586_1684.jpeg"><br style="clear:both;">*오프라인</p><p><br></p><div>(*그누보드에 적용할 경우 head.php의 </head>바로 위 또는 환경설정>기본환경설정>추가 script, css에 아래의 코드를 붙여넣기 하여 적용합니다.</div><div><br></div><div>[code]<!--온/오프라인 배너--><div><style></div><div> .offline-banner {</div><div> background-color: #f2f2f2;</div><div> color: #333;</div><div> text-align: center;</div><div> padding: 10px;</div><div> border-top: 1px solid #ccc;</div><div> position: fixed;</div><div> top: 0;</div><div> left: 0;</div><div> width: 100%;</div><div> z-index: 9999;</div><div> display: none;</div><div> }</div><div><br></div><div> .online-banner {</div><div> background-color: #4CAF50;</div><div> color: white;</div><div> text-align: center;</div><div> padding: 10px;</div><div> border-top: 1px solid #ccc;</div><div> position: fixed;</div><div> top: 0;</div><div> left: 0;</div><div> width: 100%;</div><div> z-index: 9999;</div><div> display: none;</div><div> }</div><div><br></div><div> .banner-content {</div><div> display: flex;</div><div> align-items: center;</div><div> justify-content: center;</div><div> }</div><div><br></div><div> .icon {</div><div> margin-right: 10px;</div><div> }</div><div></style></div><div><div id="status-banner" class="offline-banner"></div><div> <div class="banner-content"></div><div> <div class="icon"><span style="caret-color: rgb(255, 255, 255); color: rgb(255, 255, 255); font-family: "Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 14px; white-space: pre; -webkit-text-size-adjust: 100%; background-color: rgb(0, 0, 0);">📡</span></div></div><div> <div class="status-text">오프라인입니다.</div></div><div> </div></div><div></div></div><div><script></div><div> const statusBanner = document.getElementById('status-banner');</div><div> const statusText = document.querySelector('.status-text');</div><div><br></div><div> function checkOnlineStatus() {</div><div> if (navigator.onLine) {</div><div> statusText.textContent = '온라인입니다.';</div><div> statusBanner.classList.remove('offline-banner');</div><div> statusBanner.classList.add('online-banner');</div><div> setTimeout(() => {</div><div> statusBanner.style.display = 'none';</div><div> }, 3000);</div><div> } else {</div><div> statusText.textContent = '오프라인입니다.';</div><div> statusBanner.style.display = 'block';</div><div> statusBanner.classList.remove('online-banner');</div><div> statusBanner.classList.add('offline-banner');</div><div> }</div><div> }</div><div> checkOnlineStatus();</div><div> window.addEventListener('online', checkOnlineStatus);</div><div> window.addEventListener('offline', checkOnlineStatus);</div></script>[/code]</div>