javascript实现简单电话薄

最新推荐文章于 2023-03-03 18:19:04 发布

安静宅男爱蓝猫

最新推荐文章于 2023-03-03 18:19:04 发布

阅读量407

点赞数

分类专栏： JS数据结构及ES6 文章标签： javascript html5

@By-蓝猫

本文链接：https://blog.csdn.net/qq_43355930/article/details/108802959

版权

JS数据结构及ES6 专栏收录该内容

19 篇文章 0 订阅

订阅专栏


<!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>

效果

在这里插入图片描述

安静宅男爱蓝猫

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
javascript实现简单电话薄

<!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>电话.
复制链接

扫一扫