<!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竟然没写,可耻啊! 死心塌地吧 -->
演示效果:
