0914-DOM操作和模拟智能在线客服系统 - 课程作业

Home > List of blog posts > 0914-DOM操作和模拟智能在线客服系统

Blogger Information

Blog 48

fans 0

comment 0

visits 40558

Special Recommendation

More>

Related recommendations

实例

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>根据id选择元素</title>
</head>
<body>
<ul id="lists">
    <li id="item1">列表项01</li>
    <li>列表项02</li>
    <li id="item2">列表项03</li>
    <li>列表项04</li>
    <li id="item3">列表项05</li>
</ul>

<script>
   document.getElementById('item1').style.backgroundColor="red";
   document.getElementById('item2').style.backgroundColor="yellow";
   document.getElementById('item3').style.backgroundColor="blue";

   //如果需要使用多个id来获取元素,可以通过函数来简化操作
    function getElements () {   //参数是多个id字符串
        let elements = {};  // 创建一个空的map映射对象用来保存结果

        //arguments.callee 指向当前执行的函数。
        //arguments.caller 指向调用当前函数的函数。
        //arguments.length 指向传递给当前函数的参数数量。
        for (let i = 0; i < arguments.length; i++) {
            let id = arguments[i];  // 获取到要查询的每个id
            let elt = document.getElementById(id); // 根据id查找元素
            if (elt === null) {
                throw new Error("No element with id: " + id);  //抛出异常
            }
            elements[id] = elt; // 将获取到的元素存入到映射数据中
        }
        return elements;  // 返回查询到的元素(以对象字面量方式)
    }

    //根据id获取页面上的指定元素，返回一个关联数组对象，键名即id
     let elements = getElements ('item1','item2','item3');
     console.log(elements );
     for(let key in elements){
     	elements[key].style.backgroundColor="pink";
     }


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

运行实例 »

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

实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>通过class属性选取元素</title>
</head>
<body>
<ul class="ul">
    <li class="red">列表项01</li>
    <li>列表项02</li>
    <li class="green">列表项03</li>
    <li>列表项04</li>
    <li class="coral large">列表项05</li>
</ul>

<script>
//根据元素的class属性值获取元素
document.getElementsByClassName('red')[0].style.backgroundColor = 'red';

//该方法也支持在父元素上调用
    document.getElementsByClassName('ul').item(0)
            .getElementsByClassName('green').item(0)
            .style.backgroundColor = 'green';

//支持多个class 属性值
    let large = document.getElementsByClassName('coral large')[0];
    large.style.backgroundColor = 'coral';
    large.style.fontSize = '1.5rem';


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

运行实例 »

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

实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>使用css选择器来获取元素</title>
</head>
<body>
<ul id="ul">
    <li class="red">列表项01</li>
    <li>列表项02</li>
    <li class="green">列表项03</li>
    <li class="green">列表项04</li>
    <li class="coral large">列表项05</li>
</ul>

<script>
//我们选择页面元素的时候,大多使用css选择器来获取元素,例如
// .red 获取 class="red"的元素,其实js也支持使用css选择器获取元素
let lists = document.querySelectorAll('li');
console.log(lists);     //返回节点列表数组,里面每个元素对应一个元素
//可以使用
lists[0].style.backgroundColor = 'coral';
lists.item(1).style.backgroundColor = 'lightblue';


//该方法还可以在元素上调用,这也根据标签和class类名获取元素是一样的

    let ul = document.querySelector('#ul'); // 获取满足条件的第一个元素
    console.log(ul);    // 只返回ul列表元素以及内部子元素
    let li = ul.querySelectorAll('.green');
    for (let i = 0; i < li.length; i++) {
        li[i].style.backgroundColor = 'pink';
    }

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

运行实例 »

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

实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>根据标签名Tag来获取元素</title>
</head>
<body>
<!--ul>li{列表项$$}*5-->
<ul>
    <li>列表项01</li>
    <li>列表项02</li>
    <li>列表项03</li>
    <li>列表项04</li>
    <li>列表项05</li>
</ul>

