iT邦幫忙

2022 iThome 鐵人賽

DAY 26
0
自我挑戰組

30天製作專題紀錄-虛擬女友系列 第 26

Day26 30天製作專題紀錄-UI功能

  • 分享至 

  • xImage
  •  

那我們今天就繼續完成呈現輸入訊息的部分,
昨天的部分跟今天的內容是連在一起的,
所以各位要把他們連在一起看喔~

    message += '<div class="message_row you-message"><div class="message-content"><div class="message-text">' + input + '</div><div class="message-time">' +
      "09/23 10:16" + '</div></div></div>';
    var el = document.getElementById('chatRoom');
    el.innerHTML = message;

我們前面已經可以抓取到輸入訊息的內容了,
那我們接下來就把內容改成Html的格式,
因為要將內容顯示在聊天室,
所以要再抓取聊天室的元素,
之後用innerHTML這個功能顯示。

  • innerHTML
    這個功能可以取得或設定 HTML Code 中的元素,
    也可以單純的將字串寫入 HTML Code 的某一個部分,
    常搭配 HTML 的 Element Object 來執行,
    就像是我們用到的 getElementById。

那明天應該就可以將基礎的聊天室內容完成,
我們就拭目以待吧~


上一篇
Day25 30天製作專題紀錄-UI功能
下一篇
Day27 30天製作專題紀錄-UI功能
系列文
30天製作專題紀錄-虛擬女友30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言