极客观点
项目管理
HarmonyOS
问题描述
现在有三个问题：
第一：我无法让头像图片跟随说的话一起发送出去，我试过直接放入img.src但是并不行。
第二：我没有办法做到让两个模拟的对话一人一句分的清清楚楚，因为我这个发送出去的 是改变这个div的innerHTML 但是我发第二句的话同样也是改变div的innerHTML 他们两个本来就应该是一个 所以我搞不清要怎么变成两个 。
第三：怎么让我发送的字是从上到下显示，我试过改变他们的外边距，但是并没有什么效果。
问题出现的环境背景及自己尝试过哪些方法
我询问了多个前端群，自己也在浏览器查了多次，但都没能解决。
相关代码
// 请把代码文本粘贴到下方（请勿用图片代替代码）
<!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="发送"/>
</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>
你期待的结果是什么？实际看到的错误信息又是什么？
希望完成的如下的效果：
目前是这样：
希望各位伙伴可以帮助我，或给我提供一个思路。我现在完全想不明白要怎么继续写。谢谢！
chrome
首先要理解页面的模块应该怎么划分，首先，可以看出来头像与文字应该组成一个模块，因为都是它们都是组合出现的，所以可以放在同一个块状元素下，其次头像与文字上面应该有一个模块，有固定高度，使得当内容超出长度时，出现滚动条而不是溢出显示。最后概括如下：
至于从上到下显示，只要将组合好的P标签一直插入到盒子元素的第一个就好了
理清完html显示，现在理一下js逻辑，首页，可以看出有两个人说话，按照面向对象编程，可以理解为两个对象
。然后我们看一下两个对象有什么相同的，不相同的。
相同
（1）都有头像
（2）都会说话
不同
（1） 一个说话时头像文字居左显示，一个头像文字居右显示
根据上面我们我们可以构建出这两个对象
由于说话的方法大部分相同 可以抽出来
切换左下角头像时，等于指定接下来要说话的人，即 nextSayPersion = 某人
在点击说话时 就是说这个被指定要说话的人要说话了 即 nextSayPersion.say('我说话啦')
整理全部代码如下：