根据时间JS切换网页背景颜色 - Jdeal

有些时侯为了丰富页面的显示效果，将页面制作成根据时间变换页面背景的样式，这样会使浏览者对此网站不会感觉厌倦，同时也会觉得网站制作的非常新颖。

本文通过Date对象的getHours()方法获得当前时间，然后根据不同的时间段来改变页面的背景颜色，当然也可以实现更改背景图片等操作，大家也可自行研究。

<script type="text/javascript">
function changeBg(){
  var date = new Date(),
  time = date.getHours();
  if(time > 6 && time < 18){
      document.body.style.backgroundColor="#fff222";}
  else{
      document.body.style.backgroundColor="#000";}
 }
changeBg();
</script>

当然，你也可以自行定义时间段，丰富各个时间段的背景色，我这边使用的是两个时间段。更多玩法欢迎补充。

本文由 Jdeal 创作，采用知识共享署名4.0 国际许可协议进行许可。
本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名。
最后编辑时间为: 2019-08-29 18:36

<script type="text/javascript"> function changeBg(){ var date = new Date(), time = date.getHours(); if(time > 6 && time < 18){ document.body.style.backgroundColor="#fff222";} else{ document.body.style.backgroundColor="#000";} } changeBg(); </script>