0330tab标签和自动聊天机器人

内容较多重点是：

for循环：for(i=0;i<10;i++){}
创建新节点document.createElement()
插入节点不覆盖appendChild()
js生成随机整数Math.floor(Math.random()*num)
计时器函数setTimeout()

学习原生js思路，首先选择要操作的元素，能准确取到需要的值，通过动作触发函数，函数对取到的元素进行操作，操作结果直接返回给需要的地方，原理简单但是技术高深，不易掌握，还是勤加练习吧。

tab标签代码：（tab标签案例，css上要用到!important声明，否则样式会有差别，添加active后，列表永远执行原高度声明；干脆给了active权重，一下漂亮多了）

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>tab标签</title>
</head>
<style type="text/css">
	.box{
		width:480px;
		height:360px;
		border:1px solid #aaa;
		margin:0 auto;
	}
	.box>ul{
		list-style: none;
		overflow: hidden;
		margin:0;
		padding:0;
		background: #eee;
	}
	.active{
		color:coral;
		height:38px !important;
		font-size: 1.02em;
		background: #fff;
		border-bottom: none !important;
		border-top:3px solid coral;
	}
	.box>ul li{
		float: left;
		width:80px;
		height:40px;
		line-height: 40px;
		text-align: center;
		border-right: 1px solid #aaa;
		border-bottom: 1px solid #aaa;
	}
	
	.box>ul+span{
		height:40px;
		line-height: 40px;
		padding: 0 5px;
		float: right;
		margin-top: -40px;
		font-size: 14px;
	}
	.list{
		width:95%;
		margin:0 auto;
		display: none;
	}
	.list ul{
		overflow: hidden;
		list-style: none;
		margin:0;
		padding:0;
	}
	.list li{
		margin: 10px 0;
	}
	.list li a{
		text-decoration: none;
		color: #000;
	}
	.list li a:hover{
		color:orange;
		font-size: 1.05em;
	}
	.list li span{
		float: right;
		color:coral;
	}
	
</style>
<body>
	<div class="box">
		<ul id="tablist">
			<li class="active">技术文章1</li>
			<li>技术文章2</li>
			<li>技术文章3</li>
			<li>技术文章4</li>
		</ul>
		<span>查看更多>></span>
		<div class="list" style="display:block;">
			<ul>
				<li><a href="">PHP生成带logo图像二维码的两种方法1</a><span>2018-03-30</span></li>
				<li><a href="">PHP生成带logo图像二维码的两种方法1</a><span>2018-03-30</span></li>
				<li><a href="">PHP生成带logo图像二维码的两种方法1</a><span>2018-03-30</span></li>
				<li><a href="">PHP生成带logo图像二维码的两种方法1</a><span>2018-03-30</span></li>
				<li><a href="">PHP生成带logo图像二维码的两种方法1</a><span>2018-03-30</span></li>
				<li><a href="">PHP生成带logo图像二维码的两种方法1</a><span>2018-03-30</span></li>
				<li><a href="">PHP生成带logo图像二维码的两种方法1</a><span>2018-03-30</span></li>
				<li><a href="">PHP生成带logo图像二维码的两种方法1</a><span>2018-03-30</span></li>
				<li><a href="">PHP生成带logo图像二维码的两种方法1</a><span>2018-03-30</span></li>
				<li><a href="">PHP生成带logo图像二维码的两种方法1</a><span>2018-03-30</span></li>
			</ul>
		</div>
		<div class="list">
			<ul>
				<li><a href="">PHP生成带logo图像二维码的两种方法2</a><span>2018-03-30</span></li>
				<li><a href="">PHP生成带logo图像二维码的两种方法2</a><span>2018-03-30</span></li>
				<li><a href="">PHP生成带logo图像二维码的两种方法2</a><span>2018-03-30</span></li>
				<li><a href="">PHP生成带logo图像二维码的两种方法2</a><span>2018-03-30</span></li>
				<li><a href="">PHP生成带logo图像二维码的两种方法2</a><span>2018-03-30</span></li>
				<li><a href="">PHP生成带logo图像二维码的两种方法2</a><span>2018-03-30</span></li>
				<li><a href="">PHP生成带logo图像二维码的两种方法2</a><span>2018-03-30</span></li>
				<li><a href="">PHP生成带logo图像二维码的两种方法2</a><span>2018-03-30</span></li>
				<li><a href="">PHP生成带logo图像二维码的两种方法2</a><span>2018-03-30</span></li>
				<li><a href="">PHP生成带logo图像二维码的两种方法2</a><span>2018-03-30</span></li>
			</ul>
		</div>
		<div class="list">
			<ul>
				<li><a href="">PHP生成带logo图像二维码的两种方法3</a><span>2018-03-30</span></li>
				<li><a href="">PHP生成带logo图像二维码的两种方法3</a><span>2018-03-30</span></li>
				<li><a href="">PHP生成带logo图像二维码的两种方法3</a><span>2018-03-30</span></li>
				<li><a href="">PHP生成带logo图像二维码的两种方法3</a><span>2018-03-30</span></li>
				<li><a href="">PHP生成带logo图像二维码的两种方法3</a><span>2018-03-30</span></li>
				<li><a href="">PHP生成带logo图像二维码的两种方法3</a><span>2018-03-30</span></li>
				<li><a href="">PHP生成带logo图像二维码的两种方法3</a><span>2018-03-30</span></li>
				<li><a href="">PHP生成带logo图像二维码的两种方法3</a><span>2018-03-30</span></li>
				<li><a href="">PHP生成带logo图像二维码的两种方法3</a><span>2018-03-30</span></li>
				<li><a href="">PHP生成带logo图像二维码的两种方法3</a><span>2018-03-30</span></li>
			</ul>
		</div>
		<div class="list">
			<ul>
				<li><a href="">PHP生成带logo图像二维码的两种方法4</a><span>2018-03-30</span></li>
				<li><a href="">PHP生成带logo图像二维码的两种方法4</a><span>2018-03-30</span></li>
				<li><a href="">PHP生成带logo图像二维码的两种方法4</a><span>2018-03-30</span></li>
				<li><a href="">PHP生成带logo图像二维码的两种方法4</a><span>2018-03-30</span></li>
				<li><a href="">PHP生成带logo图像二维码的两种方法4</a><span>2018-03-30</span></li>
				<li><a href="">PHP生成带logo图像二维码的两种方法4</a><span>2018-03-30</span></li>
				<li><a href="">PHP生成带logo图像二维码的两种方法4</a><span>2018-03-30</span></li>
				<li><a href="">PHP生成带logo图像二维码的两种方法4</a><span>2018-03-30</span></li>
				<li><a href="">PHP生成带logo图像二维码的两种方法4</a><span>2018-03-30</span></li>
				<li><a href="">PHP生成带logo图像二维码的两种方法4</a><span>2018-03-30</span></li>
			</ul>
		</div>
	</div>
	<script type="text/javascript">
		// 取得tab标签元素
		var box = document.getElementsByClassName('box')[0]
		var ul = box.getElementsByTagName('ul')[0]
		var li=ul.getElementsByTagName('li')
		// 取得标签对应内容
		var list=box.getElementsByTagName('div')
		// 一个循环给标签分别添加鼠标事件
		for(var i=0;i<li.length;i++){
			li[i].index=i
			li[i].onmouseover=function(){
				for (var i=0;i<li.length;i++) {//加一个清空操作，清除数据，循环实现
					li[i].className=''
					list[i].style.display='none'
				}
				this.className='active'//添加active类
				list[this.index].style.display='block'//给列表添加显示属性
			}
		}
	</script>
