zoukankan      html  css  js  c++  java
  • JQuery实现聊天对话框

    效果图如下:

    HTML代码如下:

    <!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>Document</title>
        <style type="text/css">
            .talk_con{
                600px;
                height:500px;
                border:1px solid #666;
                margin:50px auto 0;
                background:#f9f9f9;
            }
            .talk_show{
                580px;
                height:420px;
                border:1px solid #666;
                background:#fff;
                margin:10px auto 0;
                overflow:auto;
            }
            .talk_input{
                580px;
                margin:10px auto 0;
            }
            .whotalk{
                80px;
                height:30px;
                float:left;
                outline:none;
            }
            .talk_word{
                420px;
                height:26px;
                padding:0px;
                float:left;
                margin-left:10px;
                outline:none;
                text-indent:10px;
            }        
            .talk_sub{
                56px;
                height:30px;
                float:left;
                margin-left:10px;
            }
            .atalk{
               margin:10px; 
            }
            .atalk span{
                display:inline-block;
                background:#0181cc;
                border-radius:10px;
                color:#fff;
                padding:5px 10px;
            }
            .btalk{
                margin:10px;
                text-align:right;
            }
            .btalk span{
                display:inline-block;
                background:#ef8201;
                border-radius:10px;
                color:#fff;
                padding:5px 10px;
            }
        </style>
        <script src="js/jquery-1.12.4.min.js"></script>
        <script type="text/javascript">      
        // 写出对应功能代码  
        $(function(){
            // 发送按钮单击,获取用户输入的数据,显示到上面的区域
            var $talksub = $('#talksub')
            var $words = $('#words')
            $talksub.click(function(){
                var vals = $('#talkwords').val()
                alert(vals)
                // 如果是a说 value==0,就显示a的样式的文字
                var whoVal = $('#who').val()
                var str = ''
                if(vals == '')
                {
                    alert('请输入内容')
                    return
                }
    
    
    
                if(whoVal ==0)
                {
                    str = '<div class="atalk"><span>A说:'+vals+'</span></div>'
                }
                else
                {
                    str = '<div class="btalk"><span>B说:'+vals+'</span></div>'
                }
                // 原有内容的基础上加上 str
                $words.html( $words.html() + str )
            })
        })
        </script>
    </head>
    <body>
        <div class="talk_con">
            <div class="talk_show" id="words">
                <div class="atalk"><span>A说:吃饭了吗?</span></div>
                <div class="btalk"><span>B说:还没呢,你呢?</span></div>
            </div>
            <div class="talk_input">
                <select class="whotalk" id="who">
                    <option value="0">A说:</option>
                    <option value="1">B说:</option>
                </select>
                <input type="text" class="talk_word" id="talkwords">
                <input type="button" value="发送" class="talk_sub" id="talksub">
            </div>
        </div>
    </body>
    </html>
    

      

  • 相关阅读:
    BZOJ4821 SDOI2017相关分析(线段树)
    BZOJ3167/BZOJ4824 HEOI2013SAO/CQOI2017老C的键盘(树形dp)
    BZOJ4820 SDOI2017硬币游戏(概率期望+高斯消元+kmp)
    BZOJ4811 Ynoi2017由乃的OJ(树链剖分+线段树)
    BZOJ4810 Ynoi2017由乃的玉米田(莫队+bitset)
    Codeforces Round #522 Div. 1 没打记
    BZOJ4784 ZJOI2017仙人掌(树形dp+dfs树)
    43. Multiply Strings
    2. Add Two Numbers
    150. Evaluate Reverse Polish Notation
  • 原文地址:https://www.cnblogs.com/wf-skylark/p/9157519.html
Copyright © 2011-2022 走看看