编写一个漂亮的页面内置两个按钮控件、两个竖直的滑块控件、两个复选框控件,并且实现这些控件的事件处理程序,当按钮被按下的时候可以切换标签上的文字,拖动滑块时候标签上的文字可以改变,显示滑块的位置,整个页面居中显示,标签上的内容可以进行左右滑动
时间: 2023-11-22 08:54:57 浏览: 35
以下是一个基本的HTML页面,包含两个按钮控件、两个竖直的滑块控件、两个复选框控件。我们使用JavaScript来实现这些控件的事件处理程序。
```html
<!DOCTYPE html>
<html>
<head>
<title>控件示例</title>
<style>
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
label {
display: block;
margin-bottom: 20px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 200px;
text-align: center;
}
input[type="range"] {
-webkit-appearance: none;
margin: 10px 0;
width: 200px;
height: 10px;
background-color: #ddd;
outline: none;
border-radius: 5px;
overflow: hidden;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 16px;
height: 16px;
background-color: #333;
border-radius: 50%;
cursor: pointer;
}
input[type="checkbox"] {
margin-right: 10px;
}
</style>
</head>
<body>
<div class="container">
<label id="label">示例文本</label>
<button id="button1">按钮1</button>
<button id="button2">按钮2</button>
<input type="range" id="slider1" min="0" max="100" value="50">
<input type="range" id="slider2" min="0" max="100" value="50">
<label>
<input type="checkbox" id="checkbox1">复选框1
</label>
<label>
<input type="checkbox" id="checkbox2">复选框2
</label>
</div>
<script>
// 获取元素
var label = document.getElementById("label");
var button1 = document.getElementById("button1");
var button2 = document.getElementById("button2");
var slider1 = document.getElementById("slider1");
var slider2 = document.getElementById("slider2");
var checkbox1 = document.getElementById("checkbox1");
var checkbox2 = document.getElementById("checkbox2");
// 按钮事件处理程序
button1.addEventListener("click", function() {
label.innerHTML = "按钮1被按下了";
});
button2.addEventListener("click", function() {
label.innerHTML = "按钮2被按下了";
});
// 滑块事件处理程序
slider1.addEventListener("input", function() {
label.innerHTML = "滑块1的值为:" + slider1.value;
});
slider2.addEventListener("input", function() {
label.innerHTML = "滑块2的值为:" + slider2.value;
});
// 复选框事件处理程序
checkbox1.addEventListener("change", function() {
if (checkbox1.checked) {
label.innerHTML = "复选框1被选中了";
} else {
label.innerHTML = "复选框1被取消选中了";
}
});
checkbox2.addEventListener("change", function() {
if (checkbox2.checked) {
label.innerHTML = "复选框2被选中了";
} else {
label.innerHTML = "复选框2被取消选中了";
}
});
</script>
</body>
</html>
```
在这个示例中,我们使用了flex布局让整个页面居中显示。我们为label设置了一个固定宽度,并且使用了CSS属性white-space: nowrap、overflow: hidden和text-overflow: ellipsis来实现文本溢出时的省略号效果。我们还使用了样式优化滑块控件的样式。
在JavaScript部分,我们使用了addEventListener函数为各个控件添加事件处理程序。当按钮被按下时,我们可以通过innerHTML属性改变label的内容。当滑块值变化时,我们可以通过value属性获取当前滑块的位置,并且将其显示在label上。当复选框状态变化时,我们可以通过checked属性判断复选框是否被选中,并且相应地改变label的内容。