javascript新手實例3-仿手機聊天界面（if else運用）

時間 2019-11-09

標籤 javascript 新手實例手機聊天界面運用欄目 JavaScript 简体版

原文原文鏈接

今天給你們一個if else的Javascript小示例，其中我在js文件裏寫了不少註釋，有興趣的同窗本身看註釋，另外對於聊天界面的顯示方式，我寫了兩種，你們也能夠分別試試：javascript

老規矩，先上圖：
css

html代碼html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>模擬手機短信發送</title>
        <script src="mobile.js" type="text/javascript" charset="utf-8"></script>
        <link rel="stylesheet" type="text/css" href="mobile.css"/>
    </head>
    <body>
        <div class="phoneBox">
            <div class="phoneContent" _childOneDivNmu="0" _childTwoDivNmu="0"></div>
            <div id="phoneContrl">
                <i class="emo" _logo="1"></i>
                <input type="text" id="textInput" />
                <input type="button" id="textSet" value="發送" />
            </div>
        </div>
    </body>
</html>

css代碼java

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 = '<div class="userLogo"><img src="em1.jpg" alt="" /></div>';
                luka(".user1")[0].innerHTML += '<div class="userText">'+ luka("#textInput").value +'</div>';
            };
            
            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 = '<div class="userLogo"><img src="em2.jpg" alt="" /></div>';
                luka(".user2")[0].innerHTML += '<div class="userText">'+ luka("#textInput").value +'</div>';
            };
            
            
            /*
            這種寫法，實現的就是每次都在上一條消息的下面來顯示最新消息，這種體驗纔是正確的
            代碼應該能夠再優化一下，效果還能夠作一下實現內容多的時候，滾動條跟着滾動
            _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 = '<div class="userLogo"><img src="em1.jpg" alt="" /></div>';
                luka(".user1")[childNum].innerHTML += '<div class="userText">'+ luka("#textInput").value +'</div>';
            };
            
            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 = '<div class="userLogo"><img src="em2.jpg" alt="" /></div>'
                luka(".user2")[childNum].innerHTML += '<div class="userText">'+ luka("#textInput").value +'</div>'
            };*/
        };
    };
    
}

知識點app

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

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。