<script>
   document.getElementsByTagName('ul')[0].style.backgroundColor="coral";
   document.getElementsByTagName('li')[0].style.backgroundColor="red";
   document.getElementsByTagName('li')[2].style.backgroundColor="yellow";
   document.getElementsByTagName('li')[4].style.backgroundColor="blue";

   //元素集合也是一个对象,上面定义了一个方法:item()也可以获取指定元素
    let ul1 = document.getElementsByTagName('ul').item(0);
    ul1.style.backgroundColor = 'pink';

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

运行实例 »

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

2. 实战: 在线聊天机器人

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>热身:仿机器人聊天窗口</title>
	<style>
	/* :nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。 */
	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;
		}
	ul{
		width: 360px;
			height: 400px;
			background-color: lightgrey;
			margin: 30px auto;

	}
	table{
		width: 90%;
			height:80px;
			margin: auto;
	}
	button {
			width: 40px;
			height: 40px;
			background-color: seagreen;
			color: white;
			/* border: none; */
			/*text-align: left;*/

		}
	ul {
			list-style: none;
			line-height: 2em;
			/*border: 1px solid red;*/
			overflow: hidden;
			padding: 15px;
		}
	textarea{
			/*width: 300px;*/
			border: none;
			resize: none;
			background-color: lightyellow;
		
	</style>
	

</head>
<body>
	<div>
		<h2>在线咨询</h2>
		<div contenteditable="true">
			<ul></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>
	<script type="text/javascript">
		//获取元素
		let textarea = document.getElementsByName('text')[0];
		let list = document.getElementsByTagName('ul')[0];
		let button = document.getElementsByTagName('button')[0];
		let sum = 0;

		button.onclick = function() {
			/*let li = document.createElement('li');
			li.innerHTML = textarea.value;  //将用户输入的内容添加到新节点中
			list.appendChild(li);
			textarea.value = '';	//清空文本框*/
		 
			if (textarea.value.length === 0) {
				alert('客官:是不是忘记输入内容了~~');
				return false;
			}
			let userComment = textarea.value;

			//立即清空用户信息区
			textarea.value = '';

			//创建一个新节点li
			let li = document.createElement('li');
			li.innerHTML = userComment;  //将用户输入的内容添加到新节点中
			let userPic = '<img src="inc/peter.jpg" width="30" style="border-radius:50%">'; // 设置用户头像
			li.innerHTML = userPic + ' ' + userComment; // 将用户头像与用户的聊天内容合并
			list.appendChild(li);	//发送聊天内容,实际上就是将新节点插入到对话列表中
			sum += 1;// 聊天记录自增1

			//设置定时器,默认1.5秒后会自动回复
			setTimeout(function(){
			let info = [
			    '真烦人,有话快说,别耽误我玩抖音',
				'除了退货,退款,咱们什么都可以聊',
				'说啥,本姑娘怎么听不懂呢?再说一遍',
				'在我方便的时候再回复你吧~~',
				'投诉我的人多了,你算老几~~~'
			];
			/*
			Math.random():获取0~1随机数
			Math.floor()返回值就是该数的整数位：Math.floor(0.666) --> 0; Math.floor(39.2783) --> 39
			所以我们可以使用Math.floor(Math.random())去获取你想要的一个范围内的整数。
            如：现在要从1~52内取一个随机数：
            首先Math.random()*52  //这样我们就能得到一个 >=0 且 <52的数
            然后加1：Math.random()*52 + 1    //现在这个数就 >=1 且 <53
            再使用Math.floor取整

            最终: Math.floor(Math.random()*52 + 1)
            这就能得到一个取值范围为1~52的随机整数了.
            */

			let temp = info[Math.floor(Math.random()*5)];//取0-4之间的一个随机整数
			let reply = document.createElement('li');
			let kefuPic = '<img src="inc/zly.jpg" width="30" style="border-radius:50%;">';
			reply.innerHTML = kefuPic + ' ' + '<span style="color:red">'+temp+'</span>';

			list.appendChild(reply);
			sum += 1;

			},1500);
			
			// 当聊天记录达到10条时清空窗口
			if (sum > 10) {
				list.innerHTML = '';
				sum = 0;
			}
		}

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

运行实例 »

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

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

Bootstrap学习笔记

2018-09-26 16:46:22