abstrait：<!DOCTYPE html> <html lang = "en"> <head> <meta charset = "UTF-8"> <ti
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>online service</title>
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 750px;
height: 650px;
box-shadow: 0 0 10px #CCC;
margin: 20px auto;
}
/*聊天框頭部*/
.title {
height: 100px;
background: rgb(250, 250, 250);
}
.title img {
width: 65px;
height: 65px;
border-radius: 50%;
margin: 17px 10px 0 20px;
float: left;
}
.name {
float: left;
margin-top: 25px;
}
#name {
font-size: 20px;
margin-bottom: 0;
}
#status {
color: red;
margin-top: 0;
}
/*聊天框區(qū)域*/
.chat {
height: 350px;
overflow-y: auto;
}
.chat ul {
list-style: none;
padding: 0 20px;
overflow: hidden;
}
.chat ul li {
width: 100%;
float: left;
margin: 15px 0;
overflow: hidden;
}
.chat img {
width: 50px;
height: 50px;
border-radius: 50%;
}
.time {
color: #999;
margin-bottom: 5px;
}
.text {
font-size: 18px;
color: #FFF;
background: rgb(95, 184, 120);
padding: 10px;
border-radius: 5px;
display: inline-block;
}
.other img {
float: left;
}
.other .content {
max-width: 610px;
float: left;
margin: 8px 0 0 20px;
}
.me img {
float: right;
}
.me .content {
max-width: 610px;
float: right;
margin: 8px 20px 0 0;
text-align: right;
}
.me .text {
color: #333;
background: rgb(250, 250, 250);
}
/*輸入框*/
.enter {
height: 200px;
border-top: 1px solid #EEE;
position: relative;
}
.enter textarea {
width: 720px;
height: 100px;
padding: 15px;
font-size: 18px;
border: none;
outline: none;
resize: none;
}
.enter button {
width: 100px;
height: 40px;
color: #FFF;
font-size: 18px;
background: rgb(30, 184, 80);
border: none;
margin-top: 15px;
position: absolute;
right: 20px;
}
.enter button:hover {
cursor: pointer;
background: rgb(95, 184, 120);
}
</style>
</head>
<body>
<div class = "box">
<div class = "title">
<img src = "https://tva1.sinaimg.cn/crop.0.23.1242.1242.180/8693225ajw8fbimjimpjwj20yi0zs77l.jpg">
<div class = "name">
<p id = "name">VIP客服子晴</p>
<p id = "status">在線</p>
</div>
</div>
<div class = "chat">
<ul>
<li class = "other">
<img src = "https://tva1.sinaimg.cn/crop.0.23.1242.1242.180/8693225ajw8fbimjimpjwj20yi0zs77l.jpg">
<div class = "content">
<p class = "time first"></p>
<p class = "text">你好！有什么問(wèn)題歡迎咨詢哦~</p>
</div>
</li>
<!--
<li class = "me">
<img src = "https://tva1.sinaimg.cn/crop.0.0.180.180.180/7fde8b93jw1e8qgp5bmzyj2050050aa8.jpg">
<div class = "content">
<p class = "time">2019-02-12 20:46:03</p>
<p class = "text">請(qǐng)問(wèn)，VIP怎么開(kāi)通？請(qǐng)問(wèn)，VIP怎么開(kāi)通？請(qǐng)問(wèn)，VIP怎么開(kāi)通？請(qǐng)問(wèn)，VIP怎么開(kāi)通？請(qǐng)問(wèn)，VIP怎么開(kāi)通？請(qǐng)問(wèn)，VIP怎么開(kāi)通？</p>
</div>
</li>
-->
</ul>
</div>
<div class = "enter">
<textarea></textarea>
<div class = "btn">
<button type = "button">發(fā)送</button>
</div>
</div>
</div>
</body>
<script>
let textarea = document.getElementsByTagName('textarea')[0];
let btn = document.getElementsByTagName('button')[0];
let ul = document.getElementsByTagName('ul')[0];
window.onload = function () {
let time = new Date().toLocaleString();
let p = document.getElementsByClassName('first')[0];
p.innerHTML = time;
};
btn.onclick = function () {
let word = textarea.value.trim(); //點(diǎn)擊時(shí)，實(shí)時(shí)獲取輸入框內(nèi)容
if (word === '') {
alert('輸入的信息為空，請(qǐng)重新輸入');
return false;
}
let time = new Date().toLocaleString(); //獲取時(shí)間
// li標(biāo)簽的內(nèi)容
let liSrc = '<img src = "https://tva1.sinaimg.cn/crop.0.0.180.180.180/7fde8b93jw1e8qgp5bmzyj2050050aa8.jpg">\n' +
'<div class = "content">\n' +
'<p class = "time">' + time + '</p>\n' +
'<p class = "text">' + word + '</p>\n' +
'</div>';
let li = document.createElement('li');
li.setAttribute('class', 'me');
li.innerHTML = liSrc;
// console.log(li);
// 清除輸入框
textarea.value = '';
// 自動(dòng)回復(fù)內(nèi)容
let info = [
'你好，請(qǐng)問(wèn)有什么可以幫您？',
'VIP客服是24小時(shí)在線服務(wù)哦~',
'每天只需要1元錢，就可以成為VIP啦',
'你辣么帥，一定是VIP哦',
'爸爸，你好~',
'你說(shuō)的什么，我不懂哦',
'好的，沒(méi)有問(wèn)題哦',
'再見(jiàn)~歡迎下次光臨~'
];
let index = Math.ceil((Math.random() * 7));
let liSrc2 = '<img src = "https://tva1.sinaimg.cn/crop.0.23.1242.1242.180/8693225ajw8fbimjimpjwj20yi0zs77l.jpg">\n' +
'<div class = "content">\n' +
'<p class = "time">' + time + '</p>\n' +
'<p class = "text">' + info[index] + '</p>\n' +
'</div>';
li2 = document.createElement('li');
li2.setAttribute('class', 'other');
li2.innerHTML = liSrc2;
// 獲得的li插入ul底部
ul.appendChild(li);
ul.appendChild(li2);
// 顯示滾動(dòng)條底部的內(nèi)容，即顯示最新的消息
let chat = document.getElementsByClassName('chat')[0];
chat.scrollTop = chat.scrollHeight;
console.log(chat.scrollHeight);
};
</script>
</html>
Professeur correcteur：天蓬老師Temps de correction：2019-02-13 12:23:14
Résumé du professeur：看得出,很用心, 自己將教學(xué)源碼進(jìn)行自定義,再不像其它部分學(xué)員, 直接將老師源碼復(fù)制了事, 你這種嚴(yán)謹(jǐn)?shù)膶W(xué)習(xí)態(tài)度,非常棒, 相信你一定能成為合格的碼農(nóng)