330仿PHP中文网选项卡和仿自动应答在线客服机器人-2018年4月11日 - PHP中文网第二期培训作业

Home > List of blog posts > 330仿PHP中文网选项卡和仿自动应答在线客服机器人-2018年4月11日

Blogger Information

Blog 11

fans 0

comment 0

visits 7587

Special Recommendation

More>

Related recommendations

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>实战1：选项卡</title>
	<style type="text/css">
	h2 {
		text-align: center;
	}
	.box{
		width: 538px;
		height: 500px;
		background-color: white;
		border: 1px solid #ccc;
		margin: 20px auto;
		color: #363636;
	}
	.box > ul {
		margin: 0;
		padding: 0;
		background-color: #f8f8f8;
		overflow: hidden;
	}
	.box > ul li{
		list-style-type: none;
		width: 90px;
		height:33px;
		float: left;
		border-right: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
		text-align: center;
		line-height: 36px;

	}
	.box ul + span {
		float: right;
		width: 90px;
		/*height: 36px;*/
		line-height: 36px;
		margin-top: -36px;		
	}
	.box ul +span>a {
		text-decoration: none;
		color: #696969;
	}
	.box ul li.active {
		background-color: #fff;
		font-weight: bolder;
		border-bottom: none;
		border-top: 3px solid orangered;
	}
	.box div{
		display: none;
	}
	.box div ul{
		margin: 0;
		padding: 15px;
		list-style-type: none;

	}
	.box div ul li {
		line-height: 1.5em;
		/*background-color: yellow;*/
	}
	.box div ul li a {
		color: #636363;
		text-decoration: none;
	}
	.box div ul li a:hover {
			color: #000;
	}	
	.box div ul li span {
			color: red;
			float: right;
	}	

/*
	body {
		background-size: 100px 100px;
		background-attachment: fixed;
		background-size: cover;
		background-image: url(../images/bg/sky3-1.png);
	}*/



	</style>
</head>
<body>
<!-- 学习js循环的使用 -->
	<h2>php中文网选项卡</h2>
	<div class="box">
		<ul>
			<li class="active">技术文章</li>
			<li>网站源码</li>
			<li>原生手册</li>
			<li>推荐博文</li>
		</ul>
		<span><a href="">更多下载>></a></span>
		<div style="display: block;">
			<ul>
				<li><a href="">js教程 | JSON格式的数据如何提交到服务端</a><span>2018-03-28</span></li>
				<li><a href="">js教程 | JSON格式的数据如何提交到服务端</a><span>2018-03-28</span></li>
				<li><a href="">js教程 | JSON格式的数据如何提交到服务端</a><span>2018-03-28</span></li>
				<li><a href="">js教程 | JSON格式的数据如何提交到服务端</a><span>2018-03-28</span></li>
				<li><a href="">js教程 | JSON格式的数据如何提交到服务端</a><span>2018-03-28</span></li>
				<li><a href="">js教程 | JSON格式的数据如何提交到服务端</a><span>2018-03-28</span></li>
				<li><a href="">js教程 | JSON格式的数据如何提交到服务端</a><span>2018-03-28</span></li>
				<li><a href="">js教程 | JSON格式的数据如何提交到服务端</a><span>2018-03-28</span></li>
				<li><a href="">js教程 | JSON格式的数据如何提交到服务端</a><span>2018-03-28</span></li>
				<li><a href="">js教程 | JSON格式的数据如何提交到服务端</a><span>2018-03-28</span></li>
				<li><a href="">js教程 | JSON格式的数据如何提交到服务端</a><span>2018-03-28</span></li>
				<li><a href="">js教程 | JSON格式的数据如何提交到服务端</a><span>2018-03-28</span></li>
				<li><a href="">js教程 | JSON格式的数据如何提交到服务端</a><span>2018-03-28</span></li>
				<li><a href="">js教程 | JSON格式的数据如何提交到服务端</a><span>2018-03-28</span></li>
				<li><a href="">js教程 | JSON格式的数据如何提交到服务端</a><span>2018-03-28</span></li>
				<li><a href="">js教程 | JSON格式的数据如何提交到服务端</a><span>2018-03-28</span></li>
				<li><a href="">js教程 | JSON格式的数据如何提交到服务端</a><span>2018-03-28</span></li>
				<li><a href="">js教程 | JSON格式的数据如何提交到服务端</a><span>2018-03-28</span></li>	
			</ul>
		</div>
		<div>
			<ul>
				<li><a href="">开发框架 | ThinkPHP5.1.0完整版</a><span>2018-03-30</span></li>
				<li><a href="">开发框架 | ThinkPHP5.1.0完整版</a><span>2018-03-30</span></li>
				<li><a href="">开发框架 | ThinkPHP5.1.0完整版</a><span>2018-03-30</span></li>
				<li><a href="">开发框架 | ThinkPHP5.1.0完整版</a><span>2018-03-30</span></li>
				<li><a href="">开发框架 | ThinkPHP5.1.0完整版</a><span>2018-03-30</span></li>
				<li><a href="">开发框架 | ThinkPHP5.1.0完整版</a><span>2018-03-30</span></li>
				<li><a href="">开发框架 | ThinkPHP5.1.0完整版</a><span>2018-03-30</span></li>
				<li><a href="">开发框架 | ThinkPHP5.1.0完整版</a><span>2018-03-30</span></li>
				<li><a href="">开发框架 | ThinkPHP5.1.0完整版</a><span>2018-03-30</span></li>
				<li><a href="">开发框架 | ThinkPHP5.1.0完整版</a><span>2018-03-30</span></li>
				<li><a href="">开发框架 | ThinkPHP5.1.0完整版</a><span>2018-03-30</span></li>
				<li><a href="">开发框架 | ThinkPHP5.1.0完整版</a><span>2018-03-30</span></li>
				<li><a href="">开发框架 | ThinkPHP5.1.0完整版</a><span>2018-03-30</span></li>
				<li><a href="">开发框架 | ThinkPHP5.1.0完整版</a><span>2018-03-30</span></li>
				<li><a href="">开发框架 | ThinkPHP5.1.0完整版</a><span>2018-03-30</span></li>
				<li><a href="">开发框架 | ThinkPHP5.1.0完整版</a><span>2018-03-30</span></li>
				<li><a href="">开发框架 | ThinkPHP5.1.0完整版</a><span>2018-03-30</span></li>
				<li><a href="">开发框架 | ThinkPHP5.1.0完整版</a><span>2018-03-30</span></li>				
			</ul>
		</div>
		<div>
			<ul>
				<li><a href="">MySQL | 数据库表中数据操作-MySql参考手册</a><span>2018-03-29</span></li>
				<li><a href="">MySQL | 数据库表中数据操作-MySql参考手册</a><span>2018-03-29</span></li>
				<li><a href="">MySQL | 数据库表中数据操作-MySql参考手册</a><span>2018-03-29</span></li>
				<li><a href="">MySQL | 数据库表中数据操作-MySql参考手册</a><span>2018-03-29</span></li>
				<li><a href="">MySQL | 数据库表中数据操作-MySql参考手册</a><span>2018-03-29</span></li>
				<li><a href="">MySQL | 数据库表中数据操作-MySql参考手册</a><span>2018-03-29</span></li>
				<li><a href="">MySQL | 数据库表中数据操作-MySql参考手册</a><span>2018-03-29</span></li>
				<li><a href="">MySQL | 数据库表中数据操作-MySql参考手册</a><span>2018-03-29</span></li>
				<li><a href="">MySQL | 数据库表中数据操作-MySql参考手册</a><span>2018-03-29</span></li>
				<li><a href="">MySQL | 数据库表中数据操作-MySql参考手册</a><span>2018-03-29</span></li>
				<li><a href="">MySQL | 数据库表中数据操作-MySql参考手册</a><span>2018-03-29</span></li>
				<li><a href="">MySQL | 数据库表中数据操作-MySql参考手册</a><span>2018-03-29</span></li>
				<li><a href="">MySQL | 数据库表中数据操作-MySql参考手册</a><span>2018-03-29</span></li>
				<li><a href="">MySQL | 数据库表中数据操作-MySql参考手册</a><span>2018-03-29</span></li>
				<li><a href="">MySQL | 数据库表中数据操作-MySql参考手册</a><span>2018-03-29</span></li>
				<li><a href="">MySQL | 数据库表中数据操作-MySql参考手册</a><span>2018-03-29</span></li>
				<li><a href="">MySQL | 数据库表中数据操作-MySql参考手册</a><span>2018-03-29</span></li>
				<li><a href="">MySQL | 数据库表中数据操作-MySql参考手册</a><span>2018-03-29</span></li>			
			</ul>
		</div><div>
			<ul>
				<li><a href="">龙的博客 | JavaScript仿选项卡和自动应答</a><span>2018-03-31</span></li>
				<li><a href="">龙的博客 | JavaScript仿选项卡和自动应答</a><span>2018-03-31</span></li>
				<li><a href="">龙的博客 | JavaScript仿选项卡和自动应答</a><span>2018-03-31</span></li>
				<li><a href="">龙的博客 | JavaScript仿选项卡和自动应答</a><span>2018-03-31</span></li>
				<li><a href="">龙的博客 | JavaScript仿选项卡和自动应答</a><span>2018-03-31</span></li>
				<li><a href="">龙的博客 | JavaScript仿选项卡和自动应答</a><span>2018-03-31</span></li>
				<li><a href="">龙的博客 | JavaScript仿选项卡和自动应答</a><span>2018-03-31</span></li>
				<li><a href="">龙的博客 | JavaScript仿选项卡和自动应答</a><span>2018-03-31</span></li>
				<li><a href="">龙的博客 | JavaScript仿选项卡和自动应答</a><span>2018-03-31</span></li>
				<li><a href="">龙的博客 | JavaScript仿选项卡和自动应答</a><span>2018-03-31</span></li>
				<li><a href="">龙的博客 | JavaScript仿选项卡和自动应答</a><span>2018-03-31</span></li>
				<li><a href="">龙的博客 | JavaScript仿选项卡和自动应答</a><span>2018-03-31</span></li>
				<li><a href="">龙的博客 | JavaScript仿选项卡和自动应答</a><span>2018-03-31</span></li>
				<li><a href="">龙的博客 | JavaScript仿选项卡和自动应答</a><span>2018-03-31</span></li>
				<li><a href="">龙的博客 | JavaScript仿选项卡和自动应答</a><span>2018-03-31</span></li>
				<li><a href="">龙的博客 | JavaScript仿选项卡和自动应答</a><span>2018-03-31</span></li>
				<li><a href="">龙的博客 | JavaScript仿选项卡和自动应答</a><span>2018-03-31</span></li>
				<li><a href="">龙的博客 | JavaScript仿选项卡和自动应答</a><span>2018-03-31</span></li>	
			</ul>
		</div>
	</div>
