search

博客列表 >JS实现在线机器人客户实例-2018年3月30日

JS实现在线机器人客户实例-2018年3月30日

在路上的博客
在路上的博客原创
2018年04月02日 18:14:29865浏览

案例中用到html+css+js实现一个简单的在线机器人客服，涉及到用JS获取html页面中的一些内容

document.getElementsByTagName，document.getElementsByName，document.getElementById以及创建一个新的节点document.createElement以及如何将节点插入到父级  demo：父级.appendChild（当前节点）


用setTimeout 实现定时器功能

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>机器人对话框</title>
	<style type="text/css">
		.box {
			width: 450px;
			height: 650px;
			background-color: lightskyblue;
			margin: 50px auto;
			color: #333;
			box-shadow: 3px 3px 3px 3px #808080;
		}
		h2{
			text-align: center;
			margin-bottom:10px;
		}
		.box1{
			width: 400px;
			height: 500px;
			border: 4px solid pink;
			margin: 20px auto 10px;
		}
		ul {
			list-style-type: none;
			line-height: 2em;
			padding: 15px;
		}
		table{
			width: 90%;
			height: 80px;
			margin: auto;
		}
		textarea{
			resize: none;
			border: none;
			background-color: #fff;
		}
		button {
			width: 60px;
			height: 40px;
			background-color: seagreen;
			color: white;
			border: none;
		}

		button:hover {
			cursor: pointer;
			background-color: orange;
		}
	</style>
