Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 选项卡和简易回复机器人-2018年4月2日
Blogger Information
Blog 29
fans 0
comment 1
visits 18728
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
选项卡和简易回复机器人-2018年4月2日
小小的菜的博客
Original
504 people have browsed it

选项卡---完全仿朱老师的去做的，还需要反复学习。

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>选项卡</title>
	<style type="text/css">
		h2 {
			text-align: center;
		}
		.box {
			width:538px;
			height: 580px;
			/*background-color: #F8F8FF;*/
			margin: auto;
			border:1px solid #D3D3D3;
		}
		.box > ul {
			margin: 0;
			padding: 0;
			background-color:#F5F5F5;
			overflow: hidden;
		}
		.box > ul li {
			list-style-type: none;
			width:90px;
			height: 36px;
			float:left;

			line-height: 36px;
			text-align: center;
			border-right: 1px solid #D3D3D3;
			border-bottom:1px solid #D3D3D3;
			border-radius:2px;

		}
		.box > ul+span {
			float:right;
			width:90px;
			height: 36px;
			line-height: 36px;
			margin-top:-36px;			
		}
		.box > ul+span>a {
			text-decoration: none;
			color:gray;
		}
		.box li.active {
			background-color: white;
			border-bottom:none;
			border-top:3px solid #ff7f50;
			box-shadow:2px 5px 2px lightgray;
		}
		.box div {
			display:none;
		}
		.box div ul {
			margin: 10px auto;
			padding: 10px;
			list-style-type: none;
		}
		.box div ul li{
			line-height: 1.6em;
		}
		.box div ul li a{
			text-decoration: none;
			color:gray;
		}
		.box div ul li a:hover {
			color:black;
		}
		.box div ul li span {
			float:right;
			color:red;
		}
	</style>
