search

博客列表 >选项卡和仿聊天机器人总结----2018年4月9号

选项卡和仿聊天机器人总结----2018年4月9号

学习不刻苦 不如卖红薯
学习不刻苦 不如卖红薯原创
2018年04月09日 12:35:26593浏览

聊天机器人：

用js写出聊天机器人，先获取对象的元素，第二步对点击事件进行操作。内容不是很容易需要一定的逻辑和熟练性。

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>实战2：聊天机器人</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-bottom: -10px;
		}
		div:nth-child(2) {
			width: 400px;
			height: 500px;
			border: 4px double green;
			background-color: #efefef;
			margin: 20px auto 10px;
		}
		
		ul {
			list-style: none;
			line-height: 2em;
			/*border: 1px solid red;*/
			overflow: hidden;
			padding: 15px;
		}

		table {
			width: 90%;
			height:80px;
			margin: auto;
		}

		textarea{
			/*width: 300px;*/
			border: none;
			resize: none;
			background-color: lightyellow;
			
		}
		button {
			width: 60px;
			height: 40px;
			background-color: seagreen;
			color: white;
			border: none;
			/*text-align: left;*/

		}
		button:hover {
			cursor: pointer;
			background-color: orange;
		}
	</style>
</head>
<body>
	<div>
		<h2>在线客服</h2>
		<div contenteditable="true">
			<ul>
				<li></li>
			</ul>
		</div>
		<table>
			<tr>
				<td><textarea cols="50" rows="4" name="text"></textarea></td>
				<td><button type="button">发送</button></td>
			</tr>
		</table>
	</div>
	<script type="text/javascript">
		//1.获取文本，文本框，按钮的对象
		var btn = document.getElementsByTagName('button')[0]
		var text = document.getElementsByName('text')[0]
		var list = document.getElementsByTagName('ul')[0]
		var sum = 0
		//2.点击按钮生成操作
		btn.onclick = function(){
			if(text.value.length == 0){
				alert('客观请输入内容')
				return false
			}

			var userComment = text.value
			//3.立即清空
			text.value = ''
			
			var li = document.createElement('li')
			li.innerHTML = userComment
			var userPic = '<img src="fbb.jpg" width="30" style="border-radius:50%"/>'
			li.innerHTML = userPic+userComment
			list.appendChild(li)
			sum+=1
				setTimeout(function(){
					var info = ['客观你好啊','我现在很忙','你好烦呀，不懂得怜香惜玉','你好先森，请问需要什么服务，除了陪吃陪喝陪玩耍啥子都行']
					var temp = info[Math.floor(Math.random()*3)]
					var reply = document.createElement('li')
					var kefuPic = '<img src="gyy.jpg" width="30" style="border-radius:50%"/>'
					reply.innerHTML = kefuPic+'<span style="color:red">'+temp+'</span>'
					list.appendChild(reply)
					sum += 1					
				},2000)

				if(sum>10){
					list.innerHTML = ''
					sum = 0
				}
		}
	</script>
</body>
</html>

运行实例 »

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

选项卡：

选项卡事件用js写出，先获取对象元素，获取的元素涉及到父对象和标签的使用。然后对按钮进行操作涉及到循环。循环前要把标签和列表的属性去除，对对象进行操作。

实例

