如何在聊天氣泡中添加日期和發件人姓名

Question

嘿，我創建了一些簡單的聊天氣泡，我想添加發件人日期和發件人姓名。 發件人姓名需要在每個氣泡上方，發件人日期需要在每個氣泡下方，我已經嘗試過很多次但都失敗了。 我很樂意提供任何建議。 最后的結果應該是這樣的

 $('#build').bind('click', function() { var inputText = $('#buildInput').val(); var regMessage = /^#(\\d):\\s([^#.]*)/gm; var messages = inputText.split(regMessage); $('#chat').empty(); for (var i=1; i<messages.length; i=i+3) { addMsg(messages[i], messages[i+1]); } return false; }) $('#send').bind('submit', function() { var msgText = $('#msgInput').val(); $('#msgInput').val(''); if (msgText != '') addMsg(1, msgText); $('#chat').animate({ scrollTop: $('#chat').height() }, 600); return false; }) function addMsg(people, msg) { console.log('addMsg'); var side = 'right'; var $_phone = $('#chat'); var $_lastMessage = $('#chat .message:last'); if (people == 1) side = 'right'; if (people == 2) side = 'left'; if ($_lastMessage.hasClass(side)) { $_lastMessage.append( $('<div>').addClass('message-text').text(msg) ) } else { $_phone.append( $('<div>').addClass('message '+side).append( $('<div>').addClass('message-text').text(msg) ) ) } }

 html, body {height: 98%; position: relative; margin: 0;} body { font-family: Helvetica, Arial, serif; font-size: 16px; padding: 1% } .wrapper { width: 612px; height: 100%; margin: 0 auto; } .chat-containter { width: 340px; height: 100%; } .chat { height: 60%; border: 1px solid #dcdcdc; overflow-y: auto; overflow-x: hidden; } .button { background-color: none; border: 1px solid #36a9fc; text-decoration: none; border-radius: 10px; padding: 5px 10px; color: #36a9fc; display: block; width: 80px; text-align: center; overflow: hidden; text-oveflow: ellipsis; margin: 20px auto; } .build-container { width: 230px; height: 100%; margin-left: 20px; float: right; } #buildInput { width: 100%; height: 60%; } /* Messages baloon */ .message { margin: 10px 0; overflow: hidden; } .message-text { padding: 10px 20px; float: right; clear: both; border-radius: 25px; position: relative; margin-bottom: 1px; } .message.left .message-text { margin-right: 70px; margin-left: 20px; background-color: white; border: 1px solid #e5e5ea; float: left; } .message.right .message-text { margin-left: 70px; margin-right: 20px; background-color: white; border: 1px solid #e5e5ea; color: black; float: right; } .message-text:last-child:before, .message-text:last-child:after { content: ''; position: absolute; bottom: 0; width: 35px; height: 25px; z-index: -1; } .message.right .message-text:before, .message.right .message-text:after { border-radius: 0 0 0 50%; } .message.right .message-text:before { height: 20px; right: -23px; background-color: #e5e5ea; } .message.right .message-text:after { right: -35px; bottom: -3px; background-color: #fff; } .message.left .message-text:before, .message.left .message-text:after { border-radius: 0 0 50% 0; } .message.left .message-text:before { height: 20px; left: -23px; background-color: #e5e5ea; } .message.left .message-text:after { left: -35px; bottom: -3px; background-color: #fff; } .send-container { background-color: #f6f6f6; border: 1px solid #dcdcdc; margin-top: -1px; padding: 10px; } .send-input { border-radius: 5px; border: 1px solid #dbdbdb; background-color: #fff; padding: 5px 5px; font-size: 1em; width: 78%; } .send-btn { text-decoration: none; color: #939297; font-weight: bold; background-color: transparent; border: none; font-size: 1em; cursor: pointer; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrapper"> <div class="build-container"> <textarea id="buildInput"> #2: Hello! #1: Hi! #1: Where are you now? #2: I'm at a party at Clara</textarea><br> <a href="#" class="button" id="build">Build</a> <br><br> </div> <div class="chat-containter"> <div id="chat" class="chat"> <div class="message left"> <div class="message-text">Hello! </div> </div><div class="message right"><div class="message-text">Hi! </div><div class="message-text">Where are you now? </div> </div><div class="message left"><div class="message-text">I'm at a party of Clara</div></div> </div> <div class="send-container"> <form id="send"> <input type="text" id="msgInput" class="send-input" placeholder="Message" /> <input type="submit" class="send-btn" value="Send"> </form> </div> </div> </div>

Answer 1

1. 使用Date - getMinutes()和getHours()獲取當前時間
2. 將另一個div與 class message-time附加到消息div 。
3. 根據需要放置該 div。

例子：

 $('#build').bind('click', function() { var inputText = $('#buildInput').val(); var regMessage = /^#(\\d):\\s([^#.]*)/gm; var messages = inputText.split(regMessage); $('#chat').empty(); for (var i=1; i<messages.length; i=i+3) { addMsg(messages[i], messages[i+1]); } return false; }) $('#send').bind('submit', function() { var msgText = $('#msgInput').val(); $('#msgInput').val(''); if (msgText != '') addMsg(1, msgText); $('#chat').animate({ scrollTop: $('#chat').height() }, 600); return false; }) function addMsg(people, msg) { console.log('addMsg'); var side = 'right'; var $_phone = $('#chat'); var $_lastMessage = $('#chat .message:last'); if (people == 1) side = 'right'; if (people == 2) side = 'left'; var time = new Date(), timeString = zero(time.getHours()) + ':' + zero(time.getMinutes()); if ($_lastMessage.hasClass(side)) { $_lastMessage.append( $('<div>').addClass('message-text').text(msg).append( $('<div>').addClass('message-time').text(timeString) ) ) } else { $_phone.append( $('<div>').addClass('message '+side).append( $('<div>').addClass('message-text').text(msg).append('<div class="message-time">' + timeString + '</div>') )); } } function zero(num) { return ('0' + num).slice(-2); }

 html, body {height: 98%; position: relative; margin: 0;} body { font-family: Helvetica, Arial, serif; font-size: 16px; padding: 1% } .wrapper { width: 612px; height: 100%; margin: 0 auto; } .chat-containter { width: 340px; height: 100%; } .chat { height: 60%; border: 1px solid #dcdcdc; overflow-y: auto; overflow-x: hidden; } .button { background-color: none; border: 1px solid #36a9fc; text-decoration: none; border-radius: 10px; padding: 5px 10px; color: #36a9fc; display: block; width: 80px; text-align: center; overflow: hidden; text-oveflow: ellipsis; margin: 20px auto; } .build-container { width: 230px; height: 100%; margin-left: 20px; float: right; } #buildInput { width: 100%; height: 60%; } /* Messages baloon */ .message { margin: 10px 0; overflow: hidden; } .message-text { padding: 10px 20px; float: right; clear: both; border-radius: 25px; position: relative; margin-bottom: 1px; } .message.left .message-text { margin-right: 70px; margin-left: 20px; background-color: white; border: 1px solid #e5e5ea; float: left; } .message.right .message-text { margin-left: 70px; margin-right: 20px; background-color: white; border: 1px solid #e5e5ea; color: black; float: right; } .message-text:last-child:before, .message-text:last-child:after { content: ''; position: absolute; bottom: 0; width: 35px; height: 25px; z-index: -1; } .message.right .message-text:before, .message.right .message-text:after { border-radius: 0 0 0 50%; } .message.right .message-text:before { height: 20px; right: -23px; background-color: #e5e5ea; } .message.right .message-text:after { right: -35px; bottom: -3px; background-color: #fff; } .message.left .message-text:before, .message.left .message-text:after { border-radius: 0 0 50% 0; } .message.left .message-text:before { height: 20px; left: -23px; background-color: #e5e5ea; } .message.left .message-text:after { left: -35px; bottom: -3px; background-color: #fff; } .send-container { background-color: #f6f6f6; border: 1px solid #dcdcdc; margin-top: -1px; padding: 10px; } .send-input { border-radius: 5px; border: 1px solid #dbdbdb; background-color: #fff; padding: 5px 5px; font-size: 1em; width: 78%; } .send-btn { text-decoration: none; color: #939297; font-weight: bold; background-color: transparent; border: none; font-size: 1em; cursor: pointer; } .message-time { font-size: 10px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrapper"> <div class="build-container"> <textarea id="buildInput"> #2: Hello! #1: Hi! #1: Where are you now? #2: I'm at a party at Clara</textarea><br> <a href="#" class="button" id="build">Build</a> <br><br> </div> <div class="chat-containter"> <div id="chat" class="chat"> <div class="message left"> <div class="message-text">Hello! </div> </div><div class="message right"><div class="message-text">Hi! </div><div class="message-text">Where are you now? </div> </div><div class="message left"><div class="message-text">I'm at a party of Clara</div></div> </div> <div class="send-container"> <form id="send"> <input type="text" id="msgInput" class="send-input" placeholder="Message" /> <input type="submit" class="send-btn" value="Send"> </form> </div> </div> </div>