用javascript设计一个页面,点击【随机改变背景颜色】铵钮,可以随机设置盒子的背景,滑动滑动条可以改变盒子中文字大小(5px~50px)。
时间: 2024-03-26 11:34:18 浏览: 21
好的,我可以为您提供一个基于纯 JavaScript 的设计方案:
首先,我们需要一个 HTML 文件来设置页面结构,如下所示:
```html
<!DOCTYPE html>
<html>
<head>
<title>随机改变背景颜色</title>
<style>
#container {
width: 400px;
height: 400px;
margin: 0 auto;
text-align: center;
padding-top: 150px;
background-color: #fff;
}
#box {
width: 200px;
height: 200px;
margin: 0 auto;
text-align: center;
line-height: 200px;
font-size: 20px;
color: #fff;
background-color: #3498db;
}
#slider {
width: 300px;
margin: 20px auto;
}
</style>
</head>
<body>
<div id="container">
<div id="box">Hello, World!</div>
<input type="button" value="随机改变背景颜色" onclick="changeBgColor()">
<div id="slider"></div>
</div>
<script>
var box = document.getElementById('box');
var slider = document.getElementById('slider');
var colors = ["#3498db", "#2ecc71", "#e74c3c", "#f39c12", "#9b59b6", "#1abc9c", "#2c3e50", "#7f8c8d"];
// 初始化滑动条
slider.min = 5;
slider.max = 50;
slider.value = 20;
slider.addEventListener('input', function() {
box.style.fontSize = this.value + 'px';
});
// 改变背景颜色
function changeBgColor() {
var randomColor = colors[Math.floor(Math.random() * colors.length)];
box.style.backgroundColor = randomColor;
}
</script>
</body>
</html>
```
接下来,我们来分析一下这个 HTML 文件的代码。
首先,我们设置了一个 `container` 容器,用来包含整个页面。在 `container` 中,我们设置了一个 `box` 盒子,用来显示文字内容。在 `box` 中,我们设置了默认的背景颜色为 `#3498db`,文字大小为 `20px`。下面是一个点击按钮改变背景颜色的按钮,以及一个滑动条。
在 JavaScript 部分,我们使用了 `getElementById()` 方法来获取 `box` 和 `slider` 的 DOM 元素对象。我们将颜色数组提前设定好,并在点击按钮时随机生成一个颜色,并将其设置为 `box` 的背景颜色。
在滑动条部分,我们首先初始化滑动条的最小值、最大值和默认值。然后,我们使用 `addEventListener()` 方法来添加一个 `input` 事件监听器,当滑动条的值发生改变时,我们使用 `style.fontSize` 属性来改变 `box` 中的文字大小。
这样,我们就完成了一个使用纯 JavaScript 的页面设计,可以随机改变背景颜色,滑动滑动条可以改变盒子中文字大小(5px~50px)。