设计一个应用界面,至少包含选择列表、复选框或单选按钮等组件。 响应至少2种控件所生成的事件,并在界面上显示出应用状态的改变。
时间: 2024-05-22 10:13:01 浏览: 7
以下是一个简单的应用界面设计,包含一个选择列表和一组复选框:
![应用界面设计](https://i.imgur.com/MoMxj5z.png)
用户可以选择一个城市,并勾选需要的服务。当用户选择不同的城市时,下方的文本会实时更新,展示当前所选城市。当用户勾选或取消勾选复选框时,右侧的计算器会实时更新,展示当前所选服务的价格。
通过监听选择列表和复选框的事件,我们可以实现以下功能:
1. 当用户选择不同的城市时,下方的文本会实时更新。我们可以通过监听选择列表的change事件,获取当前所选城市的值,然后更新文本。
2. 当用户勾选或取消勾选复选框时,右侧的计算器会实时更新。我们可以分别监听每个复选框的change事件,获取当前是否勾选,然后计算出总价格并更新计算器。
下面是一个基于JavaScript的实现:
```html
<!DOCTYPE html>
<html>
<head>
<title>应用界面设计</title>
<script>
// 获取DOM元素
var citySelect = document.getElementById('citySelect');
var services = document.getElementsByName('service');
var price = document.getElementById('price');
// 定义价格表格
var prices = {
'北京': {
'保洁': 100,
'搬家': 500,
'维修': 200
},
'上海': {
'保洁': 120,
'搬家': 550,
'维修': 220
},
'广州': {
'保洁': 110,
'搬家': 520,
'维修': 210
}
};
// 更新文本和价格
function update() {
// 更新文本
var city = citySelect.value;
document.getElementById('cityText').textContent = city;
// 计算价格
var total = 0;
for (var i = 0; i < services.length; i++) {
if (services[i].checked) {
var service = services[i].value;
total += prices[city][service];
}
}
price.textContent = total;
}
// 监听选择列表的change事件
citySelect.addEventListener('change', update);
// 监听复选框的change事件
for (var i = 0; i < services.length; i++) {
services[i].addEventListener('change', update);
}
</script>
</head>
<body>
<h1>服务选择器</h1>
<p>请选择城市:</p>
<select id="citySelect">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
</select>
<p>您选择的城市是:<span id="cityText"></span></p>
<p>请选择服务:</p>
<input type="checkbox" name="service" value="保洁">保洁<br>
<input type="checkbox" name="service" value="搬家">搬家<br>
<input type="checkbox" name="service" value="维修">维修<br>
<p>总价格为:<span id="price">0</span>元</p>
</body>
</html>
```
以上代码实现了一个简单的服务选择器,用户可以选择城市并勾选需要的服务,界面会实时更新展示选择状态和价格。