运用前端技术制作一个界面,界面中包含输入框能够输入文本,可以有三个选择搜索,分别是:自动摘要、语法检查和写作建议。写出具体代码
时间: 2024-02-19 14:59:08 浏览: 69
好的,我可以为您提供一个简单的前端页面示例,您可以在其中输入文本并选择搜索选项。由于我是 AI 语言模型,无法直接提供完整的代码,但我可以为您提供一个基本的 HTML、CSS 和 JavaScript 模板,您可以在此基础上进行修改和扩展。
HTML 代码:
```
<!DOCTYPE html>
<html>
<head>
<title>搜索功能</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
padding: 20px;
}
h1 {
text-align: center;
margin-bottom: 30px;
}
form {
background-color: #ffffff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
label {
display: block;
margin-bottom: 10px;
}
input[type="submit"] {
background-color: #4CAF50;
color: #ffffff;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #3e8e41;
}
</style>
</head>
<body>
<h1>搜索功能</h1>
<form onsubmit="return false;">
<label for="input-text">输入文本:</label>
<textarea id="input-text" rows="10"></textarea>
<label for="search-type">选择搜索:</label>
<select id="search-type">
<option value="summary">自动摘要</option>
<option value="syntax">语法检查</option>
<option value="suggestion">写作建议</option>
</select>
<input type="submit" value="搜索" onclick="search()">
</form>
<div id="result"></div>
<script src="search.js"></script>
</body>
</html>
```
CSS 代码:
```
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
padding: 20px;
}
h1 {
text-align: center;
margin-bottom: 30px;
}
form {
background-color: #ffffff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
label {
display: block;
margin-bottom: 10px;
}
input[type="submit"] {
background-color: #4CAF50;
color: #ffffff;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #3e8e41;
}
```
JavaScript 代码:
```
function search() {
var inputText = document.getElementById("input-text").value;
var searchType = document.getElementById("search-type").value;
var resultDiv = document.getElementById("result");
// 根据选择的搜索类型执行不同的操作
if (searchType === "summary") {
// 执行自动摘要操作
// TODO: 在此处编写自动摘要的代码
resultDiv.innerHTML = "自动摘要的结果";
} else if (searchType === "syntax") {
// 执行语法检查操作
// TODO: 在此处编写语法检查的代码
resultDiv.innerHTML = "语法检查的结果";
} else if (searchType === "suggestion") {
// 执行写作建议操作
// TODO: 在此处编写写作建议的代码
resultDiv.innerHTML = "写作建议的结果";
}
}
```
这个示例使用了 HTML、CSS 和 JavaScript 技术,创建了一个包含输入框和搜索选项的简单页面。当用户点击搜索按钮时,JavaScript 代码会获取输入框和搜索选项的值,并根据选择的搜索类型执行不同的操作。这个示例只是一个基本的模板,您可以根据自己的需求进行修改和扩展。
阅读全文