html实现自动分类功能代码
时间: 2023-08-28 11:06:07 浏览: 50
要实现自动分类功能,你需要使用JavaScript来实现。以下是一个例子:
HTML代码:
```
<form>
<input type="text" id="input-category" placeholder="输入分类名称">
<button type="button" onclick="addCategory()">添加分类</button>
</form>
<div id="category-list"></div>
```
JavaScript代码:
```
var categories = [];
function addCategory() {
var input = document.getElementById("input-category");
var category = input.value.trim();
if (category.length > 0 && categories.indexOf(category) === -1) {
categories.push(category);
input.value = "";
renderCategories();
}
}
function renderCategories() {
var categoryList = document.getElementById("category-list");
categoryList.innerHTML = "";
for (var i = 0; i < categories.length; i++) {
var category = categories[i];
var categoryElement = document.createElement("div");
categoryElement.textContent = category;
categoryList.appendChild(categoryElement);
}
}
```
这段代码创建了一个表单,其中包含一个输入框和一个按钮。当用户点击按钮时,它会调用addCategory函数。这个函数会获取输入框的值并将其添加到categories数组中(如果它不已经存在)。然后它会清空输入框并调用renderCategories函数来重新渲染分类列表。
renderCategories函数遍历categories数组并为每个类别创建一个新的DIV元素。然后,它将每个元素添加到category-list DIV中。
请注意,这只是一个简单的示例。实际上,你需要为每个类别添加一个删除按钮,以便用户可以删除它们。你还需要将类别保存到数据库或其他持久存储中,以便用户可以在下次访问时看到它们。