实例图片
手抄代码
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style >
div:nth-child(1) {
width: 500px;
height: 650px;
margin: 20px auto;
border: 1px solid lightblue;
background-color: lightgreen;
/*overflow: hidden;*/
}
div:nth-child(2) {
width: 450px;
height: 450px;
margin: auto;
background-color: #fff;
border: 4px double blue;
}
ul {
list-style: none;
}
table {
margin:20px auto;
width: 90%;
}
button {
line-height: 50px;
width: 80px;
background-color: coral;
}
button:hover {
background-color: lightblue;
}
</style>
</head>
<body>
<div>
<h2>online chat</h2>
<div contenteditable="true">
<ul>
<li></li>
</ul>
</div>
<table>
<td>
<textarea cols="45" rows="5" name="text"></textarea>
</td>
<td><button type="button">发送</button></td>
</table>
</div>
<script type="text/javascript">
var ul = document.getElementsByTagName('ul')[0]
var text = document.getElementsByName('text')[0]
var btn = document.getElementsByTagName('button')[0]
var sum = 0
btn.onclick = function () {
if(text.value.length == 0){
alert('请输入文字')
return false
}
var userComment = text.value
text.value = ''
var li = document.createElement('li')
li.innerHTML = userComment
usrPic = '<img src="/180330/images/1.jpg" alt="" style="border-radius:50%" width="30"/>'
li.innerHTML = usrPic + userComment
ul.appendChild(li)
sum +=1
setTimeout(function(){
var info = ['有什么可以帮您','我们的公司已经上市，请放心','银行存管已上线']
var temp = info[Math.floor(Math.random()*3)]
var rpy = document.createElement('li')
var kf = '<img src="/180330/images/2.jpg" width="30" style="border-radius:50%" alt="" />'
rpy.innerHTML = kf + temp
ul.appendChild(rpy)
sum += 1
},1000)
if (sum > 10 ) {
ul.innerHTML = ''
sum = 0
}
}
</script>
</body>