<!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、首先创建一个新的html文件，如图所示。
2、在html文件上找到body标签，在这个标签里创建一个div标签并设置class类为bg ，如图所示。
3、接着在title标签后创建style标签用来给bg类添加样式。在这给bg类设置了一个宽、高和背景颜色。
4、然后设置鼠标滑过div时背景变色。给bg样式类添加鼠标滑过：hover，然后设置鼠标滑过时的背景颜色。
5、最后实用浏览器打开，保存好html后使用浏览器打开，在鼠标没有滑过div时背景是红色的，当鼠标滑过div的时候背景从红色变为了棕色。
html中设置元素的背景色都是通过CSS中的background 属性来完成。
例如，给整个页面（body）设置背景色：body{background: #ddd}；如果要将图片作为背景色：body{background-image: url(1.jpg)}，其中url括号后面的是背景图片的链接。
拓展资料：
background 简写属性在一个声明中设置所有的背景属性。
background可以设置如下属性：
background-color 背景颜色
background-position 背景图像的位置
background-size 背景图片的尺寸
background-repeat 重复背景图像
background-origin 背景图片的定位区域
background-clip 背景的绘制区域
background-attachment 背景图像是否固定或者随着页面的其余部分滚动
background-image 背景图像
如果不设置其中的某个值，也不会出问题，通常建议使用这个属性，而不是分别使用单个属性，因为这个属性在较老的浏览器中能够得到更好的支持，而且需要键入的字母也更少。
代码：
效果：
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）