今天給大家一個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;

line-height: 32px;

text-align: center;

}

.user1, .user2 {

width: 100%;

float: left;

margin: 10px 0;

font-size: 15px;

}

.user1 .userLogo,.user1 .userText,.user2 .userLogo,.user2 .userText {

float: left;

width: 30px;

margin: 0 2px;

}

.user1 .userText, .user2 .userText {

width: auto;

max-width: 165px;

background: #ded6e7;

color: #333;

border-bottom: 2px solid #b4b0b9;

padding: 5px;

border-radius: 5px;

}

.user2 .userLogo,.user2 .userText {

float: right;

}

.user2 .userText {

background: #21c616;

color:#fff;

border-bottom: 2px solid #0c7506;

}

Javascript代碼

window.onload = function () {

function luka(element) {

//if (/#/.test(element) == true) 正則也可以匹配，不過正則的效率沒有函數高，貌似任何語言都是

if (element.indexOf('#') > -1) {

return document.getElementById(element.replace(/#/,''));

};

if (element.indexOf('.') > -1) {

return document.getElementsByClassName(element.replace(/\./g,''));

};

if (/^[a-zA-Z]+&/.element = true) {

return document.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-repeat center");

luka(".emo")[0].setAttribute("_logo","2");

};

if ( _logo == 2 ){

luka(".emo")[0].setAttribute("style","background:url(em1.jpg) no-repeat center");

luka(".emo")[0].setAttribute("_logo","1");

};

};

luka("#textSet").onclick = function() {

if ( luka("#textInput").value == '') {

alert("還沒有輸入任何內容");

}

else {

var creatDiv = document.createElement("div")

//這種方式是完全參考gif的效果，但是用戶體驗不好

if(luka(".emo")[0].getAttribute("_logo") == 1) {

creatDiv.className = "user1"; //id title className 可以用這種方式設置,style能設置，但是無法賦值

luka(".phoneContent")[0].insertBefore(creatDiv,luka(".phoneContent")[0].childNodes[0]);

luka(".user1")[0].innerHTML = '

';

luka(".user1")[0].innerHTML += '

'+ luka("#textInput").value +'';

};

if(luka(".emo")[0].getAttribute("_logo") == 2) {

creatDiv.className = "user2"; //id title className 可以用這種方式設置,style能設置，但是無法賦值

luka(".phoneContent")[0].insertBefore(creatDiv,luka(".phoneContent")[0].childNodes[0]);

luka(".user2")[0].innerHTML = '

';

luka(".user2")[0].innerHTML += '

'+ luka("#textInput").value +'';

};

/*

這種寫法，實現的就是每次都在上一條消息的下面來顯示最新消息，這種體驗才是正確的

代碼應該可以再優化一下，效果還可以做一下實現內容多的時候，滾動條跟著滾動

_childOneDivNmu,_childTwoDivNmu是為了知道第幾個元素，不然每一次都在更新第一個元素

if(luka(".emo")[0].getAttribute("_logo") == 1) {

creatDiv.className = "user1"; //id title className 可以用這種方式設置,style能設置，但是無法賦值

luka(".phoneContent")[0].appendChild(creatDiv);

var childNum = parseInt(luka(".phoneContent")[0].getAttribute("_childOneDivNmu"));

//console.log(childNum);

luka(".phoneContent")[0].setAttribute("_childOneDivNmu",childNum+1);

//var childNum = luka("#");

luka(".user1")[childNum].innerHTML = '

';

luka(".user1")[childNum].innerHTML += '

'+ luka("#textInput").value +'';

};

if(luka(".emo")[0].getAttribute("_logo") == 2) {

creatDiv.className = "user2"; //id title className 可以用這種方式設置,style能設置，但是無法賦值

luka(".phoneContent")[0].appendChild(creatDiv);

var childNum = parseInt(luka(".phoneContent")[0].getAttribute("_childTwoDivNmu"));

//console.log(childNum);

luka(".phoneContent")[0].setAttribute("_childTwoDivNmu",childNum+1);

//var childNum = luka("#");

luka(".user2")[childNum].innerHTML = '

'

luka(".user2")[childNum].innerHTML += '

'+ luka("#textInput").value +''

};*/

};

};

}

知識點

if else的運用，初學在js中使用正則表達式

使用insertBefore把元素插入到某個元素之前

總結

以上是生活随笔為你收集整理的html仿手机界面,javascript新手实例3-仿手机聊天界面（if else运用）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。