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

Home > List of blog posts > 选项卡和仿聊天机器人总结----2018年4月9号

Blogger Information

Blog 18

fans 0

comment 0

visits 9277

Special Recommendation

More>

Related recommendations

实例

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

运行实例 »

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

手抄代码：

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

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

btn.onclick = function(){}

等等收益良多！！

Correction status：Uncorrected

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

识人

1970-01-01 08:00:00