做一個模擬兩人聊天界面遇到困難
問題描述
現在有三個問題：
第一：我無法讓頭像圖片跟隨說的話一起發(fā)送出去，我試過直接放入img.src但是并不行。
第二：我沒有辦法做到讓兩個模擬的對話一人一句分的清清楚楚，因為我這個發(fā)送出去的 是改變這個div的innerHTML 但是我發(fā)第二句的話同樣也是改變div的innerHTML 他們兩個本來就應該是一個 所以我搞不清要怎么變成兩個 。
第三：怎么讓我發(fā)送的字是從上到下顯示，我試過改變他們的外邊距，但是并沒有什么效果。
問題出現的環(huán)境背景及自己嘗試過哪些方法
我詢問了多個前端群，自己也在瀏覽器查了多次，但都沒能解決。
相關代碼
// 請把代碼文本粘貼到下方（請勿用圖片代替代碼）
<!doctype html>
<html>
<head>
<meat charset="utf-8">
<title>模擬手機聊天</title>
<style>
phpone{
width:330px;height:550px;border:5px?solid?#FFD700;margin:80px?auto?0;position:relative;
}
case{
width:330px;height:50px;border-top:2px?solid?#ccc;position:absolute;bottom:0;background:#EBEBEB;
}
img1{
widht:50px;height:50px;position:absolute;left:0;bottom:0;
}
img2{
widht:50px;height:50px;position:absolute;left:0;bottom:0;display:none;
}
text{
position:absolute;right:110px;bottom:10px;
}
but{
width:80px;height:30px;position:absolute;right:10px;;bottom:7px;background:#708090;
}
box{
padding:5px?0;background:#7CFC00;font-size:20px;font-family:"宋體";position:absolute;right:0;
}
box2{
widht:auto;background:#ccc;font-size:20px;font-family:"宋體";margin:50px?50px?50px?0;position:absolute;left:0;padding:5px?0;
}
</style>
</head>
<body>
<div id="phpone">
<div id="box"></div><br/>
<div?id="box2"></div><div?id="case"><img?id="img1"?src="img/wou.svg"/><img?id="img2"?src="img/man.svg"/><input?id="text"?type="text"/><input?id="but"?type="button"?value="發(fā)送"/>
</div>
</div>
</body>
/下面是js代碼/
<script>
window.onload=function(){var?oImg1=document.getElementById('img1');var?oImg2=document.getElementById('img2');var?oText=document.getElementById('text');var?oBut=document.getElementById('but');var?oPhpone=document.getElementById('phpone');var?oBox=document.getElementById('box');var?oBox2=document.getElementById('box2');????
low();
oImg1.onclick=show;function?show(){
oImg2.style.display='block';
oBut.onclick=function(){
oBox2.innerHTML?+='說:'+oText.value+'<br/>';
oText.value='';};
};
oImg2.onclick=low;function?low(){
oImg2.style.display='none';
oBut.onclick=function(){
oBox.innerHTML?+='說:'+oText.value+'<br/>';
oText.value='';};
};
};
</script>
</html>
希望完成的效果是這樣：
實際上現在是這樣：
希望各位伙伴可以幫助我，或給我提供一個思路。我現在完全想不明白要怎么繼續(xù)寫。謝謝！
2019-11-03
第一和第二個問題的解決方法如1樓所述，第三個問題可以用insertBefore()解決
2019-08-17
寫這摸牛批的代碼，不是新手啊
2019-02-25
這句代碼就是問題啊，每次你發(fā)送都是改變那個box2的內容，用js動態(tài)生成一個div吧
類似：
oDiv.innerHTML = "<div>--此處為內容--</div>";
圖片是可以添加進去的啊。
第三個問題不是很懂你的意思，不是本來就從上到下了嗎