编写一个通讯录网页

程序员天道

已于 2023-12-09 21:29:17 修改

阅读量445

点赞数 3

文章标签： html5 css javascript

于 2023-12-02 10:54:53 首次发布

本文链接：https://blog.csdn.net/weixin_66395717/article/details/134749127

版权

1.HTML部分要求有标题栏/操作栏/表格区域/版权区域

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>通讯录网页</title>
        <link rel="stylesheet" type="text/css" href="../css/Contacts_1.3.css">
    </head>
    <body>
        <div class="Title">
            <h1>通讯录</h>
        </div>
        <hr>
        <div class="Button">
            <input type="button" value="添加" class="addTo" onclick="addTo()">
            <input type="button" value="删除" class="Delete" onclick="Delete()">
        </div>
        <div>
            <table>
                <thead>
                    <tr>
                        <th><input type="checkbox" id="ca" onclick="pitchon()"><span name="ss">全选</span></th>
                        <th>姓名</th>
                        <th>电话</th>
                        <th>邮箱</th>
                        <th>QQ号</th>
                        <th>微信</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><input type="checkbox" id="ca" name="cars" onclick="calculatAll()"></td>
                        <td>张三</td>
                        <td>12345678912</td>
                        <td>234567891@qq.com</td>
                        <td>234567891</td>
                        <td>ZS12345678912</td>
                    </tr>
                    <tr>
                        <td><input type="checkbox" id="ca" name="cars" onclick="calculatAll()"></td>
                        <td>李四</td>
                        <td>12345678923</td>
                        <td>3456789120@qq.com</td>
                        <td>3456789120</td>
                        <td>LS12345678923</td>
                    </tr>
                    <tr>
                        <td><input type="checkbox" id="ca" name="cars" onclick="calculatAll()"></td>
                        <td>王二麻子</td> 
                        <td>12345678934</td>
                        <td>2456789135@qq.com</td>
                        <td>2456789135</td>
                        <td>WEMZ12345678934</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div id="myModal" class="modal">
            <div class="modal-content">
                <span class="close" onclick="closeModal()">&times;</span>
                <h2>添加联系人</h2>
                <form>
                    <label for="name">姓名：</label>
                    <input type="text" id="name" name="name" onkeypress="handleEnterKeyPress(event)"><br><br>
                    <label for="phone">电话：</label>
                    <input type="text" id="phone" name="phone" onkeypress="handleEnterKeyPress(event)"><br><br>
                    <label for="email">邮箱：</label>
                    <input type="text" id="email" name="email" onkeypress="handleEnterKeyPress(event)"><br><br>
                    <label for="qq">QQ号：</label>
                    <input type="text" id="qq" name="qq" onkeypress="handleEnterKeyPress(event)"><br><br>
                    <label for="wechat">微信：</label>
                    <input type="text" id="wechat" name="wechat" onkeypress="handleEnterKeyPress(event)"><br><br>
                    <input type="button" value="确认" onclick="addContact()">
                </form>
            </div>
        </div>
        <div class="copyright">
            <p>作者：天道</p>
            <p>时间：2023-11-10</p>
            <p>版本：通讯录1.3版本</p>
            <p>Copyright ©2023版权所有，侵权必究</p>
        </div>
        <script src="../js/Contacts_1.3.js">    
        </script>
    </body>
</html>

2..CSS部分要求综合使用字体/背景色/渐变/阴影/内外边距/边框/边框弧度等技
术将网页效果做的好看一些

body{
    font-family:'Arial',sans-serif;
    margin: 0;
    padding: 0;
}

.Title{
    background-color: #3498db;
    color:white;
    text-align: center;
}

.Button{
    background-color: #2ecc71;
    padding:10px;
    text-align: center;
}

.addTo{
    background-color: rgb(55, 158, 59);
    border:none;
    color: white;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    transition-duration: 0.4s;
    cursor: pointer;
}

.addTo:hover{
    background-color: #4CAF50;
    color:white;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}

.Delete{
    background-color:aliceblue;
    background:aliceblue;
    color:#9b1a1a;
    border:none;
    padding:16px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    transition-duration: 0.4s;
    cursor: pointer;
}

