Community Learn Tools Library Leisure
search
English
Home > List of blog posts > js实战-仿php中文网选项卡和机器人聊天-4月2日18：04
Blogger Information
Blog 42
fans 0
comment 1
visits 26148
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
js实战-仿php中文网选项卡和机器人聊天-4月2日18：04
日薪月e的博客
Original
528 people have browsed it

本次作业是应用js编写两个实用的网页效果，一个是仿Php中文网首页的选项卡效果，随着点击不同的选项卡，会显示所点击选项卡的内容。第二个是一个仿机器人客服的聊天窗口，可以实现实时对话，并实现聊天内容自动清屏。下面是这两个效果的代码。

一、仿PHP中文网的选项卡代码：

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>js-选项卡-3月30日作业</title>
</head>
<style type="text/css">
	h2{
		text-align: center;
		margin: 10px;
		font-size: 25px;
	}	
	.box{
		width: 538px;
		height: 500px;
		border: 1px solid lightgray;
		background-color: #fff;
		margin: 20px auto;
		color: #363636;
	}
	.box > ul{
		margin: 0;
		padding: 0;
		background-color: #lightgray;
		overflow: hidden;
	}
	.box > ul li{
		list-style-type: none;
		width: 92px;
		height: 36px;
		float: left;
		border-right: 1px solid lightgray;
		border-bottom: 1px solid lightgray;
		text-align: center;
		line-height: 36px;
	}
	.box ul + span{
		float: right;
		width: 92px;
		height: 36px;
		line-height: 36px;
		margin-top: -36px;
	}
	.box ul + span >a {
			color: #696969;
			text-decoration: none;
	}
	.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>
