オンライン・オフラインを検知して表示するサンプル

CSS

#status {
  padding: 1em;
  text-align: center;
}
.online {
  background: lightgreen;
}
.offline {
  background: lightpink;
}

HTML

  <div id="status"></div>

JavaScript

function updateOnlineStatus() {
  const status = document.getElementById('status')
  const onlineStatus = navigator.onLine ? 'online' : 'offline'
  status.className = onlineStatus
  status.textContent = onlineStatus
}

window.addEventListener('DOMContentLoaded', () => {
  updateOnlineStatus()
  setInterval(() => updateOnlineStatus(), 1000)
})

元記事を表示する