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

0.0/0人
免费

更新时间:2022-11-26 01:30:18

所属分类:其他资源

评论回复:0

 

暂无演示 下载权限

根据时间自动切换网页背景颜色或图片代码-第3张插图

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

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

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

  1. <script type="text/javascript">
  2. function changeBg(){
  3. var date = new Date(),
  4. time = date.getHours();
  5. if(time > 6 && time < 18){
  6. document.body.style.backgroundColor="#fff222";}
  7. else{
  8. document.body.style.backgroundColor="#000";}
  9. }
  10. changeBg();
  11. </script>

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

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

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

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

替换成

  1. document.body.style.backgroundImage="url('背景图片地址')";

百度
- MB

相关推荐

首页 导航 会员 客服