<!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;
			/*border-bottom: 1px solid #ccc;*/
			overflow: hidden;
		}
		.box > ul li {
			list-style-type: none;
			width: 90px;
			height:36px;
			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 {
			color: #696969;
			text-decoration: none;
		}

		.box 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: 10px;

			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 {
			float: right;
			color: red;

		}
	</style>
</head>
<body>
	<h2>选项卡</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>js教程 | vue.js中created方法的使用详解<span>03-30</span></li>
				<li>js教程 | vue.js中created方法的使用详解<span>03-30</span></li>
				<li>js教程 | vue.js中created方法的使用详解<span>03-30</span></li>
				<li>js教程 | vue.js中created方法的使用详解<span>03-30</span></li>
				<li>js教程 | vue.js中created方法的使用详解<span>03-30</span></li>
				<li>js教程 | vue.js中created方法的使用详解<span>03-30</span></li>
				<li>js教程 | vue.js中created方法的使用详解<span>03-30</span></li>
				<li>js教程 | vue.js中created方法的使用详解<span>03-30</span></li>
				<li>js教程 | vue.js中created方法的使用详解<span>03-30</span></li>
				<li>js教程 | vue.js中created方法的使用详解<span>03-30</span></li>
				<li>js教程 | vue.js中created方法的使用详解<span>03-30</span></li>
				<li>js教程 | vue.js中created方法的使用详解<span>03-30</span></li>
				<li>js教程 | vue.js中created方法的使用详解<span>03-30</span></li>
				<li>js教程 | vue.js中created方法的使用详解<span>03-30</span></li>
				<li>js教程 | vue.js中created方法的使用详解<span>03-30</span></li>
				<li>js教程 | vue.js中created方法的使用详解<span>03-30</span></li>
				<li>js教程 | vue.js中created方法的使用详解<span>03-30</span></li>
				<li>js教程 | vue.js中created方法的使用详解<span>03-30</span></li>
			</ul>
		</div>
		<div>
			<ul>
				<li>前段模板 | Bootstrap响应式网站后台管理面板<span>03-30</span></li>
				<li>前段模板 | Bootstrap响应式网站后台管理面板<span>03-30</span></li>
				<li>前段模板 | Bootstrap响应式网站后台管理面板<span>03-30</span></li>
				<li>前段模板 | Bootstrap响应式网站后台管理面板<span>03-30</span></li>
				<li>前段模板 | Bootstrap响应式网站后台管理面板<span>03-30</span></li>
				<li>前段模板 | Bootstrap响应式网站后台管理面板<span>03-30</span></li>
				<li>前段模板 | Bootstrap响应式网站后台管理面板<span>03-30</span></li>
				<li>前段模板 | Bootstrap响应式网站后台管理面板<span>03-30</span></li>
				<li>前段模板 | Bootstrap响应式网站后台管理面板<span>03-30</span></li>
				<li>前段模板 | Bootstrap响应式网站后台管理面板<span>03-30</span></li>	
				<li>前段模板 | Bootstrap响应式网站后台管理面板<span>03-30</span></li>
				<li>前段模板 | Bootstrap响应式网站后台管理面板<span>03-30</span></li>
				<li>前段模板 | Bootstrap响应式网站后台管理面板<span>03-30</span></li>
				<li>前段模板 | Bootstrap响应式网站后台管理面板<span>03-30</span></li>
				<li>前段模板 | Bootstrap响应式网站后台管理面板<span>03-30</span></li>
				<li>前段模板 | Bootstrap响应式网站后台管理面板<span>03-30</span></li>
				<li>前段模板 | Bootstrap响应式网站后台管理面板<span>03-30</span></li>
				<li>前段模板 | Bootstrap响应式网站后台管理面板<span>03-30</span></li>				
			</ul>
		</div>
		<div>
			<ul>
				<li>MYSQL | MySQL的大小写敏感性 lower_case_table_names<span>03-30</span></li>
				<li>MYSQL | MySQL的大小写敏感性 lower_case_table_names<span>03-30</span></li>
				<li>MYSQL | MySQL的大小写敏感性 lower_case_table_names<span>03-30</span></li>
				<li>MYSQL | MySQL的大小写敏感性 lower_case_table_names<span>03-30</span></li>
				<li>MYSQL | MySQL的大小写敏感性 lower_case_table_names<span>03-30</span></li>
				<li>MYSQL | MySQL的大小写敏感性 lower_case_table_names<span>03-30</span></li>
				<li>MYSQL | MySQL的大小写敏感性 lower_case_table_names<span>03-30</span></li>
				<li>MYSQL | MySQL的大小写敏感性 lower_case_table_names<span>03-30</span></li>
				<li>MYSQL | MySQL的大小写敏感性 lower_case_table_names<span>03-30</span></li>
				<li>MYSQL | MySQL的大小写敏感性 lower_case_table_names<span>03-30</span></li>	
				<li>MYSQL | MySQL的大小写敏感性 lower_case_table_names<span>03-30</span></li>
				<li>MYSQL | MySQL的大小写敏感性 lower_case_table_names<span>03-30</span></li>
				<li>MYSQL | MySQL的大小写敏感性 lower_case_table_names<span>03-30</span></li>
				<li>MYSQL | MySQL的大小写敏感性 lower_case_table_names<span>03-30</span></li>
				<li>MYSQL | MySQL的大小写敏感性 lower_case_table_names<span>03-30</span></li>
				<li>MYSQL | MySQL的大小写敏感性 lower_case_table_names<span>03-30</span></li>
				<li>MYSQL | MySQL的大小写敏感性 lower_case_table_names<span>03-30</span></li>
				<li>MYSQL | MySQL的大小写敏感性 lower_case_table_names<span>03-30</span></li>			
			</ul>
		</div>
		<div>
			<ul>
				<li>闫少攀的博客 | jquery自定义属性和样式操作-2018年4月8日<span>03-30</span></li>
				<li>闫少攀的博客 | jquery自定义属性和样式操作-2018年4月8日<span>03-30</span></li>
				<li>闫少攀的博客 | jquery自定义属性和样式操作-2018年4月8日<span>03-30</span></li>
				<li>闫少攀的博客 | jquery自定义属性和样式操作-2018年4月8日<span>03-30</span></li>
				<li>闫少攀的博客 | jquery自定义属性和样式操作-2018年4月8日<span>03-30</span></li>
				<li>闫少攀的博客 | jquery自定义属性和样式操作-2018年4月8日<span>03-30</span></li>
				<li>闫少攀的博客 | jquery自定义属性和样式操作-2018年4月8日<span>03-30</span></li>
				<li>闫少攀的博客 | jquery自定义属性和样式操作-2018年4月8日<span>03-30</span></li>
				<li>闫少攀的博客 | jquery自定义属性和样式操作-2018年4月8日<span>03-30</span></li>
				<li>闫少攀的博客 | jquery自定义属性和样式操作-2018年4月8日<span>03-30</span></li>
				<li>闫少攀的博客 | jquery自定义属性和样式操作-2018年4月8日<span>03-30</span></li>
				<li>闫少攀的博客 | jquery自定义属性和样式操作-2018年4月8日<span>03-30</span></li>
				<li>闫少攀的博客 | jquery自定义属性和样式操作-2018年4月8日<span>03-30</span></li>
				<li>闫少攀的博客 | jquery自定义属性和样式操作-2018年4月8日<span>03-30</span></li>
				<li>闫少攀的博客 | jquery自定义属性和样式操作-2018年4月8日<span>03-30</span></li>
				<li>闫少攀的博客 | jquery自定义属性和样式操作-2018年4月8日<span>03-30</span></li>
				<li>闫少攀的博客 | jquery自定义属性和样式操作-2018年4月8日<span>03-30</span></li>
				<li>闫少攀的博客 | jquery自定义属性和样式操作-2018年4月8日<span>03-30</span></li>
			</ul>
		</div>
	</div>
	<script type="text/javascript">
		//1.获取选项卡与显示的内容区块对象
		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)
		//2.给每一个选项卡添加事件，因为有四个选项卡，所以要用到循环
		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 = 'active'
			//只显示当前的选项卡
				list[this.index].style.display = 'block'
			}
		}
	</script>
</body>
</html>

运行实例 »

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

手抄代码：

1.jpg

21.jpg

总结：明白了写代码要讲究逻辑要先写什么后写什么，要记住哪些。

var 声明一个变量获取元素document.get..tagName()

btn.onclick = function(){}

等等收益良多！！

上一条：3.8号作业之----jQuery 添加或移动元素到目标节点！下一条：appendTo(),prependTo(),insertAfter(),insertBefore() 2018-4-8
machine
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多