简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >选项卡和简易回复机器人-2018年4月2日

选项卡和简易回复机器人-2018年4月2日

小小的菜的博客
小小的菜的博客原创
2018年04月02日 18:14:21498浏览

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

实例

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

运行实例 »

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


上一条：JS实现在线机器人客户实例-2018年3月30日下一条：3月29日作业
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多