找回密码
当前位置：前端开发者 > JavaScript > 正文

前端开发原生js实现简单的微信聊天界面效果源码

2019-01-26 分类：JavaScript 阅读(1275) 评论(0)
web前端设计与开发课后代码
前端设计模式与开发实践
web前端开发课程设计

html 代码

<!DOCTYPE html>
    <head>
        <meta charset=”utf-8″ />
        <title>微信聊天</title>
        <link rel=”stylesheet” type=”text/css” href=”css/style.css” />
        <style>
            * {
                margin: 0;
            }
            .top {
                width: 310px;
                padding: 10px 20px;
                background-color: gray;
                border-top-left-radius: 5px;
                border-top-right-radius: 5px;
                font-size: 18px;
                font-weight: bold;
                color: white;
            }
            .content {
                background-color: white;
            }
            select {
                border: 2px solid gray;
                background: white;
                width: 350px;
                height: 470px;
                padding: 10px;
            }
            .send {
                width: 310px;
                padding: 10px 20px;
                background-color: gray;
                border-bottom-left-radius: 3px;
                border-bottom-right-radius: 3px;
            }
            .chat {
            }
            .box {
                float: left;
                margin: 20px 120px;
            }
            body {
                width: 100%;
                background-image: url(../img/bg.jpg);
            }
            .outer {
                width: 90%;
                margin: 10px auto;
            }
            .sText {
                width: 220px;
                height: 25px;
                border-radius: 5px;
                font-size: 15px;
            }
            .btn {
                width: 65px;
                height: 30px;
                border-radius: 5px;
                float: right;
                text-align: center;
                font-size: 18px;
                color: white;
                background-color: limegreen;
            }
            option {
                font-size: 15px;
                max-width: 325px;
                height: auto;
                border: 0.5px solid gainsboro;
                border-radius: 8px;
                padding: 10px;
                margin: 10px;
                background-color: greenyellow;
                margin-left: 158px;
                margin-top: 10px;
                margin-bottom: 10px;
                max-width: 200px;
            }
        </style>
        <script type=”text/javascript” src=”js/my.js”></script>
        <script>
            window.onload = function() {
                function g(id) {
                    return document.getElementById(id)
                }
                g(‘leftSendBtn’).addEventListener(‘click’, leftSendB)
                g(‘rightSendBtn’).addEventListener(‘click’, rightSendB)
            }
            function leftSendB() {
                function g(id) {
                    return document.getElementById(id)
                }
                var text = document.getElementById(‘leftText’).value
                if (text.trim() != ”) {
                    var leftContent = document.getElementById(‘leftContent’)
                    var rightContent = g(‘rightContent’)
                    var option = document.createElement(‘option’)
                    var len = text.length
                    option.style.width = len * 15 + len * 2 + ‘px’
                    option.style.marginLeft =
                        350 – (len * 15 + len * 2) – 72 + ‘px’
                    option.innerHTML = text
                    leftContent.appendChild(option)
                    var option1 = document.createElement(‘option’)
                    option1.innerHTML = text
                    option1.style.backgroundColor = ‘white’
                    option1.style.marginLeft = ’10px’
                    option1.style.width = len * 15 + len * 2 + ‘px’
                    rightContent.appendChild(option1)
                    document.getElementById(‘leftText’).value = ”
                }
            }
            function rightSendB() {
                function g(id) {
                    return document.getElementById(id)
                }
                var text = g(‘rightText’).value
                if (text.trim() != ”) {
                    var leftContent = document.getElementById(‘leftContent’)
                    var rightContent = g(‘rightContent’)
                    var option = document.createElement(‘option’)
                    var len = text.length
                    option.style.width = len * 15 + len * 2 + ‘px’
                    option.style.marginLeft =
                        350 – (len * 15 + len * 2) – 72 + ‘px’
                    option.innerHTML = text
                    rightContent.appendChild(option)
                    var option1 = document.createElement(‘option’)
                    option1.innerHTML = text
                    option1.style.backgroundColor = ‘white’
                    option1.style.marginLeft = ’10px’
                    option1.style.width = len * 15 + len * 2 + ‘px’
                    leftContent.appendChild(option1)
                    g(‘rightText’).value = ”
                }
            }
        </script>
    </head>
    <body>
        <div class=”outer”>
            <div class=”box”>
                <div class=”chat”>
                    <div class=”top”><span class=””>奔波儿灞</span></div>
                    <div class=”content”>
                        <select multiple=”multiple” id=”leftContent”> </select>
                    </div>
                    <div class=”send”>
                        <input type=”text” id=”leftText” class=”sText” />
                        <input
                            type=”button”
                            id=”leftSendBtn”
                            class=”btn”
                            value=”发送”
                        />
                    </div>
                </div>
            </div>
            <div class=”box”>
                <div class=”chat”>
                    <div class=”top”><span class=””>灞波儿奔</span></div>
                    <div class=”content”>
                        <select multiple=”multiple” id=”rightContent”> </select>
                    </div>
                    <div class=”send”>
                        <input type=”text” id=”rightText” class=”sText” />
                        <input
                            type=”button”
                            id=”rightSendBtn”
                            class=”btn”
                            value=”发送”
                        />
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>
web前端开发课程设计论文
web前端设计与开发 代码
前端开发设计笔试题
赞(0)
前端开发者 » 前端开发原生js实现简单的微信聊天界面效果源码
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论