【JavaScript】自动改变网页背景色

最新推荐文章于 2022-12-16 13:10:42 发布

林多

最新推荐文章于 2022-12-16 13:10:42 发布

阅读量2.3k

点赞数 2

分类专栏： JavaScript 文章标签： html css 背景色自动 setTimeout

本文链接：https://blog.csdn.net/zxc024000/article/details/102784515

版权

JavaScript 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一个使用JavaScript定时器和CSS样式实现自动变换网页背景色的功能。通过设定day和night两种背景样式，配合setTimeout函数每10秒自动切换背景，演示了如何在网页中实现动态效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

自动改变网页背景色

最近在做一个功能时，需要一个自动变换背景的网页，进行功能验证。于是就是写了一个自动变色（背景）的网页。下面是些用到的知识点，作为总结。
知识点1：定时器

setTimeout("func", ms)

知识点2：css style，这里设定了day和night两类。day对应白色背景，night对应黑色背景。

<style type="text/css">
    .day {
     background-color:white;
    }
    .night {
     background-color:black;
   }

代码：

<!DOCTYPE html>
<html>
 <head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />   
  <style type="text/css">
    .day {
     background-color:white;
    }
    .night {
     background-color:black;
 }
</style> 
 </head> 
 <body> 
  <script type="text/javascript">
i = 1
function changeBackGround()
{
  i++;
  if (i % 2 == 0) {
    switchClass('night');
  }
  else {
    switchClass('day');
  }

  setTimeout("changeBG()", 10000)
}

function switchClass(name)
{
  document.body.className =name;
}
changeBackGround()
</script> 
 </body>
</html>