tab标签选项卡+仿QQ聊天自动回复机器人 - php

首页 > 博客列表 > tab标签选项卡+仿QQ聊天自动回复机器人

博主信息

博文 53

粉丝 4

访问量 49766

专题推荐

更多>

tab选项卡

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>选项卡</title>
	<style type="text/css">
		.box{
			padding: 0;
			margin: 0 auto;
			width: 508px;
			height: 500px;
			border: 1px solid #ccc;
		}
		/*选择.box的直接子元素ul*/
		.box > ul {
			margin: 0;
			padding: 0;
			background-color: #f8f8f8;
			overflow: hidden;
		}
		/*选择.box的直接子元素ul的内部元素li 设置宽高 边框居中属性*/
		.box > ul li {
			list-style-type: none;
			width: 90px;
			height:40px;
			float:left;
			border-right: 1px solid #ccc;
			border-bottom: 1px solid #ccc;
			text-align: center;
			line-height: 40px;
		}
		/*//这是啥意思？ul底下的span？*/
		.box ul+span{
			float:right;
			width:90px;
			height: 40px;
			line-height: 40px;
			margin-top: -40px;
		}
		.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;
		}

		.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>
	<div class="box">
		<ul>
			<li class="active">技术文章</li>
			<li>网站源码</li>
			<li>原生手册</li>
			<li>推荐博文</li>
		</ul>
		<span>更多下载>></span>


		<div style="display: block;">
		<ul>
			<li><a href="">js教程 | Ajax交互时被报错误如何</a><span>03-31</span></li>
			<li><a href="">js教程 | Ajax交互时被报错误如何</a><span>03-31</span></li>
			<li><a href="">js教程 | Ajax交互时被报错误如何</a><span>03-31</span></li>
			<li><a href="">js教程 | Ajax交互时被报错误如何</a><span>03-31</span></li>
			<li><a href="">js教程 | Ajax交互时被报错误如何</a><span>03-31</span></li>
			<li><a href="">js教程 | Ajax交互时被报错误如何</a><span>03-31</span></li>
			<li><a href="">js教程 | Ajax交互时被报错误如何</a><span>03-31</span></li>
			<li><a href="">js教程 | Ajax交互时被报错误如何</a><span>03-31</span></li>
			<li><a href="">js教程 | Ajax交互时被报错误如何</a><span>03-31</span></li>
			<li><a href="">js教程 | Ajax交互时被报错误如何</a><span>03-31</span></li>
			<li><a href="">js教程 | Ajax交互时被报错误如何</a><span>03-31</span></li>
			<li><a href="">js教程 | Ajax交互时被报错误如何</a><span>03-31</span></li>
			<li><a href="">js教程 | Ajax交互时被报错误如何</a><span>03-31</span></li>
			<li><a href="">js教程 | Ajax交互时被报错误如何</a><span>03-31</span></li>
			<li><a href="">js教程 | Ajax交互时被报错误如何</a><span>03-31</span></li>
			<li><a href="">js教程 | Ajax交互时被报错误如何</a><span>03-31</span></li>
			<li><a href="">js教程 | Ajax交互时被报错误如何</a><span>03-31</span></li>
			<li><a href="">js教程 | Ajax交互时被报错误如何</a><span>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>
			
		</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>
			
		</ul>
	</div>
	<div>
		<ul>
			<li><a href="">谦谦允水的 | 各大网站必用前端js选项卡。实现案列 2018--</a><span>03-31</span></li>
			<li><a href="">谦谦允水的 | 各大网站必用前端js选项卡。实现案列 2018--</a><span>03-31</span></li>
			<li><a href="">谦谦允水的 | 各大网站必用前端js选项卡。实现案列 2018--</a><span>03-31</span></li>
			<li><a href="">谦谦允水的 | 各大网站必用前端js选项卡。实现案列 2018--</a><span>03-31</span></li>
			<li><a href="">谦谦允水的 | 各大网站必用前端js选项卡。实现案列 2018--</a><span>03-31</span></li>
			<li><a href="">谦谦允水的 | 各大网站必用前端js选项卡。实现案列 2018--</a><span>03-31</span></li>
			<li><a href="">谦谦允水的 | 各大网站必用前端js选项卡。实现案列 2018--</a><span>03-31</span></li>
			<li><a href="">谦谦允水的 | 各大网站必用前端js选项卡。实现案列 2018--</a><span>03-31</span></li>
			<li><a href="">谦谦允水的 | 各大网站必用前端js选项卡。实现案列 2018--</a><span>03-31</span></li>
			<li><a href="">谦谦允水的 | 各大网站必用前端js选项卡。实现案列 2018--</a><span>03-31</span></li>
			<li><a href="">谦谦允水的 | 各大网站必用前端js选项卡。实现案列 2018--</a><span>03-31</span></li>
			<li><a href="">谦谦允水的 | 各大网站必用前端js选项卡。实现案列 2018--</a><span>03-31</span></li>
			<li><a href="">谦谦允水的 | 各大网站必用前端js选项卡。实现案列 2018--</a><span>03-31</span></li>
			<li><a href="">谦谦允水的 | 各大网站必用前端js选项卡。实现案列 2018--</a><span>03-31</span></li>
			<li><a href="">谦谦允水的 | 各大网站必用前端js选项卡。实现案列 2018--</a><span>03-31</span></li>
			<li><a href="">谦谦允水的 | 各大网站必用前端js选项卡。实现案列 2018--</a><span>03-31</span></li>
			<li><a href="">谦谦允水的 | 各大网站必用前端js选项卡。实现案列 2018--</a><span>03-31</span></li>
			<li><a href="">谦谦允水的 | 各大网站必用前端js选项卡。实现案列 2018--</a><span>03-31</span></li>
		</ul>
	</div>
	</div>
