用js实现页面展示所有任务链接并且可以新建任务
时间: 2024-05-16 19:19:19 浏览: 11
您好!要实现页面展示所有任务链接并且能够新建任务,您可以使用以下的JavaScript代码:
首先,您需要一个用于展示任务的HTML元素,比如一个列表(`<ul>`)和一个输入框(`<input>`):
```html
<ul id="taskList"></ul>
<input type="text" id="newTaskInput">
<button onclick="addNewTask()">添加任务</button>
```
然后,在JavaScript中,您可以使用一个数组来保存所有的任务:
```javascript
var tasks = [];
```
接下来,您可以编写一个用于展示所有任务的函数,该函数会遍历任务数组,并将每个任务作为链接添加到列表中:
```javascript
function displayTasks() {
var taskList = document.getElementById("taskList");
taskList.innerHTML = ""; // 清空列表
for (var i = 0; i < tasks.length; i++) {
var task = tasks[i];
var listItem = document.createElement("li");
var link = document.createElement("a");
link.href = task.url;
link.textContent = task.name;
listItem.appendChild(link);
taskList.appendChild(listItem);
}
}
```
然后,您可以编写一个函数来添加新任务。该函数将获取输入框中的值,并将其添加到任务数组中,然后调用`displayTasks()`函数来更新任务列表:
```javascript
function addNewTask() {
var newTaskInput = document.getElementById("newTaskInput");
var newTaskName = newTaskInput.value;
if (newTaskName !== "") {
var newTask = {
name: newTaskName,
url: "#" // 这里将url设置为#,您可以根据需求修改
};
tasks.push(newTask);
displayTasks();
newTaskInput.value = ""; // 清空输入框
}
}
```
现在,当用户在输入框中输入新的任务名称并点击“添加任务”按钮时,新任务将被添加到任务数组中,并且任务列表将被更新。
请注意,上述代码仅为示例,您可能需要根据您的实际需求进行适当的修改。