先附圖
CSS部分：
<style> body{} *{margin:0; padding:0} li{list-style: none;} .container{ width:310px; height:600px; margin:20px auto 0; background: url('images/iphone.jpg'); position: relative;} #name{width:23px; height:23px; border:1px solid darkgrey; border-radius: 8px; padding:3px; cursor:pointer;} .main{bottom:64px; left:22px; border-top:1px solid darkgrey; position:absolute;padding:6px 4px 4px 7px;width: 258px;} #import{border-radius: 4px; height:18px; line-height:18px; border: 1px solid #b8b8b8; outline:0;padding:5px; bottom:5px; position:relative; bottom:11px;width: 160px;} #enter{font: 18px 'Microsoft YaHei';bottom: 8px; position: relative; cursor:pointer;} .content{width: 255px;height: 389px;top: 84px; position: relative;overflow: auto; padding: 0 0 0 28px;} .content li{ line-height:28px;margin-bottom: 15px;overflow: hidden;position: relative;} #inHtml img{width:25px; height:25px;position: relative;} .th{text-align: right;} .th img{float:right; margin-left:15px;} .ds img{ width: 25px;height: 25px;position: relative;float: left;margin-right: 15px;} .th p{background: forestgreen; text-align: left;padding: 3px 5px;border-radius: 4px;color: white; float:right;max-width: 182px;font:14px 'Microsoft YaHei'; } .ds p{background: dimgrey;float: left;text-align: left;padding: 3px 4px;border-radius: 4px;color: white; left: 32px;max-width: 190px; font:14px 'Microsoft YaHei';} .ds{ text-align: left;} .sent1{width:0; height:0; border:solid 8px; border-color: white white white forestgreen; position: absolute;right: 24px;top: 4px;} .sent2{width:0; height:0; border:solid 8px; border-color: white dimgrey white white ; position: absolute;left: 24px;top: 4px;} </style>
JS部分：
<script> window.onload = function(){ //給兩個圖片定義為一個數組 var arr = ['images/tuhaoo.png','images/diaoshi.png']; //得到名稱的圖標 var oName = $('name'); //得到輸入內容 var oGet = $('import'); //顯示輸入內容 var oWrite = $('inHtml'); //默認輸入框顯示光標 oGet.focus(); //默認顯示土豪 var onOff = true; oName.onclick = function () { if(onOff){ oName.src = arr[1]; onOff = false; oGet.focus(); } else { oName.src = arr[0]; onOff = true; oGet.focus(); } } //發送事件 var oSet = $('enter'); oSet.onclick = function(){ if(onOff){ oWrite.innerHTML += '<li class="th">'+'<img src='+arr[0] + "/><p>" + oGet.value + '<span class="sent1"></span>' +"</p></li>"; } else{ oWrite.innerHTML += '<li class="ds">' + '<img src='+arr[1] + "/><p>" + oGet.value + '<span class="sent2"></span>' + "</p></li>"; } oGet.value = ''; oGet.focus(); } } //調用ID通配符 function $(id){ return document.getElementById(id); } </script>
Html部分：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="utf-8"> <title>手機聊天界面</title> </head> <body> <div class="container"> <div class="content"> <ul id="inHtml"></ul> </div> <div class="main"> <img id='name' src="images/tuhaoo.png"> <input id='import' type="text"> <span id="enter">發送</span> </div> </div> </body> </html>