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

Home > List of blog posts > tab标签选项卡+仿QQ聊天自动回复机器人

Blogger Information

Blog 53

fans 4

comment 3

visits 41721

Special Recommendation

More>

Related recommendations

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>

运行实例 »

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

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

php中文网0316作业

2018-03-18 21:52:27