.Delete:hover{
    background-color: #222323;
    color: white;
    box-shadow: 0 12px 16px 0 rgba(151, 134, 134, 0.24),0 17px 50px 0 rgba(201, 190, 190, 0.19);
}

table{
    border-collapse: collapse;
    width:100%;
    margin-top: 10px;
}

th, td{
    border:1px solid #ddd;
    padding:10px;
    text-align: left;
}

th{
    background-color: #3498db;
    color:white;
}

tr:nth-child(even){
    background-color: #f9f9f9;
}

.copyright{
    font-size: 14px;
    color:#999;
    text-align: center;
    background-color: #333;
    padding:10px;
}

#ca{
    transform:scale(1.5);
    margin:0;
}

#myModal{
    display:none;
    position:fixed;
    z-index:1;
    left:0;
    top:0;
    width:100%;
    height:100%;
    overflow:auto;
    background-color:rgba(0,0,0,0.4);
}

.modal-content{
    background-color:#fefefe;
    margin:15% auto;
    padding:20px;
    border:1px solid #888;
    width:50%;
    text-align: center;
}

.close{
    color:#aaa;
    float:right;
    font-size:28px;
    font-weight: bold;
}

.close:hover,
.close:focus{
    color:black;
    text-decoration: none;
    cursor:pointer;
}

3.JS部分要求实现添加通讯录的一条记录，展示通讯录中同学信息，信息至少
含姓名/电话/邮箱/QQ号等

//打开模态框
function addTo(){
    var modal=document.getElementById('myModal');
    modal.style.display="block";
}

//关闭模态框
function closeModal(){
    var modal=document.getElementById('myModal');
    modal.style.display="none";
}

//添加联系人
function addContact(){
    var name=document.getElementById('name').value;
    var phone=document.getElementById('phone').value;
    var email=document.getElementById('email').value;
    var qq=document.getElementById('qq').value;
    var wechat=document.getElementById('wechat').value;

    var table=document.querySelector('table tbody');
    var newRow=table.insertRow(-1);//

    //单元格插入
    var checkboxCell=newRow.insertCell(0);
    var nameCell=newRow.insertCell(1);
    var phoneCell=newRow.insertCell(2);
    var emailCell=newRow.insertCell(3);
    var qqCell=newRow.insertCell(4);
    var wechatCell=newRow.insertCell(5);

    checkboxCell.innerHTML='<input type="checkbox" id="ca" name="cars" onclick="calculatAll()">'
    nameCell.innerHTML=name;
    phoneCell.innerHTML=phone;
    emailCell.innerHTML=email;
    qqCell.innerHTML=qq;
    wechatCell.innerHTML=wechat;

    document.getElementById('name').value='';
    document.getElementById('phone').value='';
    document.getElementById('email').value='';
    document.getElementById('qq').value='';
    document.getElementById('wechat').value='';

    closeModal();

}

//键盘确认事件事件
function handleEnterKeyPress(event){
    if(event.key=='Enter'){
        event.preventDefault();
        addContact();
    }
}

document.getElementById('name').addEventListener('keypress',handleEnterKeyPress);
document.getElementById('phone').addEventListener('keypress',handleEnterKeyPress);
document.getElementById('email').addEventListener('keypress',handleEnterKeyPress);
document.getElementById('qq').addEventListener('keypress',handleEnterKeyPress);
document.getElementById('wechat').addEventListener('keypress',handleEnterKeyPress);

//删除按钮事件
function Delete(){
    var checkboxes = document.querySelectorAll('input[name="cars"]:checked');
    checkboxes.forEach(function(checkbox){
        var row=checkbox.closest("tr");
        row.parentNode.removeChild(row);
    })
}

//全选按钮事件
function pitchon(){
    var check=document.getElementsByName('cars');
    var alc=document.getElementById('ca');
    var txt=document.getElementsByClassName('ss');
    var isd=alc.checked;
    if(isd){
        txt[0]=innerText="取消全选";
    }else{
        txt[0]=innerText="全选";
    }
    for(var i=0;i<check.length;i++){
        check[i].checked=isd;
    }
}

//选中复选框事件
function calculatAll(){
    console.log('复选框已选中!');
}

效果图