你给我提供一段完整的UI交互界面代码
时间: 2023-08-09 22:12:21 浏览: 90
好的,以下是一个简单的 UI 交互界面示例,由 HTML、CSS 和 JavaScript 三部分组成:
```html
<!DOCTYPE html>
<html>
<head>
<title>UI 交互界面示例</title>
<style>
/* 样式表 */
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
h1 {
text-align: center;
color: #333;
}
.container {
margin: 0 auto;
max-width: 500px;
padding: 20px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}
form {
display: flex;
flex-direction: column;
}
label {
margin-bottom: 10px;
font-weight: bold;
}
input[type="text"], select {
padding: 10px;
border-radius: 5px;
border: none;
margin-bottom: 20px;
}
input[type="submit"] {
padding: 10px;
background-color: #333;
color: #fff;
border-radius: 5px;
border: none;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #555;
}
</style>
</head>
<body>
<div class="container">
<h1>UI 交互界面示例</h1>
<form>
<label for="name">姓名:</label>
<input type="text" id="name" name="name" placeholder="请输入姓名">
<label for="age">年龄:</label>
<input type="text" id="age" name="age" placeholder="请输入年龄">
<label for="gender">性别:</label>
<select id="gender" name="gender">
<option value="male">男</option>
<option value="female">女</option>
</select>
<input type="submit" value="提交">
</form>
<div id="result"></div>
</div>
<script>
// JavaScript 代码
const form = document.querySelector('form');
const result = document.querySelector('#result');
form.addEventListener('submit', (event) => {
event.preventDefault();
const name = document.querySelector('#name').value;
const age = document.querySelector('#age').value;
const gender = document.querySelector('#gender').value;
result.innerHTML = `您输入的信息是:姓名:${name},年龄:${age},性别:${gender}`;
form.reset();
});
</script>
</body>
</html>
```
这个示例展示了一个简单的表单,包括姓名、年龄和性别三项信息,当用户点击提交按钮时,JavaScript 代码会获取用户输入的信息,并在页面上显示出来。您可以根据自己的需要对示例进行修改和完善。