</head>
<body>
	<div class="box">
		<h2>在线客服</h2>

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

		<table>
			<tr>
				<td><textarea cols="50" rows="5" 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
		// alert(list.length)

		btn.onclick = function () {

			// (text.value.length == 0) 判断用户是否输入数据，text返回的值的长度
			if (text.value.length == 0) {   
				alert('请输入内容')
				return false
			}
			var userComment = text.value
			// alert(text.value)
			text.value = ''
			var li = document.createElement('li')

			var userPic ='<img src="2.jpg" width="30" style="border-radius:50%" />'
				
			li.innerHTML = userPic + userComment

			
			// 插入到页面中，  父级.appendChild(当前节点)
			list.appendChild(li)
				// alert(text.value)
				// sum = sum +1 下面是简写
				sum += 1

				// 回复部分

				setTimeout(function(){
					var shuz = ['你好，在的','有什么可以帮到你的','你好，很高兴为你服务']
						// 产生一个随机数据
					var temp = shuz[Math.floor(Math.random()*3)]

					var hf = document.createElement('li')
					var kefuPic ='<img src="1.jpg" width="30" style="border-radius:50%" />'
				hf.innerHTML = kefuPic + '<span style="color:red">'+temp+'</span>'
				list.appendChild(hf)

					sum += 1
				},2550)
				if (sum > 10){
					list.innerHTML = ''
					sum = 0
				}

				
				

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

运行实例 »

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

2.png


仿PHp中文网选项卡

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>选项卡</title>
	<style type="text/css">
	.box{
		width: 540px;
		height: 500px;
		border: 1px solid #363636;
		margin: auto;
		/*color: #363636;*/

	}

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

	.box > ul li{
		float: left;
		list-style-type: none;
		width: 90px;
		height: 35px;
		border-right: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
		text-align: center;
		line-height: 35px;
	}

	.box >ul +span{
		float: right;
		width: 90px;
		height: 35px;
		line-height: 35px;
		margin-top: -35px;
	}
	.box >ul +span a{
		color: #696969;
		text-decoration: none;
	}
	.box .mr {
		border-bottom: none;
		font-weight: bolder;
		border-top: 3px solid orangered;
	}

	
	.box div {
		display: none;
	}
	.box div ul {
			margin: 0;
			padding: 15px;
			list-style-type: none;
	}
	.box div ul li{
		line-height: 1.5em;
	}
	.box div ul li a{
		text-decoration: none;
		color: #636363;
	}
	.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="mr">技术文章</li>
			<li>网站源码</li>
			<li>原生手册</li>
			<li>推荐博文</li>
		</ul>
		<span><a href="">更多下载>></a></span>

		<div style="display: block;">
			<ul>
				<li><a href="">js教程 | ajax三级联动图文详解</a><span>2018-04-02</span></li>
				<li><a href="">js教程 | ajax三级联动图文详解</a><span>2018-04-02</span></li>
				<li><a href="">js教程 | ajax三级联动图文详解</a><span>2018-04-02</span></li>
				<li><a href="">js教程 | ajax三级联动图文详解</a><span>2018-04-02</span></li>
				<li><a href="">js教程 | ajax三级联动图文详解</a><span>2018-04-02</span></li>
				<li><a href="">js教程 | ajax三级联动图文详解</a><span>2018-04-02</span></li>
				<li><a href="">js教程 | ajax三级联动图文详解</a><span>2018-04-02</span></li>
				<li><a href="">js教程 | ajax三级联动图文详解</a><span>2018-04-02</span></li>
				<li><a href="">js教程 | ajax三级联动图文详解</a><span>2018-04-02</span></li>
				<li><a href="">js教程 | ajax三级联动图文详解</a><span>2018-04-02</span></li>
				<li><a href="">js教程 | ajax三级联动图文详解</a><span>2018-04-02</span></li>
				<li><a href="">js教程 | ajax三级联动图文详解</a><span>2018-04-02</span></li>
				<li><a href="">js教程 | ajax三级联动图文详解</a><span>2018-04-02</span></li>
				<li><a href="">js教程 | ajax三级联动图文详解</a><span>2018-04-02</span></li>
				<li><a href="">js教程 | ajax三级联动图文详解</a><span>2018-04-02</span></li>
				<li><a href="">js教程 | ajax三级联动图文详解</a><span>2018-04-02</span></li>
				<li><a href="">js教程 | ajax三级联动图文详解</a><span>2018-04-02</span></li>
				<li><a href="">js教程 | ajax三级联动图文详解</a><span>2018-04-02</span></li>
			</ul>
		</div>

		<div>
			<ul>
				<li><a href="">前端模板 | 彩色音乐扬声器娱乐网站模板</a><span>2018-04-02</span></li>
				<li><a href="">前端模板 | 彩色音乐扬声器娱乐网站模板</a><span>2018-04-02</span></li>
				<li><a href="">前端模板 | 彩色音乐扬声器娱乐网站模板</a><span>2018-04-02</span></li>
				<li><a href="">前端模板 | 彩色音乐扬声器娱乐网站模板</a><span>2018-04-02</span></li>
				<li><a href="">前端模板 | 彩色音乐扬声器娱乐网站模板</a><span>2018-04-02</span></li>
				<li><a href="">前端模板 | 彩色音乐扬声器娱乐网站模板</a><span>2018-04-02</span></li>
				<li><a href="">前端模板 | 彩色音乐扬声器娱乐网站模板</a><span>2018-04-02</span></li>
				<li><a href="">前端模板 | 彩色音乐扬声器娱乐网站模板</a><span>2018-04-02</span></li>
				<li><a href="">前端模板 | 彩色音乐扬声器娱乐网站模板</a><span>2018-04-02</span></li>
				<li><a href="">前端模板 | 彩色音乐扬声器娱乐网站模板</a><span>2018-04-02</span></li>
				<li><a href="">前端模板 | 彩色音乐扬声器娱乐网站模板</a><span>2018-04-02</span></li>
				<li><a href="">前端模板 | 彩色音乐扬声器娱乐网站模板</a><span>2018-04-02</span></li>
				<li><a href="">前端模板 | 彩色音乐扬声器娱乐网站模板</a><span>2018-04-02</span></li>
				<li><a href="">前端模板 | 彩色音乐扬声器娱乐网站模板</a><span>2018-04-02</span></li>
				<li><a href="">前端模板 | 彩色音乐扬声器娱乐网站模板</a><span>2018-04-02</span></li>
				<li><a href="">前端模板 | 彩色音乐扬声器娱乐网站模板</a><span>2018-04-02</span></li>
				<li><a href="">前端模板 | 彩色音乐扬声器娱乐网站模板</a><span>2018-04-02</span></li>
				<li><a href="">前端模板 | 彩色音乐扬声器娱乐网站模板</a><span>2018-04-02</span></li>
				
			</ul>
		</div>

		<div>
			<ul>
				<li><a href="">MySQL | CentOS7安装MySQL5.7密码查看与修改-</a><span>2018-04-02</span></li>
				<li><a href="">MySQL | CentOS7安装MySQL5.7密码查看与修改-</a><span>2018-04-02</span></li>
				<li><a href="">MySQL | CentOS7安装MySQL5.7密码查看与修改-</a><span>2018-04-02</span></li>
				<li><a href="">MySQL | CentOS7安装MySQL5.7密码查看与修改-</a><span>2018-04-02</span></li>
				<li><a href="">MySQL | CentOS7安装MySQL5.7密码查看与修改-</a><span>2018-04-02</span></li>
				<li><a href="">MySQL | CentOS7安装MySQL5.7密码查看与修改-</a><span>2018-04-02</span></li>
				<li><a href="">MySQL | CentOS7安装MySQL5.7密码查看与修改-</a><span>2018-04-02</span></li>
				<li><a href="">MySQL | CentOS7安装MySQL5.7密码查看与修改-</a><span>2018-04-02</span></li>
				<li><a href="">MySQL | CentOS7安装MySQL5.7密码查看与修改-</a><span>2018-04-02</span></li>
				<li><a href="">MySQL | CentOS7安装MySQL5.7密码查看与修改-</a><span>2018-04-02</span></li>
				<li><a href="">MySQL | CentOS7安装MySQL5.7密码查看与修改-</a><span>2018-04-02</span></li>
				<li><a href="">MySQL | CentOS7安装MySQL5.7密码查看与修改-</a><span>2018-04-02</span></li>
				<li><a href="">MySQL | CentOS7安装MySQL5.7密码查看与修改-</a><span>2018-04-02</span></li>
				<li><a href="">MySQL | CentOS7安装MySQL5.7密码查看与修改-</a><span>2018-04-02</span></li>
				<li><a href="">MySQL | CentOS7安装MySQL5.7密码查看与修改-</a><span>2018-04-02</span></li>
				<li><a href="">MySQL | CentOS7安装MySQL5.7密码查看与修改-</a><span>2018-04-02</span></li>
				<li><a href="">MySQL | CentOS7安装MySQL5.7密码查看与修改-</a><span>2018-04-02</span></li>
				<li><a href="">MySQL | CentOS7安装MySQL5.7密码查看与修改-</a><span>2018-04-02</span></li>
				
			</ul>
		</div>

		<div>
			<ul>
				<li><a href="">Dai的博客 | Excel表格数据转化到数据库里面</a><span>2018-04-02</span></li>
				<li><a href="">Dai的博客 | Excel表格数据转化到数据库里面</a><span>2018-04-02</span></li>
				<li><a href="">Dai的博客 | Excel表格数据转化到数据库里面</a><span>2018-04-02</span></li>
				<li><a href="">Dai的博客 | Excel表格数据转化到数据库里面</a><span>2018-04-02</span></li>
				<li><a href="">Dai的博客 | Excel表格数据转化到数据库里面</a><span>2018-04-02</span></li>
				<li><a href="">Dai的博客 | Excel表格数据转化到数据库里面</a><span>2018-04-02</span></li>
				<li><a href="">Dai的博客 | Excel表格数据转化到数据库里面</a><span>2018-04-02</span></li>
				<li><a href="">Dai的博客 | Excel表格数据转化到数据库里面</a><span>2018-04-02</span></li>
				<li><a href="">Dai的博客 | Excel表格数据转化到数据库里面</a><span>2018-04-02</span></li>
				<li><a href="">Dai的博客 | Excel表格数据转化到数据库里面</a><span>2018-04-02</span></li>
				<li><a href="">Dai的博客 | Excel表格数据转化到数据库里面</a><span>2018-04-02</span></li>
				<li><a href="">Dai的博客 | Excel表格数据转化到数据库里面</a><span>2018-04-02</span></li>
				<li><a href="">Dai的博客 | Excel表格数据转化到数据库里面</a><span>2018-04-02</span></li>
				<li><a href="">Dai的博客 | Excel表格数据转化到数据库里面</a><span>2018-04-02</span></li>
				<li><a href="">Dai的博客 | Excel表格数据转化到数据库里面</a><span>2018-04-02</span></li>
				<li><a href="">Dai的博客 | Excel表格数据转化到数据库里面</a><span>2018-04-02</span></li>
				<li><a href="">Dai的博客 | Excel表格数据转化到数据库里面</a><span>2018-04-02</span></li>
				<li><a href="">Dai的博客 | Excel表格数据转化到数据库里面</a><span>2018-04-02</span></li>
				
			</ul>
		</div>

	</div>
	<script type="text/javascript">
		// 用document对象的getElementsByClassName()方法来根据标签的class属性来获取
		var box = document.getElementsByClassName('box')[0]
		// 获取标签名
		// alert(box.nodeName)
		var ul = box.getElementsByTagName('ul')[0]
		var tab = ul.getElementsByTagName('li')
			// 测试获得 box下面的第一组ul标签下面的4个li
		// alert(tab.length) 

		//获取到页面全部的信息列表,当然返回的也是一个数组喽		 
		 var list = box.getElementsByTagName('div')
		 // alert(list.length) 

		 // 2 给每个选项卡添加事件，因为有多个选项卡，所以要用循环语句
		 for (var i=0 ; i<(tab.length) ; i++){
		 	// 为当前的选项卡添加自定义属性index
		 		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 = 'mr'
		 		list[this.index].style.display = 'block'	
			 }

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

运行实例 »

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

3.png


手写代码部分

1.png


总结：获取页面元素的对象是有步骤和技巧： 首先用document对象的getElementsByClassName()方法来根据标签的class属性来获取，因为class可以获取到页面中多个对象,所以后面加上[0],确保仅获取到第一个class的元素，元素是可以嵌套的,所以我们除了可以在document对象上调用这些方法外,还可以在元素上调用，刚才已经获取到了例如class = ‘box’对象,现在我们直接以box为父级对象,再次调用getElementsByTagName(),该方法是根据标签名来获取元素,因为页面中可以多个同名标签,所以返回的也是一个数组,要加[0]指定元素！

页上的元素，除了用id选择的之外，返回的都是一个数组，必须要用索引才可以指定某个特定元素。

html页面在加载的时候会过滤掉我们在html元素中直接自定义的属性！我们可以用JS动态增加



上一条：HLML+CSS+JavaScript模仿网站选项卡及机器人客服 2018年3月30日下一条：选项卡和简易回复机器人-2018年4月2日
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多