html仿手机界面,javascript新手实例3-仿手机聊天界面（if else运用）

今天给大家一个if else的Javascript小示例，其中我在js文件里写了很多注释，有兴趣的同学自己看注释，另外对于聊天界面的显示方式，我写了两种，大家也可以分别试试：

老规矩，先上图：

html代码

模拟手机短信发送

css代码

body {

background: #000;

}

.phoneBox {

background: url(phoneBg.jpg) no-repeat;

width: 289px;

height: 594px;

margin: 50px auto;

}

.phoneContent {

width: 237px;

height: 370px;

float: left;

overflow-x: hidden;

margin: 87px 0 0 26px;

}

#phoneContrl {

float: left;

margin: 7px 0 0 30px;

}

.emo, #textInput {

height: 32px;

border: 1px solid #ded5e6;

border-radius: 5px;

float: left;

margin-right: 3px;

}

.emo {

width: 31px;

cursor: pointer;

background: url(em1.jpg) no-repeat center;

}

#textInput {

width: 135px;

padding: 0 0 0 5px;

}

#textSet {

height: 32px;

cursor: pointer;

width: 47px;

border: none;

background: #f7f7f7;

font-size: 16px;