1.自定义函数,完成如下页面效果。每点击一次,显示不同的颜色和文字。提示:如何可以实现循环切换的效果?
时间: 2024-05-04 18:15:21 浏览: 24
以下是一个示例代码,可以实现循环切换颜色和文字的效果。
```html
<!DOCTYPE html>
<html>
<head>
<title>循环切换颜色和文字</title>
<style>
body {
background-color: #fff;
text-align: center;
font-size: 24px;
margin: 100px;
}
</style>
<script>
function toggleColor() {
var colors = ['#f00', '#0f0', '#00f', '#ff0', '#f0f', '#0ff'];
var texts = ['红色', '绿色', '蓝色', '黄色', '紫色', '青色'];
var index = parseInt(Math.random() * colors.length);
document.body.style.backgroundColor = colors[index];
document.body.innerHTML = texts[index];
}
</script>
</head>
<body onclick="toggleColor()">
点击页面切换颜色和文字
</body>
</html>
```
在上面的代码中,我们定义了一个 `toggleColor()` 函数,每次点击页面时都会执行这个函数。在函数中,我们定义了一个颜色数组和一个文字数组,然后通过 `Math.random()` 方法来随机获取一个数组下标,从而实现循环切换的效果。最后,我们将获取到的颜色值和文字值分别设置为页面的背景色和文本内容。