330--JS之仿53KF对话窗口 - 课外作业

首页 > 博客列表 > 330--JS之仿53KF对话窗口
博主信息
博文 71
粉丝 1
访问量 102165
专题推荐
更多>
实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>仿53KF客服系统</title>
	<style type="text/css">
		.kfbox {
			width: 1000px;
			height: 600px;
			margin: auto;
			color: #333;
			box-shadow: 3px 3px 3px #666;
		}
		.kfbox ul li {
			list-style: none;
			padding:0 10px;
	        overflow: hidden;
			color: #FF6347;
		}
		.kfbox .wrap {
			width: 100%;
			margin: auto;
			padding: 0;
			float: left;
		}
		.kfbox .main {
			height: 600px;
			margin:0 240px;
		}
		.mtop {
			width: 100%;
			height: 50px;
			line-height: 10px;
			border-top: 1px solid #c0c0c0;
			border-bottom: 1px solid #c0c0c0;
		}
		.mtop .zx {
			float: left;
			padding-left: 10px;
		}
		.mtop .yh {
			float: right;
			padding-right: 10px;
		}
        .main .ltwrap {
        	width: 520px;
        	height: 458px;
			border-bottom: 1px solid #c0c0c0;
			margin: 10px auto 15px;
        }
        .main .ltck {
        	width: 520px;
        	height: 310px;
        	border-bottom: 1px solid #c0c0c0;
        }
        .ltwrap ul {
        	list-style: none;
        	overflow: hidden;
        	display: block;
        	line-height: 2em;
        }
        .hjxh {
        	height: 30px;
        	background-color: #F0F8FF;
        	border-bottom: 1px solid #c0c0c0;
        }
        .hjxh a {
			text-decoration: none;
		}
        .hjxh span {
        	float: right;
        	line-height: 30px;
        	padding-right: 5px;
        }
        .main .ltck .hjxh img {
        	width: 520px;
        	height: 30px;
        	border-bottom: 1px solid #c0c0c0;
        }
        table {
        	margin: auto;
        }
        textarea{
        	border: none; /*去边框*/
        	resize: none; /*禁止文本框拉绅*/
        }
        button {
        	width: 30px;
        	height: 50px;
        	border: none;
        	color: red;
        }
        button:hover {
        	cursor: pointer;
        	background-color: red;
        	color: lime;
        }
		.kfbox .left {
			width: 240px;
			height: 600px;
			float: left;
			margin-left: -100%;
		}
		.lewrap {
			padding-left: 5px;
		}
		.kfbox .left1 {
			width: 60px;
			height: 600px;
			float: left;
			margin: auto;
			background-color: #a9a9a9;
		}
		.kfbox .left1 h3 {
			color: red;
			width: 50px;
			background-color: #fff;
			text-align: center;
			border-radius: 5px;
		}
		.kfbox .left1 span img {
			width: 50px;
		}

		.kfbox p img {
			width: 30px;
			padding: 10px;
		}
		#ico5 {
			padding-top: 100px;
		}
		.kfbox p img:hover {
			cursor: pointer;
			width: 40px;
		}
		.left2{
			width: 240px;
			height: 598px;
			border-top: 1px solid #c0c0c0;
			border-right: 1px solid #c0c0c0;
			background-color: #fff;
		}
		.left2 span {
			color: blue;
			padding: 12px 13px;
		}
        .dh {
        	border-bottom: 2px solid #00ff00;
        }
        .ls {
			border-bottom: 1px solid #c0c0c0;
        }
        .left2 span:hover{
        	cursor: pointer;
        }
        .left2 ul li {
	        padding-top: 15px;
        }
        .left2 img {
        	width: 10px;
        }
        .left2 a{
	        text-decoration: none;
	        color: #696969;
        }
       .kfbox .right {
       	width: 239px;
       	min-height: 600px;
       	border-top: 1px solid #c0c0c0;
		border-left: 1px solid #c0c0c0;
		background-color: #fff;
       	float: left;
       	margin-left: -240px;
       }
        .right .right1 span {
			color: blue;
			padding: 12px 28px;
		}
		.right2 {
			height: 230px;
			border-bottom: 1px solid #c0c0c0;
		}
		.right2 h3 {
			text-align: center;
		}
		.right2 p {
			padding-left: 5px;
		}
		.right3 span {
			color: blue;
			padding: 5px 32px;
		}
		.right4 ol li {
			font-size: 0.8em;
			line-height: 30px;
		}
		.right4 ol li:hover{
        	cursor: pointer;
        	font-size: 1em;
        }
	</style>