</body>
</html>

运行实例 »

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

tab标签运行效果：

QQ截图20180401232041.jpg

聊天机器人代码：

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>0330仿机器人聊天窗口</title>
	<style type="text/css">
		ul{list-style: none}
		.box{
			width:600px;
			height:800px;
			background:yellow;
			margin: auto;
		}
		h2{text-align: center}
		.talkbox{
			width:90%;
			height:80%;
			margin:0 auto;
			background: pink;

		}
	</style>
</head>
<body>
	<div class='box'>
		<h2>美女客服</h2>
		<div class="talkbox" contenteditable="true">
			<ul>
				<li></li>
			</ul>
		</div>
		<table>
			<tr>
				<td align="right"><textarea cols="70" rows="4" name="text"></textarea></td>
				<td align="left"><button type='button' id='btn'>发送</button></td>
			</tr>
		</table>	
	</div>
	<script type="text/javascript">
		//获取到页面中的元素
		var btn = document.getElementById('btn')
		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/me.jpg" width="30" style="border-radius:50%">'
			li.innerHTML = userPic+userComment

			//将新节点插入到对话列表中
			list.appendChild(li)
			sum += 1
			
			//添加计时器，2000毫秒
				setTimeout(function(){
				var info = ['你好老板','老板大方','老板是偶像']
				var temp = info[Math.floor(Math.random()*3)]//生成一个整数
				
				var reply = document.createElement('li')
				var kefuPic = '<img src="images/meinv.jpg" width="30" style="border-radius:50%;">'
				//回复客服消息
				reply.innerHTML = kefuPic + '<span style="color:red">'+temp+'</span>'

				list.appendChild(reply)
				sum += 1

			},2000)
			
			//超过10条清屏
			if (sum > 10) {
				list.innerHTML = ''
				sum = 0
			}

		}


	</script>
</body>
</html>

运行实例 »

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

运行效果（没进行美化，保留DOM结构练习js脚本）：

QQ截图20180401232214.jpg

手抄：

实例

实例

相关文章