javascript实现简单电话薄
程序员文章站
2022-04-22 10:52:57
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>电话薄</title>
<style>
.phone{
width: 100vw;
height: 80px;
font-size: 16px;
text-align: center;
line-height: 80px;
border-bottom: 2px solid red
}
</style>
</head>
<body>
<div class="phone">电话薄</div>
<input id="insert" type="button" value="添加">
<input id="find" type="button" value="按名字查找">
<input id="find1" type="button" value="按手机号查找">
<input id="find2" type="button" value="按姓氏查找">
</body>
<script>
let insert = document.getElementById('insert');
let find = document.getElementById('find');
let find1 = document.getElementById('find1');
let find2 = document.getElementById('find2');
let people =[];
let map = new Map();
insert.onclick = function(){
let name = prompt('请添加电话薄名字');
let mophone = prompt('请添加机主的手机号');
map.set(name,mophone);
// let ul = document.createElement('ul');
// for(let [key,value] of map){
// ul.innerHTML = `<li>姓名:${key} ====>${value}</li>`
// }
console.log(map)
}
//按名字查找
find.onclick = function(){
let name = prompt('请输入你要查找的人名');
for(let [key,value] of map){
if(key == name){
console.log(`该机主的电话号码是${value}`);
}
}
}
//按手机号找名字
find1.onclick = function(){
let phone = prompt('请输入你要查找的手机号');
for(let [key,value] of map){
if(value == phone){
console.log(`该机主的名字是${key}`);
}
}
}
//按姓查找
find2.onclick = function(){
let name = prompt('请输入你要查找的姓氏');
for(let [key,value] of map){
let res = key +'';
let arr = res.split('');
if(arr[0] == name ){
console.log(`姓名：${key} 电话号码：${value}`)
}
}
}
</script>
</html>
效果
下一篇： 杨辉三角