search

博客列表 >选项卡与机器人客服功能实战——2018年4月1日15时20分

选项卡与机器人客服功能实战——2018年4月1日15时20分

白猫警长的博客
白猫警长的博客原创
2018年04月01日 15:43:11588浏览

         实战中学习javascript的使用，第一个实战是选项卡，这个项目在每个网站基本都会用的功能，很实用。第二个是机器 人客服，做起来还挺有趣的，缺点就是对代码不是很熟练，多练咯。我分享下我自己的。

第一个：选项卡

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>选项卡</title>
	<style>
	.bos{
		width: 538px;
		height: 500px;
		margin: 20px auto;
		border: 1px solid #ccc;
		font-size: 13px;
	}
	.bos>ul{
		margin: 0;
		padding: 0;
		overflow: hidden;
		background-color: #eeeeee;
	}
	.bos>ul li{
		width: 90px;
		height: 35px;
		border-right: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
		float: left;
		list-style: none;
		text-align: center;
		line-height: 35px;
	}
	.bos>ul .mo{
		background-color: #fff;
		border-bottom: none;
		border-top: 3px solid red;
	}
	.bos ul+span{
		width: 90px;
		height: 35px;
		line-height: 35px;
		float: right;
		margin-top: -35px;
	}
	.bos ul+span>a{
		text-decoration: none; 
	}
	.bos div{
		display: none;
	}
	.bos div ul{
		margin: 0;
		padding: 10px;
	}
	.bos div ul li{
		list-style: none;
		line-height: 28px;
	}
	.bos div ul li a{
		text-decoration: none;
	}
	.bos div ul li a:hover{
		color: red;
	}
	.bos div ul li span{
		float: right;
		color: red;
	}

	</style>
