根据时间JS切换网页背景颜色
in Skill with 268 Views

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

in Skill with 269 Views

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

本文通过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>

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

如果本文对您有用的话,欢迎在下方留言评论哦~
发表评论
选择表情