<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 style="display: block;">
			<ul>
				<li><a href="#">Python | 教程详解python的基本数据类型</a><span class="date">2018-03-30</span></li>
				<li><a href="#">Python | 教程详解python的基本数据类型</a><span class="date">2018-03-30</span></li>
				<li><a href="#">Python | 教程详解python的基本数据类型</a><span class="date">2018-03-30</span></li>
				<li><a href="#">Python | 教程详解python的基本数据类型</a><span class="date">2018-03-30</span></li>
				<li><a href="#">Python | 教程详解python的基本数据类型</a><span class="date">2018-03-30</span></li>
				<li><a href="#">Python | 教程详解python的基本数据类型</a><span class="date">2018-03-30</span></li>
				<li><a href="#">Python | 教程详解python的基本数据类型</a><span class="date">2018-03-30</span></li>
				<li><a href="#">Python | 教程详解python的基本数据类型</a><span class="date">2018-03-30</span></li>
				<li><a href="#">Python | 教程详解python的基本数据类型</a><span class="date">2018-03-30</span></li>
				<li><a href="#">Python | 教程详解python的基本数据类型</a><span class="date">2018-03-30</span></li>
				<li><a href="#">Python | 教程详解python的基本数据类型</a><span class="date">2018-03-30</span></li>
				<li><a href="#">Python | 教程详解python的基本数据类型</a><span class="date">2018-03-30</span></li>
				<li><a href="#">Python | 教程详解python的基本数据类型</a><span class="date">2018-03-30</span></li>
				<li><a href="#">Python | 教程详解python的基本数据类型</a><span class="date">2018-03-30</span></li>
				<li><a href="#">Python | 教程详解python的基本数据类型</a><span class="date">2018-03-30</span></li>
				<li><a href="#">Python | 教程详解python的基本数据类型</a><span class="date">2018-03-30</span></li>
				<li><a href="#">Python | 教程详解python的基本数据类型</a><span class="date">2018-03-30</span></li>
				<li><a href="#">Python | 教程详解python的基本数据类型</a><span class="date">2018-03-30</span></li>
			</ul>
		</div>
		<div>
			<ul>
				<li><a href="#">前端模板 | Bootstrap响应式网站后台管理面板</a><span class="date">2018-03-30</span></li>
				<li><a href="#">前端模板 | Bootstrap响应式网站后台管理面板</a><span class="date">2018-03-30</span></li>
				<li><a href="#">前端模板 | Bootstrap响应式网站后台管理面板</a><span class="date">2018-03-30</span></li>
				<li><a href="#">前端模板 | Bootstrap响应式网站后台管理面板</a><span class="date">2018-03-30</span></li>
				<li><a href="#">前端模板 | Bootstrap响应式网站后台管理面板</a><span class="date">2018-03-30</span></li>
				<li><a href="#">前端模板 | Bootstrap响应式网站后台管理面板</a><span class="date">2018-03-30</span></li>
				<li><a href="#">前端模板 | Bootstrap响应式网站后台管理面板</a><span class="date">2018-03-30</span></li>
				<li><a href="#">前端模板 | Bootstrap响应式网站后台管理面板</a><span class="date">2018-03-30</span></li>
				<li><a href="#">前端模板 | Bootstrap响应式网站后台管理面板</a><span class="date">2018-03-30</span></li>
				<li><a href="#">前端模板 | Bootstrap响应式网站后台管理面板</a><span class="date">2018-03-30</span></li>
				<li><a href="#">前端模板 | Bootstrap响应式网站后台管理面板</a><span class="date">2018-03-30</span></li>
				<li><a href="#">前端模板 | Bootstrap响应式网站后台管理面板</a><span class="date">2018-03-30</span></li>
				<li><a href="#">前端模板 | Bootstrap响应式网站后台管理面板</a><span class="date">2018-03-30</span></li>
				<li><a href="#">前端模板 | Bootstrap响应式网站后台管理面板</a><span class="date">2018-03-30</span></li>
				<li><a href="#">前端模板 | Bootstrap响应式网站后台管理面板</a><span class="date">2018-03-30</span></li>
				<li><a href="#">前端模板 | Bootstrap响应式网站后台管理面板</a><span class="date">2018-03-30</span></li>
				<li><a href="#">前端模板 | Bootstrap响应式网站后台管理面板</a><span class="date">2018-03-30</span></li>
				<li><a href="#">前端模板 | Bootstrap响应式网站后台管理面板</a><span class="date">2018-03-30</span></li>
			</ul>
		</div>
		<div>
			<ul>
				<li><a href="#">MySQL | 修改表中的指定一条数据-MySql参考手册</a><span class="date">2018-03-30</span></li>
				<li><a href="#">MySQL | 修改表中的指定一条数据-MySql参考手册</a><span class="date">2018-03-30</span></li>
				<li><a href="#">MySQL | 修改表中的指定一条数据-MySql参考手册</a><span class="date">2018-03-30</span></li>
				<li><a href="#">MySQL | 修改表中的指定一条数据-MySql参考手册</a><span class="date">2018-03-30</span></li>
				<li><a href="#">MySQL | 修改表中的指定一条数据-MySql参考手册</a><span class="date">2018-03-30</span></li>
				<li><a href="#">MySQL | 修改表中的指定一条数据-MySql参考手册</a><span class="date">2018-03-30</span></li>
				<li><a href="#">MySQL | 修改表中的指定一条数据-MySql参考手册</a><span class="date">2018-03-30</span></li>
				<li><a href="#">MySQL | 修改表中的指定一条数据-MySql参考手册</a><span class="date">2018-03-30</span></li>
				<li><a href="#">MySQL | 修改表中的指定一条数据-MySql参考手册</a><span class="date">2018-03-30</span></li>
				<li><a href="#">MySQL | 修改表中的指定一条数据-MySql参考手册</a><span class="date">2018-03-30</span></li>
				<li><a href="#">MySQL | 修改表中的指定一条数据-MySql参考手册</a><span class="date">2018-03-30</span></li>
				<li><a href="#">MySQL | 修改表中的指定一条数据-MySql参考手册</a><span class="date">2018-03-30</span></li>
				<li><a href="#">MySQL | 修改表中的指定一条数据-MySql参考手册</a><span class="date">2018-03-30</span></li>
				<li><a href="#">MySQL | 修改表中的指定一条数据-MySql参考手册</a><span class="date">2018-03-30</span></li>
				<li><a href="#">MySQL | 修改表中的指定一条数据-MySql参考手册</a><span class="date">2018-03-30</span></li>
				<li><a href="#">MySQL | 修改表中的指定一条数据-MySql参考手册</a><span class="date">2018-03-30</span></li>
				<li><a href="#">MySQL | 修改表中的指定一条数据-MySql参考手册</a><span class="date">2018-03-30</span></li>
				<li><a href="#">MySQL | 修改表中的指定一条数据-MySql参考手册</a><span class="date">2018-03-30</span></li>
			</ul>
		</div>
		<div>
			<ul>
				<li><a href="#">沈斌的博客 | js标签选择器，聊天机器人——2018年3月31</a><span class="date">2018-03-30</span></li>
				<li><a href="#">沈斌的博客 | js标签选择器，聊天机器人——2018年3月31</a><span class="date">2018-03-30</span></li>
				<li><a href="#">沈斌的博客 | js标签选择器，聊天机器人——2018年3月31</a><span class="date">2018-03-30</span></li>
				<li><a href="#">沈斌的博客 | js标签选择器，聊天机器人——2018年3月31</a><span class="date">2018-03-30</span></li>
				<li><a href="#">沈斌的博客 | js标签选择器，聊天机器人——2018年3月31</a><span class="date">2018-03-30</span></li>
				<li><a href="#">沈斌的博客 | js标签选择器，聊天机器人——2018年3月31</a><span class="date">2018-03-30</span></li>
				<li><a href="#">沈斌的博客 | js标签选择器，聊天机器人——2018年3月31</a><span class="date">2018-03-30</span></li>
				<li><a href="#">沈斌的博客 | js标签选择器，聊天机器人——2018年3月31</a><span class="date">2018-03-30</span></li>
				<li><a href="#">沈斌的博客 | js标签选择器，聊天机器人——2018年3月31</a><span class="date">2018-03-30</span></li>
				<li><a href="#">沈斌的博客 | js标签选择器，聊天机器人——2018年3月31</a><span class="date">2018-03-30</span></li>
				<li><a href="#">沈斌的博客 | js标签选择器，聊天机器人——2018年3月31</a><span class="date">2018-03-30</span></li>
				<li><a href="#">沈斌的博客 | js标签选择器，聊天机器人——2018年3月31</a><span class="date">2018-03-30</span></li>
				<li><a href="#">沈斌的博客 | js标签选择器，聊天机器人——2018年3月31</a><span class="date">2018-03-30</span></li>
				<li><a href="#">沈斌的博客 | js标签选择器，聊天机器人——2018年3月31</a><span class="date">2018-03-30</span></li>
				<li><a href="#">沈斌的博客 | js标签选择器，聊天机器人——2018年3月31</a><span class="date">2018-03-30</span></li>
				<li><a href="#">沈斌的博客 | js标签选择器，聊天机器人——2018年3月31</a><span class="date">2018-03-30</span></li>
				<li><a href="#">沈斌的博客 | js标签选择器，聊天机器人——2018年3月31</a><span class="date">2018-03-30</span></li>
				<li><a href="#">沈斌的博客 | js标签选择器，聊天机器人——2018年3月31</a><span class="date">2018-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>