</body>
<script type="text/javascript">
	// 获取对应元素
	var box	 = document.getElementsByClassName("box")[0];//获取父级div
	var ul = box.getElementsByTagName("ul")[0];//获取顶部ul
	var tab = ul.getElementsByTagName('li');//获取tab里边所有li

	var list = box.getElementsByTagName('div');//获取里边所有div块
	for (var i = 0; i < list.length; i++) {
		//给对应的选项卡添加一个索引对应的 就是tab
		tab[i].index = i;
		tab[i].onmouseover = function(){
			for (var i=0; i<tab.length; i++) {
				//第一步先恢复初始默认值
				tab[i].className = '';
				list[i].style.display = 'none';
			}
			//设置每一个选中tab的执行效果
			this.className = 'active';
			list[this.index].style.display = 'block';
		}
	}
</script>
</html>

运行实例 »

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

自动回复机器人

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>仿QQ聊天机器人</title>
	<style type="text/css">
		div:nth-child(1) {
			width: 450px;
			height: 650px;
			background-color: #BB996C;
			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;
			overflow: hidden;
			padding: 15px;
		}
		table {
			width: 90%;
			height:80px;
			margin: auto;
		}
		textarea{
			border: none;
			resize: none;
			width: 99%;
			background-color: lightyellow;
		}
		button {
			width: 60px;
			height: 40px;
			background-color: seagreen;
			color: white;
			border: none;
		}
		button:hover {
			cursor: pointer;
			background-color: orange;
		}
	</style>
</head>
<body>
	<div>
		<h2>在线客服</h2>
		<div contenteditable="true">
			<ul>
				<li></li>
			</ul>
		</div>
		<table>
			<tr>
				<td align="right"><textarea cols="50" rows="4" name="text"></textarea></td>
				<td align="left"><button type=button>发送</button></td>
			</tr>
		</table>	
	</div>
</body>
<script type="text/javascript">
	//获取到页面中的按钮,文本域,对话内容区
	var btn = document.getElementsByTagName('button')[0];
	var text = document.getElementsByName('text')[0];
	var list = document.getElementsByTagName('ul')[0];
	var sum = 0;
	btn.onclick = function(){
		//获取用户提交的内容
		if (text.value.length == 0) {
			alert('没有输入，请输入');
			return false;
		}
		var userComment = text.value;//获取到输入的内容赋值
		text.value = '';//赋值完成清空内容；
		//创建一个新节点li
		var li = document.createElement('li');
		li.innerHTML = userComment;
		var userPic = '<img src="images/boy.jpeg" width="30" style="border-radius:50%">';//设置头像
		li.innerHTML = userPic+userComment;//拼接头像和输入内容
		//将新节点插入到对话列表中
		list.appendChild(li);
		sum += 1;
		setTimeout(function(){//计时器2秒执行
				var info = ['666','888','~~~~~~~~'];
				var temp = info[Math.floor(Math.random()*3)];//随机取整；
				var reply = document.createElement('li');
				var kefuPic = '<img src="images/sl.jpg" width="30" style="border-radius:50%;">';
				reply.innerHTML = kefuPic + '<span style="color:red">'+temp+'</span>';
				list.appendChild(reply);//拼接客服回答并创建li添加到ul 内部节点
				sum += 1;
			},2000);
		if (sum > 10) {//同时要判断sum目前节点数如果大于一定程度则清屏。
			list.innerHTML = '';
			sum = 0;
		}
	}
</script>
</html>

运行实例 »

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

批改状态：未批改

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

php中文网0316作业

2018-03-18 21:52:27