demo19-作业3聊天对话框

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .talk_con{
                width: 600px;
                height: 500px;
                border: 1px solid #666;
                margin: 50px auto;
                background: #f9f9f9;
            }
            .talk_show{
                width: 580px;
                height: 420px;
                border: 1px solid #666;
                background: #fff;
                margin: 10px auto;
                overflow: auto;

            }
            .whotalk{
                width: 80px;
                height: 30px;
                float: left;
                outline: none;
            }
            .talk_word{
                width: 420px;
                height: 26px;
                padding: 0px;
                float:left;
                margin-left:10px;
                outline: none;
                text-indent: 10px;
            }
            .talk_sub{
                width: 56px;
                height: 30px;
                margin-left: 10px;
                float: left;
                
            }
            .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>
    </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的value值判断是谁说的,千万不能丢了value的值,否则就是只有单一的a或者b的说话功能了
            -->
                <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>
    <script type="text/javascript">
        // js代码
        var oTalkshow = document.getElementById("words")
        var oWho = document.getElementById("who")
        var oWords = document.getElementById("talkwords")
        var oBtn = document.getElementById("talksub")
        
        oBtn.onclick = function(){
            var sVal01 = oWho.value
            var sVal02 = oWords.value
            var sTr = ""
            
            //内容为空,提示
            if (sVal02==""){
                alert("请输入内容")
                return
            }
            
            if (sVal01==0){
                sTr = "<div class = 'atalk'><span>A说:"+sVal02+"</span></div>"
            }
            else{
                sTr = "<div class = 'btalk'><span>B说:"+sVal02+"</span></div>"
            }
            //+=  因为是要在后面追加,而不是覆盖
            oTalkshow.innerHTML = oTalkshow.innerHTML+sTr
            
        }
    </script>
</html>
<!--
    等下回来继续看这个,再做一遍
    焦点focus的作用?
    还有作业4,再写一遍,看是看不会的 
    作业4竟然没写,可耻啊!
    死心塌地吧
    
-->
演示效果: