search

博客列表 >330仿PHP中文网选项卡和仿自动应答在线客服机器人-2018年4月11日

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

huang2018的博客
huang2018的博客原创
2018年04月11日 18:08:31727浏览

其实已完成几天了，最近几天忙，要抽时间跟上课程节奏，坚持跟直播。最近几天的作业也基本完成了，抽时间放上来。

一、代码

实例

<!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>

运行实例 »

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

二、运行效果

1523440913190671.jpg

1523441092615915.jpg

三、体会

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


上一条：仿选项卡和机器人聊天——2018年3月30日下一条：410-$.ajax()之注册验证
javascript
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多