SOURCE

    {
      let body = document.body;
      const pause = function() {
        let color = '#283747';
        if (body.style.background != color) {
          body.style.transition = '';
          body.style.background = color;
          body.innerText = '你离开了';
        }
      };
      const resume = function() {
        let color = '#409EFF';
        if (body.style.background != color) {
          body.style.transition = 'all .6s ease';
          body.style.background = color;
          body.innerText = '你回来了\n尝试切换标签页，以及激活置顶其它应用窗口';
        }
      };
      resume();
      document.onvisibilitychange = function() {
        let visible = document.visibilityState == 'visible';

        if (visible) {
          setTimeout(() => {
            resume();
            window.onblur = pause;
            window.onfocus = resume;
          }, 100);
        } else {
          pause();
          window.onblur = null;
          window.onfocus = null;
        }
      };
      window.onblur = pause;
      window.onfocus = resume;
    }

body {
    background: #409EFF;
    text-align: center;
    color: #fff;
    padding-top: 100px;
}