css代码主体{background:#000;}.phoneBox{background:url(phoneBg.jpg)no-repeat;宽度：289px；高度：594px；边距：50px自动；}.phoneContent{宽度：237px；高度：370px；向左飘浮;溢出-x：隐藏；保证金：87px0026px；}#phoneContrl{浮动：左；边距：7px0030px；}.emo，#textInput{高度：32px；边框：1px实心#ded5e6；边界半径：5px；向左飘浮;margin-right:3px;}.emo{width:31px;游标：指针；背景：url(em1.jpg)无重复中心；}#textInput{宽度：135px；填充：0005px；}#textSet{高度：32px；游标：指针；宽度：47px；边框：无；背景：#f7f7f7；字体大小：16px；行高：32px；text-align:center;}.user1,.user2{width:100%;向左飘浮;边距：10px0；font-size:15px;}.user1.userLogo,.user1.userText,.user2.userLogo,.user2.userText{float:left;宽度：30px；边距：02px;}.user1.userText,.user2.userText{width:auto;最大宽度：165px；背景：#ded6e7；颜色：#333；border-bottom:2pxsolid#b4b0b9;填充：5px；border-radius:5px;}.user2.userLogo,.user2.userText{float:right;}.user2.userText{background:#21c616;颜色：#fff；border-bottom:2pxsolid#0c7506;}Javascript代码window.onload=function(){functionluka(element){//if(/#/.test(element)==true)正则表达式也可以匹配，但是正则化的效率没有函数高。似乎任何语言都是if(element.indexOf('#')>-1){returndocument.getElementById(element.replace(/#/,''));};如果(element.indexOf('.')>-1){returndocument.getElementsByClassName(element.replace(/\./g,''));};如果(/^[a-zA-Z]+&/.element=true){returndocument.getElementsByTagName(element);};};luka(".emo")[0].onclick=function(){var_logo=luka(".emo")[0].getAttribute("_logo")if(_logo==1){luka(".emo")[0].setAttribute("style","background:url(em2.jpg)no-repeatcenter");luka(".emo")[0].setAttribute("_logo","2");};if(_logo==2){luka(".emo")[0].setAttribute("style","background:url(em1.jpg)无重复中心");luka(".emo")[0].setAttribute("_logo","1");};};luka("#textSet").onclick=function(){if(luka("#textInput").value==''){alert("尚未输入任何内容");}else{varcreatDiv=document.createElement("div")//这个方法完全参考了gif的效果，但是用户体验不好if(luka(".emo")[0].getAttribute("_logo")==1){creatDiv.className="user1";//idtitleclassName可以这样设置，style可以设置，但是不能赋值luka(".phoneContent")[0].insertBefore(creatDiv,luka(".phoneContent")[0].childNodes[0]);luka(".user1")[0].innerHTML='