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

html-css08

html单击循环变换背景颜色？,第1张

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

<!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.form表单提交，将form的action值重新赋值

let inputVal = document.querySelector("input[type='text']").value

let href1 = "http://oadi.link/" + inputVal

document.querySelector('form ').action = href1

2. 不用form表单提交，用a标签的href来实现吧

let A = document.createElement("a")

let inputVal = document.querySelector("input[type='text']").value

A.setAttribute("href","http://oadi.link/"+inputVal )

A.setAttribute("target","_blank")

A.click()

上面的方法都要在button 的点击事件里去操作，仅提供一个思路。