</body>
<script type="text/javascript">
<!-- 首先获取选项卡和对应的区块信息列表 -->
	var box = document.getElementsByClassName('box')[0]
	var ul = box.getElementsByTagName('ul')[0]
	var tab = ul.getElementsByTagName('li')

	var list = box.getElementsByTagName('div')
// alert(tab.length)
	// 循环给每个选项卡添加事件
	for (var i = 0; i < tab.length; i++) {
		// 给当前选项卡添加自定义属性index
		tab[i].index =i
		//给每个选项卡添加事件onmouseover
		tab[i].onmouseover=function(){
			for (var i = 0; i < tab.length; i++) {
				tab[i].className=''
				list[i].style.display ='none'
			}
			this.className = 'active'
			// alert(this.index)
			list[this.index].style.display ='block'
		}
	}
</script>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>仿机器人聊天实战</title>
	<style type="text/css">
	div:nth-child(1) {
		width: 450px;
		height: 650px;
		background-color: lightskyblue;
		margin: 30px auto;
		color: #333;
		box-shadow: 2px 2px 2px #808080;
	}
	h2 {
		text-align: center;
		margin: 20px 20px -20px 20px		
	}
	div:nth-child(2) {
		width: 400px;
		height: 500px;
		border: 4px double green;
		background-color: #efefef;
		margin: 20px auto;
	}
	ul {
		list-style-type: none;
		line-height: 2em;
		overflow: hidden;
		padding: 15px;
	}
	table {
		width: 90%;
		height: 80px;
		margin: auto;
		/*border: 1px solid red;*/
	}
	td {
		/*border: 1px solid red;*/
	}
	textarea {
		resize: none;
		border: none;
		background-color: lightyellow;
	}
	button {
		width: 60px;
		height: 40px;
		background-color: seagreen;
		color: #fff;
		border: none;
	}
	button:hover {
		cursor: pointer;
		background-color: orange;
	}

	</style>
</head>
<body>
	<div>
		<h2>在线客服</h2>
		<div>
			<ul>
				<li></li>
			</ul>
		</div>
		<table>
			<tr>
				<td><textarea cols="50" rows="2" name="text"></textarea></td>
				<td><button>发送</button></td>
			</tr>
		</table>
	</div>
</body>
<script type="text/javascript">
// 获取页面中按钮、文本域和对话窗口
	var btn = document.getElementsByTagName('button')[0]
	var text = document.getElementsByName('text')[0]
	var list = document.getElementsByTagName('ul')[0]
	var userPic = '<img src= "images/peter.jpg" width="30px" style="border-radius: 50%" >'
	var hostPic = '<img src= "images/zly.jpg" width="30px" style="border-radius: 50%" >'
	var info = ['对不起，今天真累，无能为力！','除了退货退款维修，其它的都能聊','您多包涵！','我也没办法']
	var counts=0
	text.focus()
	btn.onclick = function () {
		if (text.value.length == 0){
			alert("客官，啥也不说！？")
			text.focus()
			return false
		}
		var userComment = text.value
		text.value = ''		
		var li = document.createElement('li')
		// var userPic = '<img src= "images/peter.jpg" width="30px" style="border-radius: 50%" >'
		li.innerHTML = userPic + userComment
		list.appendChild(li)
		counts +=1
		setTimeout(function(){
			var reply = document.createElement('li')
			var temp = info[Math.floor(Math.random()*4)]
			reply.innerHTML = hostPic + '<span style="color:red">'+ temp+'</span>'
			list.appendChild(reply)
			counts +=1
		}, 2000)
		if (counts >10){
		 	list.innerHTML = ''
		 	counts =0
		 }
		text.focus()
	}


</script>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

二、运行效果

三、体会

程序看起来简单，自己敲出来完全正确不容易，只要愿意敲、多敲总会有收获，出错多，进步也多收获也多。熟能生巧！

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

413表格生成器-2018年4月16

2018-04-17 17:02:13