在线客服对话框

Original 2019-02-16 13:03:01 411
abstract:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">&

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>聊天室</title>

<style>

.box1{width:320px;height:500px;box-shadow: 5px 5px 5px 0 grey;border-radius:5px;background-color: slateblue;}

/* n从1开始 */

div:nth-child(2){width:300px;height:300px;border-radius:3px;background-color: #f5f5f5;margin:10px;}

li{list-style: none;color:#333;text-align: left;}

h2{color:#fff;padding:30px 10px 0px}

textarea{border:none;border-radius:3px;background-color: #fff;margin:10px;}

</style>

</head>

<body>

<div class="box1">

<h2>客服中心</h2>

<div>

<ul></ul>

</div>

<div>        

<textarea cols="40" rows="3" placeholder="输入聊天内容"></textarea>

</div>

</div>

<script>

var input=document.getElementsByTagName('textarea')[0];

var ul=document.querySelector('ul');

input.onkeydown=function(){

if(event.keyCode==13){

var li=document.createElement('li');//****

li.innerHTML=input.value;

ul.appendChild(li);

input.value="";

}

}

</script>

</body>

</html>

Correcting teacher:韦小宝Correction time:2019-02-16 13:11:39
Teacher's summary:写的很不错 少个客服回复的功能哦 后期记得加上哦

Release Notes

Popular Entries