首頁 > 開發者 > JavaScript

【css3+JavaScript】:左右對話式留言欄

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：

實現效果：

 

示範地址：http://codepen.io/anon/pen/NqxjEy

 

CORE CODE:

 

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Talk Room</title><style type="text/css">*{margin: 0;padding: 0;}li{list-style: none;}    body{    font-family: "microsoft yahei";    background-color: #f7f7f7;    color: #666;    font-size: 13px;        line-height: 1.8em;    }    .roomArea{    width: 400px;        height: 500px;        background-color: #fff;        border-radius: 3px;        box-shadow: 0 1px 2px rgba(0,0,0,.3);        position: absolute;        top:0;        right: 0;        bottom: 0;        left: 0;        margin: auto;    }    .room-content{    width: 100%;    padding: 10px;    height: 320px;    overflow-y:auto;     border-bottom: 1px solid #f7f7f7;    }    .opArea{    width: 100%;    }    .wordsInput{    width: 380px;    padding: 10px;    height: 80px;    margin-bottom: 20px;    border: 0;    outline: 0;    border-bottom: 1px solid #f7f7f7;    font-family: "microsoft yahei";    }    .btn{        float: right;        margin:0 6px;    padding: 5px 20px;    border: 0;    outline: 0;    border-radius: 3px;        background-color: #eb4f38;        color: #fff;        border: 1px solid transparent;    }    #offBtn{    background-color: #a9b7b7;    }    .inp{    width: 125px;        outline: 0;    height: 25px;        border: 0;        border-bottom: 1px solid #f7f7f7;    }    label{    margin-left: 10px;    }    .msg-list{    position: relative;    }    .msg-list li{       display:inline-block;       padding: 6px 0;      margin: 6px 0;    }    .words {    position: relative;    display: inline-block;    margin-left: 50px;background-color: #00bb9c;color: #fff;padding: 5px 8px;border-radius: 4px;width: 240px;min-height: 40px;    }    .words:before{    content: ‘‘;    position: absolute;    top:7px;    left:-6px;    border-style: solid;    border-width: 6px 12px 6px 0;    border-color: transparent #00bb9c transparent transparent;     }    .nickName {    position: absolute;width: 40px;height: 40px;border-radius: 20px;background-color: #00bb9c;display: inline-block;line-height: 40px;text-align: center;color: #fff;        -webkit-box-shadow: 0 0 1px rgba(0,0,0,.3);        box-shadow: 0 0 1px rgba(0,0,0,.3);}.time {  float: right;  font-size: 12px;  color: #eee;}.oRight .nickName {  right: 43px;  background-color: #56abe4;}.oRight .words{    background-color: #56abe4;  }.oRight .words:before{    display: none;}.oRight .words:after{    content: ‘‘;        position: absolute;        top:7px;        right:-6px;        border-style: solid;        border-width: 6px 0 6px 12px ;        border-color: transparent transparent transparent #56abe4 ; }</style></head><body><div class="roomArea"><div class="room-content" ><ul class="msg-list" id="msgList"></ul></div><div class="opArea">    <textarea class="wordsInput" id="txtInput" placeholder="說點什麼吧"></textarea>    <label for="inp">輸入暱稱:</label>    <input type="text" class="inp" id="inp">    <button class="btn" id="offBtn">取消</button>    <button class="btn" id="sendBtn">發布</button></div></div><!--js部分--><script type="text/javascript">var oMsgList=document.getElementById(‘msgList‘);var oTxtInput=document.getElementById(‘txtInput‘);var oInp=document.getElementById(‘inp‘);var oOffBtn=document.getElementById(‘offBtn‘);var oSendBtn=document.getElementById(‘sendBtn‘);oSendBtn.onclick=function addWords(){if (oTxtInput.value==‘‘) {    alert(‘輸入內容不可為空‘);    oTxtInput.focus();    return false;}else if (oInp.value==‘‘) {alert(‘暱稱不可為空‘);    oInp.focus();    return false;}else{oMsgList.innerHTML+="<li>"+"<span class=‘nickName‘>"+oInp.value +"</span>" + "<span class=‘words‘>"+oTxtInput.value+"<span class=‘time‘>"+getTime()+"</span>"+"</span>" +"</li>";oInp.value=‘‘;oTxtInput.value=‘‘;//遍曆livar i="";var d=document.getElementsByTagName(‘li‘);//擷取tag名為li的html元素for(i=0;i<d.length;i++){//遍曆tagif (i%2 != 0) {    //偶數添加類"oRight" d[i].className="oRight";};}}}function getTime(){    var date = new Date();    var year = date.getFullYear();    var month = date.getMonth()+1;    var day = date.getDate();    var hours = date.getHours();    var minutes = date.getMinutes();    var seconds = date.getSeconds();    var time = year+‘/‘+month+‘/‘+day+‘ ‘+hours+‘:‘+minutes+‘:‘+seconds;    return time;}</script></body></html>

　　

 

【css3+JavaScript】:左右對話式留言欄

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More