js标签选择器，聊天机器人——2018年3月31日14时38分 - js

js标签选择器 for循环实现标签的选择

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>tab</title>
	<style type="text/css">
		h2 {
			text-align: center;
		}
		
		.box {
			width: 600px;
			height: 300px;
			background-color: wheat;
			border: 1px solid #ccc;
			margin: 30px auto;
			color: #363638;

		}

		.box>ul {
			margin: 0;
			padding: 0;
			background-color: #f8f8f8;
			overflow: hidden;
		}

		.box>ul>li {
			list-style-type: none;
			float: left;
			width: 90px;
			height: 30px;
			
			border-right: 1px solid #ccc;
			border-bottom: 1px solid #ccc;

			text-align: center;
			line-height: 30px;

		}

		.box ul + span {
			float: right;
			width: 90px;
			height: 30px;
			line-height: 30px;
			margin-top: -30px;

		}

		.box ul +span a {
			text-decoration: none;
			color: green;
		}

		.box li.active {
			background-color: lightgrey;
			font-weight: bolder;
			border-bottom: none;
			/*font-size: 2em;
*/
			border-top: 2px solid coral;
		}

		.box div {
			display: none;
			margin: 15px;
		}

		.box div ul {
			margin: 0;
			padding: 0;

			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 span {
			float: right;
			color: red;
		}
		.box div li a:hover {
			color: #000;
		}


	</style>
</head>
<body>
	<h2>仿中文网选项卡</h2>
	<div class="box">
		<ul>
			<li class="active">技术文章</li>
			<li>网站源码</li>
			<li>原生手册</li>
			<li>推荐博文</li>
		</ul>
		<span><a href="">更多下载>></a></span>

		<div style="display: block;">
			<ul>
				<li><a href="">js教程 | JS实现JAVA的List功能</a><span>03-30</span></li>
				<li><a href="">js教程 | JS实现JAVA的List功能</a><span>03-30</span></li>
				<li><a href="">js教程 | JS实现JAVA的List功能</a><span>03-30</span></li>
				<li><a href="">js教程 | JS实现JAVA的List功能</a><span>03-30</span></li>
				<li><a href="">js教程 | JS实现JAVA的List功能</a><span>03-30</span></li>
				<li><a href="">js教程 | JS实现JAVA的List功能</a><span>03-30</span></li>
				<li><a href="">js教程 | JS实现JAVA的List功能</a><span>03-30</span></li>
				<li><a href="">js教程 | JS实现JAVA的List功能</a><span>03-30</span></li>
				<li><a href="">js教程 | JS实现JAVA的List功能</a><span>03-30</span></li>
				<li><a href="">js教程 | JS实现JAVA的List功能</a><span>03-30</span></li>
			</ul>
		</div>
		
		<div>
			<ul>
				<li><a href="">前端模板 | 彩色音乐扬声器娱乐网站模板</a><span>03-30</span></li>
				<li><a href="">前端模板 | 彩色音乐扬声器娱乐网站模板</a><span>03-30</span></li>
				<li><a href="">前端模板 | 彩色音乐扬声器娱乐网站模板</a><span>03-30</span></li>
				<li><a href="">前端模板 | 彩色音乐扬声器娱乐网站模板</a><span>03-30</span></li>
				<li><a href="">前端模板 | 彩色音乐扬声器娱乐网站模板</a><span>03-30</span></li>
				<li><a href="">前端模板 | 彩色音乐扬声器娱乐网站模板</a><span>03-30</span></li>
				<li><a href="">前端模板 | 彩色音乐扬声器娱乐网站模板</a><span>03-30</span></li>
				<li><a href="">前端模板 | 彩色音乐扬声器娱乐网站模板</a><span>03-30</span></li>
				<li><a href="">前端模板 | 彩色音乐扬声器娱乐网站模板</a><span>03-30</span></li>
				<li><a href="">前端模板 | 彩色音乐扬声器娱乐网站模板</a><span>03-30</span></li>
			</ul>
		</div>

		<div>
			<ul>
				<li><a href="">MySQLPDO | 事务处理-MySql参考手册</a><span>03-30</span></li>
				<li><a href="">MySQLPDO | 事务处理-MySql参考手册</a><span>03-30</span></li>
				<li><a href="">MySQLPDO | 事务处理-MySql参考手册</a><span>03-30</span></li>
				<li><a href="">MySQLPDO | 事务处理-MySql参考手册</a><span>03-30</span></li>
				<li><a href="">MySQLPDO | 事务处理-MySql参考手册</a><span>03-30</span></li>
				<li><a href="">MySQLPDO | 事务处理-MySql参考手册</a><span>03-30</span></li>
				<li><a href="">MySQLPDO | 事务处理-MySql参考手册</a><span>03-30</span></li>
				<li><a href="">MySQLPDO | 事务处理-MySql参考手册</a><span>03-30</span></li>
				<li><a href="">MySQLPDO | 事务处理-MySql参考手册</a><span>03-30</span></li>
				<li><a href="">MySQLPDO | 事务处理-MySql参考手册</a><span>03-30</span></li>
				
			</ul>
		</div>

		<div>
			<ul>
				<li><a href="">wyl的博客 | js将秒数改变为经历的时间</a><span>03-30</span></li>
				<li><a href="">wyl的博客 | js将秒数改变为经历的时间</a><span>03-30</span></li>
				<li><a href="">wyl的博客 | js将秒数改变为经历的时间</a><span>03-30</span></li>
				<li><a href="">wyl的博客 | js将秒数改变为经历的时间</a><span>03-30</span></li>
				<li><a href="">wyl的博客 | js将秒数改变为经历的时间</a><span>03-30</span></li>
				<li><a href="">wyl的博客 | js将秒数改变为经历的时间</a><span>03-30</span></li>
				<li><a href="">wyl的博客 | js将秒数改变为经历的时间</a><span>03-30</span></li>
				<li><a href="">wyl的博客 | js将秒数改变为经历的时间</a><span>03-30</span></li>
				<li><a href="">wyl的博客 | js将秒数改变为经历的时间</a><span>03-30</span></li>
				<li><a href="">wyl的博客 | js将秒数改变为经历的时间</a><span>03-30</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');
		
		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>

运行实例 »

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

js 聊天客服，聊天的界面使用列表，聊天输入通过textarea

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>chat robot</title>
	<style type="text/css">
		.box {
			width: 450px;
			height: 630px;
			background-color: lightskyblue;
			border: 1px solid lightgrey;
			box-shadow: 3px 3px 3px #fff;
			margin: auto;
		}
		h2 {
			text-align: center;
			margin-top: 5px;
		}

		div:nth-child(2) {
			width: 400px;
			height: 450px;
			background-color: wheat;
			margin: 20px auto;
			border: 3px double green;
		}

		ul {
			list-style-type: none;
			line-height: 2em;
			/*overflow: hidden;*/
		}
		
		table {
			width: 400px;
			height: 85px;
			margin: auto;
		}

		textarea {
			border: none;
			resize: none;
			background-color: lightyellow;

		}

		button {
			width: 40px;
			height: 40px;
			border: none;
			background-color: lightgreen;
			text-align: center;
		}
	</style>
</head>
<body>
	<div class="box">
		<h2>在线客服</h2>

		<div contenteditable="true">
			<ul>
				<li></li>
			</ul>
		</div>

		<table>
			<tr>
				<td align="right"><textarea cols="50" rows="5" name="msg"></textarea></td>
				<td align="left"><button type="button">发送</button></td>
			</tr>
		</table>
	</div>
	
	<script type="text/javascript">
		//获取页面元素
		var btn=document.getElementsByTagName('button')[0];
		var text=document.getElementsByName('msg')[0];
		var list=document.getElementsByTagName('ul')[0];
		
		//count the msg
		var sum=0;

		btn.onclick=function () {
			if (text.value.length == 0) {
				alert('输入咨询内容');
				return false;
			}

			var msg=text.value;

			//clear user input
			text.value='';
			var send=document.createElement('li');

			send.innerHTML=msg;

			var userpic='<img src="./img/boy.jpeg" width="30" style="border-radius:50%">';

			send.innerHTML=userpic+msg;
			

			list.appendChild(send);
			sum+=1;
			//set timeout
			setTimeout(function(){
				var info=['欢迎光临小店','亲，确认下地址','这是小店的爆款'];
				var temp=info[Math.floor(Math.random()*3)];

				var reply=document.createElement('li');
				var pic='<img src="./img/fbb.jpg" width="30" style="border-radius:50%">';
				reply.innerHTML=pic+'<span style="color:red">'+temp+'</span>';
				// reply.style.float="right";
				list.appendChild(reply);
				sum+=1;
			},1000)

			if (sum>10) {
				list.innerHTML='';
				sum=0;
			}

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

运行实例 »

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

js更新列表元素使用appendChild()方法，通过字符串拼接将头像和聊天内容写在一起。头像的设置border-radius:50%.

实现中获取元素是个数组，没有跟索引，后面调用报 Type Error。

实例

实例

全部评论