<!DOCTYPE html>
<html>
<head>
<title>循环变换背景颜色</title>
<style>
body {
background-color: red
}
</style>
</head>
<body>
<button id="change-color">更改背景颜色</button>
<script>
var colors = ['red', 'green', 'blue']
var index = 0
// 为“更改背景颜色”按钮添加点击事件监听器
document.getElementById('change-color').addEventListener('click', function() {
// 使用 setInterval 方法循环变换背景颜色
setInterval(function() {
document.body.style.backgroundColor = colors[index]
index = (index + 1) % colors.length
}, 1000)
})
</script>
</body>
</html>
在上面的代码中，我们首先定义了一个颜色数组 colors，其中包含了要变换的颜色。然后，我们使用 addEventListener 方法为“更改背景颜色”按钮添加了点击事件监听器。当用户点击该按钮时，会调用回调函数，并在函数内部调用 setInterval 方法。
1、建立一个静态页命名为change.html ，标题为js导航点击的怎么同时变图片跟字体颜色。
2、设置一个简易的导航栏。
3、加css 控制菜单的样式，并加入背景图片。
4、为li添加id，创建函数fun ，并传递传递参数。
5、为函数加入点击导航改变背景图片的代码element.style.backgroundImage="url(images/bg2.png)"
6、加入改变文字大小的代码
element.style.color="black"
//修改文字大小
element.style.fontSize="18px"
7、然后就完成了。
1、首先将网页文件和需要到的图片放到同一个文件中。
2、在文件夹中，鼠标右键单击空白处选择打开“文本文档”。
3、然后打开文本文档，点击输入下方的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"><!--编码类型-->
<title>网页标题</title><!--网页标题-->
</head>
<body>
4、然后点击打开左上角文件中的“另存为”，重命名新建文本文档为index.html，回车确定。
5、然后选择想要的背景图片。
6、点击index.html，右键浏览器打开预览效果。
7、然后就完成了。