</head>
<body>
	<div class="bos">
		<!-- 选项卡 -->
		<ul>
			<li class="mo">PHP教程</li>
			<li>JS教程</li>
			<li>MySQL教程</li>
			<li>CSS教程</li>
		</ul>
		<span><a href="">更多下载>></a></span>
		<!-- 列表 -->
		<div class="list" style="display: block;">
			<ul>
				<li><a href="">PHP教程  |  PHP序列化和反序列化详解</a><span>2018-3-30</span></li>
				<li><a href="">PHP教程  |  PHP序列化和反序列化详解</a><span>2018-3-30</span></li>
				<li><a href="">PHP教程  |  PHP序列化和反序列化详解</a><span>2018-3-30</span></li>
				<li><a href="">PHP教程  |  PHP序列化和反序列化详解</a><span>2018-3-30</span></li>
				<li><a href="">PHP教程  |  PHP序列化和反序列化详解</a><span>2018-3-30</span></li>
				<li><a href="">PHP教程  |  PHP序列化和反序列化详解</a><span>2018-3-30</span></li>
				<li><a href="">PHP教程  |  PHP序列化和反序列化详解</a><span>2018-3-30</span></li>
				<li><a href="">PHP教程  |  PHP序列化和反序列化详解</a><span>2018-3-30</span></li>
				<li><a href="">PHP教程  |  PHP序列化和反序列化详解</a><span>2018-3-30</span></li>
				<li><a href="">PHP教程  |  PHP序列化和反序列化详解</a><span>2018-3-30</span></li>
				<li><a href="">PHP教程  |  PHP序列化和反序列化详解</a><span>2018-3-30</span></li>
				<li><a href="">PHP教程  |  PHP序列化和反序列化详解</a><span>2018-3-30</span></li>
				<li><a href="">PHP教程  |  PHP序列化和反序列化详解</a><span>2018-3-30</span></li>
				<li><a href="">PHP教程  |  PHP序列化和反序列化详解</a><span>2018-3-30</span></li>
				<li><a href="">PHP教程  |  PHP序列化和反序列化详解</a><span>2018-3-30</span></li>
				<li><a href="">PHP教程  |  PHP序列化和反序列化详解</a><span>2018-3-30</span></li>	
			</ul>
		</div>
		<div class="list">
			<ul>
				<li><a href="">JS教程 | 怎么用AjaxFileUpload实现多文件上传</a><span>2018-3-30</span></li>
				<li><a href="">JS教程 | 怎么用AjaxFileUpload实现多文件上传</a><span>2018-3-30</span></li>
				<li><a href="">JS教程 | 怎么用AjaxFileUpload实现多文件上传</a><span>2018-3-30</span></li>
				<li><a href="">JS教程 | 怎么用AjaxFileUpload实现多文件上传</a><span>2018-3-30</span></li>
				<li><a href="">JS教程 | 怎么用AjaxFileUpload实现多文件上传</a><span>2018-3-30</span></li>
				<li><a href="">JS教程 | 怎么用AjaxFileUpload实现多文件上传</a><span>2018-3-30</span></li>
				<li><a href="">JS教程 | 怎么用AjaxFileUpload实现多文件上传</a><span>2018-3-30</span></li>
				<li><a href="">JS教程 | 怎么用AjaxFileUpload实现多文件上传</a><span>2018-3-30</span></li>
				<li><a href="">JS教程 | 怎么用AjaxFileUpload实现多文件上传</a><span>2018-3-30</span></li>
				<li><a href="">JS教程 | 怎么用AjaxFileUpload实现多文件上传</a><span>2018-3-30</span></li>
			</ul>
		</div>
		<div class="list">
			<ul>
				<li><a href="">MySQL教程 | 数据库与表显示、创建、删除-MySql参考手册</a><span>2018-3-30</span></li>
				<li><a href="">MySQL教程 | 数据库与表显示、创建、删除-MySql参考手册</a><span>2018-3-30</span></li>
				<li><a href="">MySQL教程 | 数据库与表显示、创建、删除-MySql参考手册</a><span>2018-3-30</span></li>
				<li><a href="">MySQL教程 | 数据库与表显示、创建、删除-MySql参考手册</a><span>2018-3-30</span></li>
				<li><a href="">MySQL教程 | 数据库与表显示、创建、删除-MySql参考手册</a><span>2018-3-30</span></li>
				<li><a href="">MySQL教程 | 数据库与表显示、创建、删除-MySql参考手册</a><span>2018-3-30</span></li>
				<li><a href="">MySQL教程 | 数据库与表显示、创建、删除-MySql参考手册</a><span>2018-3-30</span></li>
				<li><a href="">MySQL教程 | 数据库与表显示、创建、删除-MySql参考手册</a><span>2018-3-30</span></li>
				<li><a href="">MySQL教程 | 数据库与表显示、创建、删除-MySql参考手册</a><span>2018-3-30</span></li>
				<li><a href="">MySQL教程 | 数据库与表显示、创建、删除-MySql参考手册</a><span>2018-3-30</span></li>
			</ul>
		</div>
		<div class="list">
			<ul>
				<li><a href="">CSS教程 | 如何使用CSS样式来美化网页技术</a><span>2018-3-30</span></li>
				<li><a href="">CSS教程 | 如何使用CSS样式来美化网页技术</a><span>2018-3-30</span></li>
				<li><a href="">CSS教程 | 如何使用CSS样式来美化网页技术</a><span>2018-3-30</span></li>
				<li><a href="">CSS教程 | 如何使用CSS样式来美化网页技术</a><span>2018-3-30</span></li>
				<li><a href="">CSS教程 | 如何使用CSS样式来美化网页技术</a><span>2018-3-30</span></li>
				<li><a href="">CSS教程 | 如何使用CSS样式来美化网页技术</a><span>2018-3-30</span></li>
				<li><a href="">CSS教程 | 如何使用CSS样式来美化网页技术</a><span>2018-3-30</span></li>
				<li><a href="">CSS教程 | 如何使用CSS样式来美化网页技术</a><span>2018-3-30</span></li>
				<li><a href="">CSS教程 | 如何使用CSS样式来美化网页技术</a><span>2018-3-30</span></li>
				<li><a href="">CSS教程 | 如何使用CSS样式来美化网页技术</a><span>2018-3-30</span></li>
		</div>

	</div>

	<script type="text/javascript" src="../0331/js.js"></script>
</body>
</html>