</head>
<body>
		<!-- 标题 -->
		<h2>php中文网选项卡项目</h2>
		
		<!-- 选项卡 -->
		<div class="box">
			<!-- 选项 -->
			<ul>
				<li class="active">技术文章</li>
				<li>网站源码</li>
				<li>原生手册</li>
				<li>推荐博文</li>
			</ul>
			<span><a href="">更多下载>></a></span>
			<!-- 列表 -->
			<div class="box1" style="display:block">
				<ul>
					<li><a href="">js教程|JS实现JAVA的List功能</a><span>2018-03-31</span></li>
					<li><a href="">js教程|JS实现JAVA的List功能</a><span>2018-03-31</span></li>
					<li><a href="">js教程|JS实现JAVA的List功能</a><span>2018-03-31</span></li>
					<li><a href="">js教程|JS实现JAVA的List功能</a><span>2018-03-31</span></li>
					<li><a href="">js教程|JS实现JAVA的List功能</a><span>2018-03-31</span></li>
					<li><a href="">js教程|JS实现JAVA的List功能</a><span>2018-03-31</span></li>
					<li><a href="">js教程|JS实现JAVA的List功能</a><span>2018-03-31</span></li>
					<li><a href="">js教程|JS实现JAVA的List功能</a><span>2018-03-31</span></li>
					<li><a href="">js教程|JS实现JAVA的List功能</a><span>2018-03-31</span></li>
					<li><a href="">js教程|JS实现JAVA的List功能</a><span>2018-03-31</span></li>
					<li><a href="">js教程|JS实现JAVA的List功能</a><span>2018-03-31</span></li>
					<li><a href="">js教程|JS实现JAVA的List功能</a><span>2018-03-31</span></li>
					<li><a href="">js教程|JS实现JAVA的List功能</a><span>2018-03-31</span></li>
					<li><a href="">js教程|JS实现JAVA的List功能</a><span>2018-03-31</span></li>
					<li><a href="">js教程|JS实现JAVA的List功能</a><span>2018-03-31</span></li>
					<li><a href="">js教程|JS实现JAVA的List功能</a><span>2018-03-31</span></li>
					<li><a href="">js教程|JS实现JAVA的List功能</a><span>2018-03-31</span></li>
					<li><a href="">js教程|JS实现JAVA的List功能</a><span>2018-03-31</span></li>
					<li><a href="">js教程|JS实现JAVA的List功能</a><span>2018-03-31</span></li>
					<li><a href="">js教程|JS实现JAVA的List功能</a><span>2018-03-31</span></li>
				</ul>
			</div>
			<div>
				<ul>
					<li><a href="">前端模板|彩色音乐扬声器娱乐网站模板</a><span>03-31</span></li>
					<li><a href="">前端模板|彩色音乐扬声器娱乐网站模板</a><span>03-31</span></li>
					<li><a href="">前端模板|彩色音乐扬声器娱乐网站模板</a><span>03-31</span></li>
					<li><a href="">前端模板|彩色音乐扬声器娱乐网站模板</a><span>03-31</span></li>
					<li><a href="">前端模板|彩色音乐扬声器娱乐网站模板</a><span>03-31</span></li>
					<li><a href="">前端模板|彩色音乐扬声器娱乐网站模板</a><span>03-31</span></li>
					<li><a href="">前端模板|彩色音乐扬声器娱乐网站模板</a><span>03-31</span></li>
					<li><a href="">前端模板|彩色音乐扬声器娱乐网站模板</a><span>03-31</span></li>
					<li><a href="">前端模板|彩色音乐扬声器娱乐网站模板</a><span>03-31</span></li>
					<li><a href="">前端模板|彩色音乐扬声器娱乐网站模板</a><span>03-31</span></li>
					<li><a href="">前端模板|彩色音乐扬声器娱乐网站模板</a><span>03-31</span></li>
					<li><a href="">前端模板|彩色音乐扬声器娱乐网站模板</a><span>03-31</span></li>
					<li><a href="">前端模板|彩色音乐扬声器娱乐网站模板</a><span>03-31</span></li>
					<li><a href="">前端模板|彩色音乐扬声器娱乐网站模板</a><span>03-31</span></li>
					<li><a href="">前端模板|彩色音乐扬声器娱乐网站模板</a><span>03-31</span></li>
					<li><a href="">前端模板|彩色音乐扬声器娱乐网站模板</a><span>03-31</span></li>
					<li><a href="">前端模板|彩色音乐扬声器娱乐网站模板</a><span>03-31</span></li>
					<li><a href="">前端模板|彩色音乐扬声器娱乐网站模板</a><span>03-31</span></li>
					<li><a href="">前端模板|彩色音乐扬声器娱乐网站模板</a><span>03-31</span></li>
					<li><a href="">前端模板|彩色音乐扬声器娱乐网站模板</a><span>03-31</span></li>
				</ul>
			</div>
			<div>
				<ul>
					<li><a href="">MySQL|CentOS7安装MySQL5.7密码查看与修改-</a><span>03-31</span></li>
					<li><a href="">MySQL|CentOS7安装MySQL5.7密码查看与修改-</a><span>03-31</span></li>
					<li><a href="">MySQL|CentOS7安装MySQL5.7密码查看与修改-</a><span>03-31</span></li>
					<li><a href="">MySQL|CentOS7安装MySQL5.7密码查看与修改-</a><span>03-31</span></li>
					<li><a href="">MySQL|CentOS7安装MySQL5.7密码查看与修改-</a><span>03-31</span></li>
					<li><a href="">MySQL|CentOS7安装MySQL5.7密码查看与修改-</a><span>03-31</span></li>
					<li><a href="">MySQL|CentOS7安装MySQL5.7密码查看与修改-</a><span>03-31</span></li>
					<li><a href="">MySQL|CentOS7安装MySQL5.7密码查看与修改-</a><span>03-31</span></li>
					<li><a href="">MySQL|CentOS7安装MySQL5.7密码查看与修改-</a><span>03-31</span></li>
					<li><a href="">MySQL|CentOS7安装MySQL5.7密码查看与修改-</a><span>03-31</span></li>
					<li><a href="">MySQL|CentOS7安装MySQL5.7密码查看与修改-</a><span>03-31</span></li>
					<li><a href="">MySQL|CentOS7安装MySQL5.7密码查看与修改-</a><span>03-31</span></li>
					<li><a href="">MySQL|CentOS7安装MySQL5.7密码查看与修改-</a><span>03-31</span></li>
					<li><a href="">MySQL|CentOS7安装MySQL5.7密码查看与修改-</a><span>03-31</span></li>
					<li><a href="">MySQL|CentOS7安装MySQL5.7密码查看与修改-</a><span>03-31</span></li>
					<li><a href="">MySQL|CentOS7安装MySQL5.7密码查看与修改-</a><span>03-31</span></li>
					<li><a href="">MySQL|CentOS7安装MySQL5.7密码查看与修改-</a><span>03-31</span></li>
					<li><a href="">MySQL|CentOS7安装MySQL5.7密码查看与修改-</a><span>03-31</span></li>
					<li><a href="">MySQL|CentOS7安装MySQL5.7密码查看与修改-</a><span>03-31</span></li>
					<li><a href="">MySQL|CentOS7安装MySQL5.7密码查看与修改-</a><span>03-31</span></li>
				</ul>
			</div>
			<div>
				<ul>
					<li><a href="">日薪月e的博客|JS-明星相册和迷你计算器-2018年3月30日17</a><span>03-31</span></li>
					<li><a href="">日薪月e的博客|JS-明星相册和迷你计算器-2018年3月30日17</a><span>03-31</span></li>
					<li><a href="">日薪月e的博客|JS-明星相册和迷你计算器-2018年3月30日17</a><span>03-31</span></li>
					<li><a href="">日薪月e的博客|JS-明星相册和迷你计算器-2018年3月30日17</a><span>03-31</span></li>
					<li><a href="">日薪月e的博客|JS-明星相册和迷你计算器-2018年3月30日17</a><span>03-31</span></li>
					<li><a href="">日薪月e的博客|JS-明星相册和迷你计算器-2018年3月30日17</a><span>03-31</span></li>
					<li><a href="">日薪月e的博客|JS-明星相册和迷你计算器-2018年3月30日17</a><span>03-31</span></li>
					<li><a href="">日薪月e的博客|JS-明星相册和迷你计算器-2018年3月30日17</a><span>03-31</span></li>
					<li><a href="">日薪月e的博客|JS-明星相册和迷你计算器-2018年3月30日17</a><span>03-31</span></li>
					<li><a href="">日薪月e的博客|JS-明星相册和迷你计算器-2018年3月30日17</a><span>03-31</span></li>
					<li><a href="">日薪月e的博客|JS-明星相册和迷你计算器-2018年3月30日17</a><span>03-31</span></li>
					<li><a href="">日薪月e的博客|JS-明星相册和迷你计算器-2018年3月30日17</a><span>03-31</span></li>
					<li><a href="">日薪月e的博客|JS-明星相册和迷你计算器-2018年3月30日17</a><span>03-31</span></li>
					<li><a href="">日薪月e的博客|JS-明星相册和迷你计算器-2018年3月30日17</a><span>03-31</span></li>
					<li><a href="">日薪月e的博客|JS-明星相册和迷你计算器-2018年3月30日17</a><span>03-31</span></li>
					<li><a href="">日薪月e的博客|JS-明星相册和迷你计算器-2018年3月30日17</a><span>03-31</span></li>
					<li><a href="">日薪月e的博客|JS-明星相册和迷你计算器-2018年3月30日17</a><span>03-31</span></li>
					<li><a href="">日薪月e的博客|JS-明星相册和迷你计算器-2018年3月30日17</a><span>03-31</span></li>
					<li><a href="">日薪月e的博客|JS-明星相册和迷你计算器-2018年3月30日17</a><span>03-31</span></li>
					<li><a href="">日薪月e的博客|JS-明星相册和迷你计算器-2018年3月30日17</a><span>03-31</span></li>
				</ul>
			</div>
		</div>
		<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(box.nodeName)

			for (var i=0; i<tab.length; i++) {
				tab[i].index = i
				tab[i].onmouseover = function(){
					// alert(1)
					for (var i=0; i<tab.length; i++) {
						tab[i].className = ''
						list[i].style.display = ''
					}
					this.className = 'active'
					// alert(this.index)
					list[this.index].style.display = 'block'
				}
				 
			}
                        //问题代码
			// 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>

