代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#text1{
width: 200px;
height: 400px;
border: 1px solid black;
overflow: auto;
}
img{
height: 30px;
width: 30px;
text-align: ;
}
</style>
</head>
<body>
<div id="text1"></div>
<input type="" id="user" value="">
<button >send</button>
<script>
var _text1=document.getElementById("text1");
var _user=document.getElementById("user");
var _button=document.querySelector("button");
var ary=['可莉',"万叶","刻晴","甘雨","钟离"];
var ary1=['./img/1.jpg',"./img/2.jpg","./img/3.jpg","./img/4.jpg","./img/5.jpg"];
var i=0;
_button.onclick=function(){
var index=Math.floor(Math.random()*5);
var name=ary[index];
var index1=Math.floor(Math.random()*5);
var imgs=ary1[index];
if(i%2==0){
_text1.innerHTML=`<div style=text-align:left;>${_text1.innerHTML}<img src="${imgs}" alt="">${name}:${_user.value}<br></style>`;
}else{
_text1.innerHTML=`<div style=text-align:right;>${_text1.innerHTML}${_user.value}:${name}<img src="${imgs}" alt=""><br></style>`;
}
i++;
_user.value=null;
}
</script>
</body>
</html>
效果图: