要求效果:
HTML代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#first{
width: 250px;
height: 300px;
border:1px solid red;
overflow:auto;
}
#first div:nth-of-type(2n){
text-align:right;
overflow:hidden;
}
#first div:nth-of-type(2n) img{
float: right;
}
</style>
</head>
<body>
<div id="first"></div>
<input id="second" type="text">
<button id="third">send</button>
<script>
var _first=document.querySelector("#first");
var _second=document.querySelector("#second");
var _button=document.querySelector("#third");
var names=['张三',"李四","王博","赵四","赵四龙"];
var imgs=["./02/1.png","./02/2.png","./02/3.png","./02/4.png"];
_button.onclick=function(){
var index=Math.floor(Math.random()*5);
g=names[index];
var index1=Math.floor(Math.random()*4);
scc=imgs[index1];
_first.innerHTML+=`<div><img src="${scc}" height="30">${g}${_second.value}</div>`;
_second.value=null;
}
</script>
</body>
</html>
效果展示:
根据自己要求自行更改图片,写作不易,点赞收藏关注!