根据时间自动切换网页背景颜色或图片教程

前言

015859a9a216

有时候我们为了丰富网站的展示效果,将页面做成根据时间自动变换颜色或图片的样式,这样会使浏览者浏览网站不觉得疲倦,同时也会让我们的网站更加新颖。

实现原理及教程

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

直接将下面的代码放在页脚文件foot或者footer里面。

<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>

上面代码中time > 6 && time < 18为时间,指的是早上6点到晚上6点之间,可以自行修改时间。

#fff222和#000为颜色代码,可以自行改修颜色。

如果想换成图片的话就把上面的

document.body.style.backgroundColor="#fff222";
document.body.style.backgroundColor="#000";

替换成为

document.body.style.backgroundImage="url('背景图片地址')";
请登录后发表评论

    没有回复内容