运行实例 »

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

自动回复机器人---只能先实现功能，熟悉一下代码，后面再反复学习了。

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>聊天机器人</title>
</head>
<body>
	<div>
		
		<div contenteditable="true">
			<h2>机器人客服</h2>
			<ul>
				<li></li>
			</ul>
		</div>
		<table>
			<tr>
			<td><textarea name="text" id="" cols="50" rows="5"></textarea></td>
				<td><button>发送</button></td>
			</tr>
		</table>
	</div>
	<script type="text/javascript">
		var text = document.getElementsByName('text')[0]
		var btn = document.getElementsByTagName('button')[0]
		var list = document.getElementsByTagName('ul')[0]

		btn.onclick = function(){
			// alert(text.value)
			if (text.value.length == 0) {
				alert('请不要发送空信息')
				return false
			}
			var info = text.value
			text.value = ''
			var li = document.createElement('li')
			var hphone = '<img src="../images/sl.jpg" width="30" style="border-radius:50%">'
			li.innerHTML = hphone + info
			list.appendChild(li)

			setTimeout(function(){
				var replyInfo = ['你好呀','客官想要买什么呀','您先自己看看吧','都要打包吗']
				var temp = replyInfo[Math.floor(Math.random()*4)]
				var reply = document.createElement('li')
				var cphone ='<img src="../images/boy.jpeg" width="30" style="border-radius:50%">'
				reply.innerHTML = cphone + temp
				list.appendChild(reply)
			},1000)
				
			
		}
	</script>
</body>
</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