原生 JavaScript 实现可刷新排序的笔记列表页面

以下是一个使用原生 JavaScript 实现的笔记列表页面示例： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>笔记列表</title> </head> <body> <h2>笔记列表</h2> <ul id="noteList"></ul> <button onclick="refreshNotes()">刷新</button> <script> // 初始化加载笔记列表 loadNotes(); function loadNotes() { for (let i = 1; i <= 10; i++) { fetch(`/note/${i}`) .then(response => response.json()) .then(note => { addNoteToList(note); }) .catch(error => { console.error(`获取笔记 ${i} 失败: ${error}`); }); } } function addNoteToList(note) { const list = document.getElementById('noteList'); const li = document.createElement('li'); li.innerHTML = `<a href="#">${note.title}</a> - 最后更改时间: ${note.lastModified}`; li.addEventListener('click', () => showNoteDetails(note)); list.appendChild(li); } function showNoteDetails(note) { // 在此处实现显示笔记详细信息的逻辑 console.log(`显示笔记 ${note.id} 的详细信息`); } function refreshNotes() { const list = document.getElementById('noteList'); list.innerHTML = ''; loadNotes(); } </script> </body> </html> ``` 在上述代码中，`loadNotes` 函数用于初始加载 10 个笔记的信息，并将其添加到列表中。`addNoteToList` 函数用于将单个笔记添加到列表项中。`refreshNotes` 函数用于点击刷新按钮时清空列表并重新加载笔记信息。 ######[AI写代码神器 | 486点数解答 | 2024-10-23 17:52:51]

服务商

更多选项

快捷项

自定义