用javascript写一个通讯录
时间: 2024-05-13 10:15:56 浏览: 6
好的,以下是一个简单的通讯录示例:
HTML:
```html
<!DOCTYPE html>
<html>
<head>
<title>通讯录</title>
</head>
<body>
<h1>通讯录</h1>
<form>
<label for="name">姓名:</label>
<input type="text" id="name" name="name"><br><br>
<label for="phone">电话:</label>
<input type="text" id="phone" name="phone"><br><br>
<button type="button" onclick="addContact()">添加联系人</button>
</form>
<br>
<h2>联系人列表</h2>
<ul id="contactList"></ul>
<script src="script.js"></script>
</body>
</html>
```
JavaScript:
```javascript
// 通讯录数组
var contacts = [];
// 添加联系人函数
function addContact() {
// 获取表单输入
var name = document.getElementById("name").value;
var phone = document.getElementById("phone").value;
// 创建联系人对象
var contact = {
name: name,
phone: phone
};
// 添加联系人到数组
contacts.push(contact);
// 清空表单输入
document.getElementById("name").value = "";
document.getElementById("phone").value = "";
// 更新联系人列表
updateContactList();
}
// 更新联系人列表函数
function updateContactList() {
// 获取联系人列表元素
var contactList = document.getElementById("contactList");
// 清空列表
contactList.innerHTML = "";
// 遍历联系人数组,创建列表项并添加到列表
for (var i = 0; i < contacts.length; i++) {
var listItem = document.createElement("li");
listItem.innerHTML = contacts[i].name + " - " + contacts[i].phone;
contactList.appendChild(listItem);
}
}
```
这个示例实现了添加联系人和展示联系人列表的基本功能。你可以基于这个示例进行修改和扩展。