您的当前位置:首页正文

JS控制按钮自动切换背景颜色(可暂停)_页面背景

2023-12-03 来源:布克知识网

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

小编还为您整理了以下内容,可能对您也有帮助:

JavaScript中怎么设置一个按钮,然后点击一次这个按钮,整个背景颜色就变一下,红黄蓝依次变

1、html代码:<button onclick='demo()'>click me!</button>

2、js代码:var index=0;

function demo(){

  var colorArr=['red','yellow','blue'];

  event.target.style.backgroundColor = colorArr[index%3];

  index+=1;

}

js实现五个按钮,点击每个按钮屏幕背景变成特定的每个颜色(红黄粉绿蓝)

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

</head>

<body>

<button onclick="color('red')">red</button>

<button onclick="color('yellow')">yellow</button>

<button onclick="color('pink')">pink</button>

<button onclick="color('green')">green</button>

<button onclick="color('blue')">blue</button>

</body>

<script type="text/javascript">

function color (c) {

document.body.style.backgroundColor=c;

}

</script>

</html>

js 通过button按钮onclick事件改变背景颜色 如何切换性改变?

x0dx0ax0dx0a x0dx0a function mychange()x0dx0a {x0dx0avar color = document.getElememtById("colorType").value;x0dx0aif(color == "red")x0dx0a{x0dx0ax0dx0a document.getElementById("div1").style.background="blue";x0dx0a document.getElememtById("colorType").value = "blue";x0dx0a}x0dx0aelse if(color == "blue")x0dx0a{x0dx0a document.getElementById("div1").style.background="red";x0dx0a document.getElememtById("colorType").value = "red";x0dx0a}x0dx0ax0dx0a}x0dx0ax0dx0ax0dx0a x0dx0a

x0dx0ax0dx0a x0dx0a
x0dx0a x0dx0ax0dx0ax0dx0ax0dx0a这是一种简单的方式实现。还有很多中解决方案,你可以再拓展一下。

本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

Top