问题描述
现在有三个问题:
第一:我无法让头像图片跟随说的话一起发送出去,我试过直接放入img.src但是并不行。
第二:我没有办法做到让两个模拟的对话一人一句分的清清楚楚,因为我这个发送出去的 是改变这个div的innerHTML 但是我发第二句的话同样也是改变div的innerHTML 他们两个本来就应该是一个 所以我搞不清要怎么变成两个 。
第三:怎么让我发送的字是从上到下显示,我试过改变他们的外边距,但是并没有什么效果。
问题出现的环境背景及自己尝试过哪些方法
我询问了多个前端群,自己也在浏览器查了多次,但都没能解决。
相关代码
// 请把代码文本粘贴到下方(请勿用图片代替代码)
模拟手机聊天#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;
}
/*下面是js代码*/
window.οnlοad=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.οnclick=show;
function show(){
oImg2.style.display='block';
oBut.οnclick=function(){
oBox2.innerHTML +='说:'+oText.value+'
';
oText.value='';
};
};
oImg2.οnclick=low;
function low(){
oImg2.style.display='none';
oBut.οnclick=function(){
oBox.innerHTML +='说:'+oText.value+'
';
oText.value='';
};
};
};
你期待的结果是什么?实际看到的错误信息又是什么?
希望完成的如下的效果:
目前是这样:
希望各位伙伴可以帮助我,或给我提供一个思路。我现在完全想不明白要怎么继续写。谢谢!