</head>
<body>
<div class="kfbox">
     <div class="wrap">
     <div class="main">
     		<div class="mtop">
     			<h4><span class="zx">正在咨询中...</span><span class="yh">php中文网客服1号</span></h4>
     		</div>
     		<p>    欢迎使用客服系统</p>
     		<p>    与服务器建立连接成功</p>
    <div class="ltwrap">
    	<div class="ltck">
     		<div contenteditable="true">
     		<ul>
     			<li></li>
     		</ul>
     	    </div>
     	</div>
     	<div class="hjxh">
     		<a href=""><img src="../images/hj.jpg" alt=""></a>
     		<span><a href="">消息记录</a></span>
     	</div>
     	<table>
			<tr>
				<td align="right"><textarea cols="70" rows="7" name="text"></textarea></td>
				<td align="left"><button type=button>发送</button></td>
			</tr>
		</table>	
	</div>
    </div>
    </div>
    <div class="left">
     	<div class="left1">
     		<div class="lewrap">
     		<h3>在线客服</h3>
     		<span><img src="../images/tx1.jpg" alt="头像"></span>
     		<p id="ico1"><img src="../images/ico5.jpg" alt="客服状态" title="客服状态"></p>
     		<p id="ico2"><img src="../images/ico4.jpg" alt="客户信息" title="客户信息"></p>
     		<p id="ico3"><img src="../images/ico2.jpg" alt="客户统计" title="客户统计"></p>
     		<p id="ico4"><img src="../images/ico1.jpg" alt="客户留言" title="客户留言"></p>
     		<p id="ico5"><img src="../images/ico3.jpg" alt="系统设置" title="系统设置"></p>
     		</div>
     	</div>
     	<div class="left2">
     		<p><span class="dh">对话列表</span><span class="ls">历史消息</span></p>
     		<ul>
     			<li><a href=""><img src="../images/ico4.jpg" alt="客户图标"><font style="color: #000; font-size: 1.2em;"> 宋江 山东</font></a></li>
     			<li><a href=""><img src="../images/ico4.jpg" alt="客户图标"> 张三丰 武当</a></li>
     			<li><a href=""><img src="../images/ico4.jpg" alt="客户图标"> 乔布斯 美国</a></li>
     		</ul>
     	</div>
    </div>
    <div class="right">
     	<div class="right1">
     	<p><span class="dh">访客信息</span><span class="ls">访客轨迹</span></p>
     	<div class="right2">
     		<h3>访客资料</h3>
     		<p>真实姓名：宋江</p>
     		<p>客户地区：山东</p>
     		<p>访问次数：56</p>
     		<p>IP：192.168.0.1</p>
     		<P>访问页面：php.cn/zhibo.html</P>
     	</div>
        </div>
     	<div class="right3">
     	<p><span class="dh">常用语</span><span class="ls">常用文件</span></p>
     	<div class="right4">
     		<ol>
     			<li>你好！欢迎光临PHP中文网~</li>
     			<li>在呢！请问有什么可以帮你的?</li>
     			<li>请问你是要报名学习PHP吗？</li>
     			<li>线上视频直播教学，学期三个月。</li>
     			<li>支持线上微信支付宝充值交费。</li>
     			<li>教学内容：HTML,CSS,JS,PHP等。</li>
     			<li>课后会布置作业，老师会批阅的。</li>
     			<li>期末会给一个项目作为考试标准。</li>
     		</ol>
     	</div>
        </div>
    </div>
</div>
<script type="text/javascript">
		var btn = document.getElementsByTagName('button')[0]
		var text = document.getElementsByName('text')[0]
		var list = document.getElementsByTagName('ul')[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

			var userPic = '<img src="../images/tx1.jpg" width="30" style="border-radius:50%">'
			li.innerHTML = userPic+userComment
			list.appendChild(li)
			sum += 1
			
			
				setTimeout(function(){
				var info = ['你好！欢迎光临PHP中文网','在呢！请问有什么可以帮你的?','请问你是要报名学习PHP吗？','支持线上微信支付宝充值交费。','教学内容：HTML,CSS,JS,PHP等。','线上视频直播教学，学期三个月。']
				var temp = info[Math.floor(Math.random()*6)]
				var reply = document.createElement('li')
				var kefuPic = '<img src="../images/av5.jpg" width="20" style="border-radius:50%;">'
				reply.innerHTML = kefuPic + '<span style="color:#ff00ff; font-size:0.8em;">'+temp+'</span>'

				list.appendChild(reply)
				sum += 1
			},2000)
			if (sum > 8) {
				list.innerHTML = ''
				sum = 0
			}
		}
	</script>
</body>
</html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
JS之仿53KF系统手抄图如下：
总结：写这个对话窗口的花了一天的时间主要复习了一下飞双翼布局
JS部分没有完全吃透，不是很理解后期有时间要补一下JS的基础
批改状态：未批改

老师批语：
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
Sublime Text 3 快捷键

2018-06-06 08:14:35