两个作业一起做完了

原创 2019-02-15 20:36:56 292
摘要:<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>实战客服聊天系统</title> <style type="text/css"> .center{width: 400px;height:600px;bord

IT%$MV49VP}7H1}_O(W_)BQ.png

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>实战客服聊天系统</title>

<style type="text/css">

.center{width: 400px;height:600px;border:2px #ccc solid;margin:20px auto;}

.center p{text-align: center;}

.center1{width:380px;height:400px;border:2px #ccc solid;margin:0px auto;}

.center1 ul{list-style: none;}

  .center2{width:285px;margin-top:20px;}

.center2 textarea{width:320px;height:100px;margin-left:6px;}

.center2 button{width:50px;height:106px;border: none;border:1px #ccc solid;}

</style>

</head>

<body>

<div class="center">

<p>在线客服猫猫</p>

<div class="center1">

<ul>

<li></li>

</ul>

</div>

<table class="center2">

<tr>

<td align="right" class="right">

<textarea cols="30" rows="4" name="text"></textarea>

</td>

<td align="left" class="left">

<button>发送</button>


</td>

</tr>

</table>

</div>

<script type="text/javascript">

let button = document.getElementsByTagName('button')[0];

let text = document.getElementsByName('text')[0];

let list = document.getElementsByTagName('ul')[0];

let sum = 0;

button.onclick = function(){

if (text.value.length ===0 ) {

alert('先生是不是忘记输入内容了')

return false;

}

let usecenter = text.value;


text.value = '';


let li = document.createElement('li');


li.innerHTML = usecenter;


let usePic = '<img src="./iamges/jie2.png" style="width:40px;height:40px;border-radius:50%;">';


li.innerHTML = usePic +' '+usecenter;


list.appendChild(li);


sum+=1;


//设置定时器,默认2秒后会自动回复

setTimeout(function(){

let info = [

    '我不是很想和你一起玩,你找别人玩去吧!!!',

'吃什么啊,火锅还是,牛排?',

'春天花儿都开了,你咋还不答应和我和好?',

'如果暴力不是为了杀戮那将毫无意义!',

'投诉我的人多了,你算老几~~~'

];

let temp = info[Math.floor(Math.random()*5)];

//取1-5之间的一个整数:Math.floor(Math.random()*6 + 1)

let yang = document.createElement('li');

let kefuPic = '<img src="./iamges/jie3.png" style="width:40px;height:40px;border-radius:50%;">';

// reply.innerHTML = '你有啥事呀,我的帅哥哥' +kefuPic

yang.innerHTML = kefuPic + ' ' + '<span style="color:red">'+temp+'</span>';


list.appendChild(yang);

sum += 1;


},2000);


// 当聊天记录达到10条时清空窗口

if (sum > 10) {

list.innerHTML = '';

sum = 0;

}


}

</script>

</body>

</html>


批改老师:天蓬老师批改时间:2019-02-16 09:05:35
老师总结:和刚才应该是同一个作业 , 你可试着将一些功能,封装成函数,实现模块化编程

发布手记

热门词条