运行实例 »

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

效果图：

000.png

二、仿机器人聊天窗口代码：

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>js-仿机器人聊天-3月30日作业</title>
	<style type="text/css">
		div:nth-child(1){
			width: 450px;
			height: 650px;
			background-color: lightskyblue;
			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: lightgray;
			margin: 20px auto 10px;
		}
		ul{
			list-style-type: none;
			line-height: 2em;
			overflow: hidden;
			padding: 15px;
		}
		table{
			width: 90%;
			height: 80px;
			margin: auto;
		}
		textarea{
			resize: none;
			border: none;
			background-color: lightyellow;
		}
		button{
			width: 60px;
			height: 40px;
			background-color: seagreen;
			color: #fff;
			border: none;
		}
		button:hover{
			cursor: pointer;
			background-color: orange;
		}
	</style>
</head>
<body>
	<div>
		<h2>在线客服</h2>
		<!--添加可编辑属性：contenteditable="true"-->
		<div contenteditable="true">
			<ul>
				<li></li>
			</ul>
		</div>
		<table>
			<tr>
				<td><textarea cols="50" rows="4" name="text"></textarea></td>
				<td><button>发送</button></td>
			</tr>
		</table>
	</div>
	<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 = ''
			//创建新节点
			var li = document.createElement('li')
			var userPic = '<img src="../images/sl.jpg" width="30" style="border-radius:50%" >'
			li.innerHTML = userPic + userComment
			
			//插到页面中：父级。appendChild(当前节点)
			list.appendChild(li)
			sum += 1
			setTimeout(function(){
				//客服机器人回复数组
				var info = ['在呢啊亲亲','退货退款换货请找客服002','我能陪您聊点什么？','我是萌萌哒陪聊客服亲亲']
				//对回复进行随机取数Math.random()*4，再取整Math.floor
				var temp = info[Math.floor(Math.random()*4)]
				var reply = document.createElement('li')
				var kfPic = '<img src="../images/zly.jpg" width="30" style="border-radius:50%" >'
				reply.innerHTML = kfPic+'<span style="color:red">'+temp+'</span>'
				//定时器
				list.appendChild(reply)
				sum += 1
			},2000)
				//将聊天窗口清屏
				if (sum > 10) {
					list.innerHTML = ''
					sum = 0
				}
		}
	</script>
</body>
</html>

运行实例 »

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

效果图：

00.png

手写代码：

01.jpg

02.jpg

总结：

1、通过本次作业，主要是熟悉for循环的基本语法和应用。

2、在javascript获取元素时，要特别注意，能过元素的name\tagname\clssName等进行元素获取时，取到的元素不是唯一的，而是个数组，这时要指定元素的index才能获取到所需要的元素。例如：

var box = document.getElementsByClassName('box')[0]

var ul = box.getElementsByTagName('ul')[0]

3、对于自定义属性，不能直接写在html标签中，因为html在渲染页面时，会将这些用户自定义的标签过滤掉，因此自定属性要添加在js中。

4、随机取数的方法：Math.floor(Math.random()*6

Correction status：qualified

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