今天我們來講講如何使用HTML5實現(xiàn)一個簡單的通訊錄源代碼。
首先，我們需要先建立一個HTML文件，并寫下基本的框架和標簽：
<!DOCTYPE html> <html> <head> <title>通訊錄</title> </head> <body> <h1>通訊錄</h1> <form> <label>姓名：</label> <input type="text" name="name"><br> <label>電話：</label> <input type="text" name="telephone"><br> <input type="submit" value="添加"> </form> <ul id="contacts"> </ul> </body> </html>
在這里，我們建立了一個表單，通過輸入姓名和電話號碼來添加新的聯(lián)系人。
接下來，我們需要編寫一些JavaScript代碼來將用戶輸入的聯(lián)系人動態(tài)添加到通訊錄中。首先，我們需要先獲取表單和通訊錄的元素：
var form = document.querySelector('form');
var contacts = document.querySelector('#contacts');然后，我們需要在表單的提交事件中，阻止表單的默認行為，獲取輸入的姓名和電話號碼，創(chuàng)建一個新的聯(lián)系人，并將其添加到通訊錄中：
form.addEventListener('submit', function(event) {
event.preventDefault(); // 阻止表單的默認行為
// 獲取輸入的姓名和電話號碼
var name = form.elements.name.value;
var telephone = form.elements.telephone.value;
// 創(chuàng)建新的聯(lián)系人
var contact = document.createElement('li');
var text = document.createTextNode(name + ' (' + telephone + ')');
contact.appendChild(text);
// 將聯(lián)系人添加到通訊錄
contacts.appendChild(contact);
// 清空表單
form.reset();
});最后，我們需要引入HTML5的新特性LocalStorage來保存通訊錄中的聯(lián)系人，以便在下一次訪問時可以自動填充：
// 獲取本地存儲中保存的聯(lián)系人
var storedContacts = JSON.parse(localStorage.getItem('contacts')) || [];
// 將保存的聯(lián)系人添加到通訊錄中
storedContacts.forEach(function(contact) {
var li = document.createElement('li');
li.textContent = contact;
contacts.appendChild(li);
});
// 在添加新的聯(lián)系人時，將其保存到本地存儲中
form.addEventListener('submit', function(event) {
// 省略上述代碼
storedContacts.push(name + ' (' + telephone + ')');
localStorage.setItem('contacts', JSON.stringify(storedContacts));
});到這里，一個簡單的通訊錄源代碼就完成了，我們可以在瀏覽器中打開HTML文件，測試它的功能。