js仿微信聊天

干饭选手的码农

已于 2022-08-22 17:57:42 修改

阅读量1.2k

点赞数 11

文章标签： javascript 微信前端

于 2022-08-22 17:43:10 首次发布

本文链接：https://blog.csdn.net/qq_39462734/article/details/126470677

版权

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>仿微信聊天</title>
    <link rel="stylesheet" href="css/zhal.css">
</head>

<body>
    <div class="max">
        <!-- 头部部分 -->
        <header class="hed">
            <span class="iconfont">&#xe603;</span>
            <h3>蟹老板</h3>
            <span class="iconfont">&#xec1c;
            </span>
        </header>
        <!-- 主体部分 -->
        <ul class="vx_main">
            <li class="wite">
                <a href="JavaScript:;"><img src="images/dongm.webp" alt=""></a>
                <p>有新的工作要安排你做</p>
            </li>
            <li class="wite">
                <a href="JavaScript:;"><img src="images/dongm.webp" alt=""></a>
                <p>尽量明天发给我尽量明天发给我尽量明天发给我尽量明天发给我尽量明天发给我尽量明天发给我尽量明天发给我尽量明天发给我尽量明天发给我尽量明天发给我尽量明天发给我尽量明天发给我尽量明天发给我尽量明天发给我尽量明天发给我尽量明天发给我尽量明天发给我尽量明天发给我尽量明天发给我
                </p>
            </li>


            <li class="gree">
                <a href="JavaScript:;"><img src="images/ma.webp" alt=""></a>
                <p>好的
                </p>
            </li>
            <li class="gree">
                <a href="JavaScript:;"><img src="images/ma.webp" alt=""></a>
                <p>明天发
                </p>
            </li>
        </ul>
        <!-- 底部 -->
        <footer class="vx_fs">
            <span class="iconfont">&#xe618;
            </span>
            <textarea></textarea>
            <a href="JavaScript:;" class="fasong">发送</a>
        </footer>
    </div>
</body>

</html>
<script>
    //1.获取到发送按钮
    var fasong = document.querySelector('.fasong');
    //获取到ul
    var uls = document.querySelector('ul');
    var index = 0;
    fasong.onclick = function () {
        var val = document.querySelector('textarea').value;
        //document.querySelector('textarea').value = ''
        if (val == '' || val == null) {
            //放着不需要
        } else {
            index++;
            var lis = document.createElement('li');
            var li1 = document.createElement('li');
            li1.innerText = getTim();
            lis.setAttribute('id', 'aa' + index)
            lis.setAttribute('class', 'gree');
            var as = document.createElement('a');
            as.setAttribute('href', 'JavaScript:;');
            var imgs = document.createElement('img');
            imgs.src = 'images/ma.webp';
            var p1 = document.createElement('p');
            p1.innerText = val;
            as.appendChild(imgs);
            lis.appendChild(as);
            lis.appendChild(p1);
            uls.appendChild(li1);
            uls.appendChild(lis);
            this.setAttribute('href', '#aa' + index)
            // this.setAttribute('href', 'JavaScript:;')

        }

    }
    //
    function getTim() {
        var date = new Date();
        // var year = date.getFullYear();//年
        var month = date.getMonth() + 1;//月
        var r = date.getDate();//日
        var day = date.getDay();//星期
        var days = ''
        switch (day) {
            case 1:
                days = "星期一";
                break;
            case 2:
                days = "星期二"
                break;

            case 3:
                days = "星期三";
                break;

            case 4:
                days = "星期四";
                break;

            case 5:
                days = "星期五";
                break;

            case 6:
                days = "星期六";
                break;

            case 0:
                days = "星期天";
                break;

        }
        var hous = date.getHours();//小时
        var minutes = date.getMinutes();//分钟
        var seconds = date.getSeconds();//当前秒
        //获取div元素   

        var daytim = month + "月" + r + "日" + hous + ":" + minutes + ":" + seconds + " " + days;
        return daytim
    }

</script>

css 部分

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background: #ededed;
}

ul {
    list-style-type: none;

}

a {
    text-decoration: none;
    color: black;
}

@font-face {
    font-family: 'iconfont';
    src: url('../font/iconfont.ttf?t=1661149728986') format('truetype');
}

.iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.max {
    max-width: 760px;

    margin: auto;

    .hed {
        display: flex;
        position: fixed;
        width: 100%;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px #ccc solid;
        padding: 5px 0;
        background: #ededed;
        max-width: 760px;


        span {
            font-size: 35px;
        }
    }

    .vx_main {
        padding-top: 45px;
        margin-bottom: 70px;

        .wite {
            display: flex;
            // align-items: center;
            // padding: 10px 0;
            margin-top: 10px;
            margin-left: 10px;

            a {
                display: inline-block;
                width: 40px;
                height: 40px;

                img {
                    width: 100%;
                    border-radius: 5px;
                }
            }

            p {
                background-color: #fff;
                padding: 10px 7px;
                margin-left: 4px;
                font-size: 14px;
                border-radius: 5px;
                max-width: 70%;
            }
        }

        .gree {
            display: flex;
            flex-direction: row-reverse;
            margin-top: 10px;
            margin-right: 10px;

            a {
                display: inline-block;
                width: 40px;
                height: 40px;

                img {
                    width: 100%;
                    border-radius: 5px;
                }
            }

            p {
                background-color: #90f063;
                padding: 10px 7px;
                margin-right: 4px;
                font-size: 14px;
                border-radius: 5px;
                max-width: 70%;
            }
        }
    }

    .vx_fs {
        position: fixed;
        bottom: 0px;
        background: #f7f7f7;
        width: 100%;
        display: flex;
        padding: 10px 10px;
        border: 1px #ccc solid;
        max-width: 760px;

        span {
            font-size: 35px;
        }

        textarea {
            flex: 1;
            margin: 0 10px;
            outline: none;
            border: 0;
            resize: none;
            font-size: 14px;
            height: auto;
            color: black;
        }

        a {
            display: inline-block;
            padding: 10px 14px;
            background-color: #90f063;
            border-radius: 5px;
        }
    }
}