html单击循环变换背景颜色？_随笔

如果要实现点击按钮后循环变换背景颜色的效果，可以使用 JavaScript 的 setInterval 方法。例如，以下代码演示了如何实现这种效果：

<!DOCTYPE html>

<html>

<head>

<title>循环变换背景颜色</title>

<style>

body {

background-color: red

}

</style>

</head>

<body>

<button id="change-color">更改背景颜色</button>

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的时候背景从红色变为了棕色。

1、打开编辑器，新建一个HTML，并定义一个div，并给50px的高度：

2、接下来在style中设置div的样式，这里使用linear-gradient()编写一个默认方向的红蓝渐变，渐变的方向可以省略的：

3、如果想设置渐变方向为从右至左，只需要给linear-gradient加一个“to left”属性就可以了：

4、保存文件查看生成的指定方向的渐变，可以看到浏览器中显示出红蓝的渐变色。以上就是用在html中设置渐变色的步骤：

欢迎分享，转载请注明来源：内存溢出

html单击循环变换背景颜色？