运行实例 »

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


Javascript代码实例：

var bos = document.getElementsByClassName('bos')[0]
var ul = bos.getElementsByTagName('ul')[0]
var tab = ul.getElementsByTagName('li')

var list = bos.getElementsByTagName('div')
for (var i = 0; i<tab.length; i++) {
	tab[i].index = i
	tab[i].onmouseover = function(){

		for (var i=0; i<tab.length; i++) {
			tab[i].className = ' '
			list[i].style.display = 'none'
		} 

		this.className = 'mo'

		list[this.index].style.display = 'block'
	}
}

运行实例 »

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


运行后结果图：

xuan.png

第二个实战：机器人客服

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>智能在线客服</title>
	<style>
		div:nth-child(1){
			width: 450px;
			height: 650px;
			background-color: #1e90ff;
			margin: 30px auto;
			border-radius: 5px;
			box-shadow: 3px 3px 3px #808080;
		}
		div:nth-child(2){
			width: 400px; 
			height: 500px;
			background-color: #fff;
			margin: auto;
			border: 4px double #1e90ff;
			border-radius: 5px;

		}
		h2{
			text-align: center;
			padding-top: 10px;
			color: #fff;
		}
		ul{
			margin:0;
			padding: 10px;
			overflow: hidden;
			list-style: none;
		}
		ul li{
			margin:5px 0;
		}
		ul li img{
			margin-right: 5px;
		}
		table{
			margin: 15px auto;

		}
		table textarea{
			border: none;
			resize: none;
			border-radius: 5px;
		}
		table button{
			padding: 15px;
			border: none;
			background-color: green;
			color: #fff;
			border-radius: 5px;
		}
		table button:hover{
			background-color: coral;
		}
	</style>
</head>
<body>
	<div>
		<h2>智能在线客服</h2>
		<div contenteditable="true">
			<ul>
				<li></li>
			</ul>
		</div>
		<table>
			<tr>
				<td align="right"><textarea name="text" id="" cols="50" rows="3"></textarea></td>
				<td align="left"><button type="button">发送</button></td>
			</tr>
		</table>
	</div>
	<script type="text/javascript">
		// 1.先获取页面中的元素，如文本域，按钮，对话框
		var ann = document.getElementsByTagName('button')[0]
		var text = document.getElementsByName('text')[0]
		var dia = document.getElementsByTagName('ul')[0]
		var sum = 0

		// 2.给获取的元素添加事件
		ann.onclick = function(){
			if(text.value.length == 0){
			alert('客官，您是否忘记输入东西了')
			return false
			}

			var comeer = text.value

			//立即清空用户信息区
			text.value = ''

			//创建一个新节点li
			var li = document.createElement('li')

			li.innerHTML = comeer

			var userPic = '<img src="../0330/images/fbb.jpg" width="30" style="border-radius:50%">'
			li.innerHTML = userPic+comeer

			// 将新节点插入到对话列表中
			dia.appendChild(li)
			sum += 1

			setTimeout(function(){
				var info = ['您有什么想对我说的吗','明天一起去吃饭好吗','后天去约会了','好累啊','呼叫我做啥呢']
				var temp = info[Math.floor(Math.random()*4)]
				//取1-5之间的一个整数:Math.floor(Math.random()*6 + 1)
				var reply = document.createElement('li')
				var kefuPic = '<img src="../0330/images/jingtian.jpg" width="30" style="border-radius:50%;">'
				// reply.innerHTML = '你有啥事呀,我的帅哥哥' +kefuPic
				reply.innerHTML = kefuPic + '<span style="color:red">'+temp+'</span>'
				// reply.style.float = 'right'

				dia.appendChild(reply)
				sum += 1

			},2000)

			if (sum > 10) {
				dia.innerHTML = ''
				sum = 0
			}

		}

	</script>

</body>
</html>

运行实例 »

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


运行后效果图：

kefu.png


手抄作业：

1.jpg2.jpg3.jpg4.jpg



总结： 用到的新代码还是有很多，努力记吧。

上一条：2018/03/26（绝对定位）下一条：2018/03/26(相对定位)
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多