20180330作业（选项卡、聊天机器人） - 2期

Home > List of blog posts > 20180330作业（选项卡、聊天机器人）

Blogger Information

Blog 100

fans 8

comment 2

visits 150211

Special Recommendation

More>

Related recommendations

选项卡代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>1.选项卡</title>
	<style type="text/css">
		h2 {
			text-align: center;
		}

		.box {
			width:500px;
			height:330px;
			background-color:#f3f9f1;
			border:1px solid #a1a1a1;
			margin:20px auto;
		}

		.box > ul {
			margin:0;
			padding:0;
			background-color: #f3f9f1;
			overflow: hidden;	/*隐藏溢出部分*/
		}

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

		.box ul + span {
			float: right;
			width:90px;
			height:32px;
			line-height: 35px;
			margin-top: -35px;	/*块元素向上移动*/
		}
		
		/*选择.box下的ul的兄弟span元素的子元素a*/
		.box ul + span > a {
			text-decoration: none;	/*去掉下划线*/
		}
		
		/*选择.box下的class为active的li元素*/
		.box li.active {
			font-weight:bold;	/*设置粗体文本*/
			border-bottom: none;
			border-top: 3px solid #c93756;
		}

		.box div {
			display: none;	/*隐藏元素*/
		}

		.box div ul {
			margin:0;
			padding:20px;
			list-style-type: none;
		}

		.box div ul li {
			line-height: 1.5em;
		}

		.box div ul li a {
			text-decoration: none;
		}

		.box div ul li a:hover {
			color:#000;
		}

		.box div ul li span {
			float:right;
			color:#c93756;
		}
	</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="">第一选项卡内容</a><span>2018-03-01</span></li>
				<li><a href="">第一选项卡内容</a><span>2018-03-01</span></li>
				<li><a href="">第一选项卡内容</a><span>2018-03-01</span></li>
				<li><a href="">第一选项卡内容</a><span>2018-03-01</span></li>
				<li><a href="">第一选项卡内容</a><span>2018-03-01</span></li>
				<li><a href="">第一选项卡内容</a><span>2018-03-01</span></li>
				<li><a href="">第一选项卡内容</a><span>2018-03-01</span></li>
				<li><a href="">第一选项卡内容</a><span>2018-03-01</span></li>
				<li><a href="">第一选项卡内容</a><span>2018-03-01</span></li>
				<li><a href="">第一选项卡内容</a><span>2018-03-01</span></li>
			</ul>
		</div>
		<div>
			<ul>
				<li><a href="">第二选项卡内容</a><span>2018-03-02</span></li>
				<li><a href="">第二选项卡内容</a><span>2018-03-02</span></li>
				<li><a href="">第二选项卡内容</a><span>2018-03-02</span></li>
				<li><a href="">第二选项卡内容</a><span>2018-03-02</span></li>
				<li><a href="">第二选项卡内容</a><span>2018-03-02</span></li>
				<li><a href="">第二选项卡内容</a><span>2018-03-02</span></li>
				<li><a href="">第二选项卡内容</a><span>2018-03-02</span></li>
				<li><a href="">第二选项卡内容</a><span>2018-03-02</span></li>
				<li><a href="">第二选项卡内容</a><span>2018-03-02</span></li>
				<li><a href="">第二选项卡内容</a><span>2018-03-02</span></li>
			</ul>
		</div>
		<div>
			<ul>
				<li><a href="">第三选项卡内容</a><span>2018-03-03</span></li>
				<li><a href="">第三选项卡内容</a><span>2018-03-03</span></li>
				<li><a href="">第三选项卡内容</a><span>2018-03-03</span></li>
				<li><a href="">第三选项卡内容</a><span>2018-03-03</span></li>
				<li><a href="">第三选项卡内容</a><span>2018-03-03</span></li>
				<li><a href="">第三选项卡内容</a><span>2018-03-03</span></li>
				<li><a href="">第三选项卡内容</a><span>2018-03-03</span></li>
				<li><a href="">第三选项卡内容</a><span>2018-03-03</span></li>
				<li><a href="">第三选项卡内容</a><span>2018-03-03</span></li>
				<li><a href="">第三选项卡内容</a><span>2018-03-03</span></li>
			</ul>
		</div>
		<div>
			<ul>
				<li><a href="">第四选项卡内容</a><span>2018-03-04</span></li>
				<li><a href="">第四选项卡内容</a><span>2018-03-04</span></li>
				<li><a href="">第四选项卡内容</a><span>2018-03-04</span></li>
				<li><a href="">第四选项卡内容</a><span>2018-03-04</span></li>
				<li><a href="">第四选项卡内容</a><span>2018-03-04</span></li>
				<li><a href="">第四选项卡内容</a><span>2018-03-04</span></li>
				<li><a href="">第四选项卡内容</a><span>2018-03-04</span></li>
				<li><a href="">第四选项卡内容</a><span>2018-03-04</span></li>
				<li><a href="">第四选项卡内容</a><span>2018-03-04</span></li>
				<li><a href="">第四选项卡内容</a><span>2018-03-04</span></li>
			</ul>
		</div>
	</div>
</body>
<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++) {
		// 需要给选项卡添加自定义属性（html渲染时非默认属性会被删除）
		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>
</html>

运行实例 »

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

仿机器人聊天代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>2.仿机器人聊天窗口</title>
	<style type="text/css">
		div:nth-child(1) {
			width:400px;
			height:600px;
			background-color: #a1afc9;
			margin:30px auto;
			color:#003472;
			box-shadow: 2px 2px 2px #ddd;
		}

		h2 {
			text-align: center;
		}

		div:nth-child(2) {
			width:350px;
			height:400px;
			border:1px solid #003472;
			background-color: #f0f0f4;
			margin:auto;
		}

		div:nth-child(2) ul {
			padding:10px;
			list-style-type: none;
			line-height: 1.5em;
			overflow:hidden;
		}

		table {
			width:350px;
			height:100px;
			margin:10px auto;
			/*border:1px solid red;*/
		}

		.list {
			font-style: 22px;
		}

		button {
			width:80px;
			height:30px;
			margin:10px;
		}
	</style>
</head>
<body>
	<div>
		<h2>逗比瞎聊</h2>
		<div contenteditable="true">
			<ul class="list">
				<li></li>
			</ul>
		</div>
		<table>
			<tr>
				<td>
					<textarea name="input" id="" cols="30" rows="5"></textarea>
				</td>
				<td>
					<button name="send">发送</button>
					<button name="clean">清屏</button>
				</td>
			</tr>
		</table>
	</div>
</body>
<script type="text/javascript">
	// 获取html元素
	var input = document.getElementsByName('input')[0]
	var send = document.getElementsByName('send')[0]
	var list = document.getElementsByClassName('list')[0]

	// 创建一个计数变量用来控制聊天框中的内容条目数
	var sum = 0
	
	// 清空按键变量
	var clean = document.getElementsByName('clean')[0]

	// 按钮事件添加
	send.onclick = function() {
		
		// 条件判断（用户提交空内容提示）
		if (input.value.length == 0) {
			alert('我滴哥，瞎聊也得写点啥嘛！')
			return false
		}

		var text = input.value

		// 清空输入框已发送的内容
		input.value = ''

		// 以下两种方法都不适合用来添加条目
		// list.innerHTML = '<li>' + input.value + '</li>'
		// list.innerHTML += '<li>' + input.value + '</li>'

		// 建议使用js创建元素节点的方法添加条目
		var li = document.createElement('li')

		// 将头像图片样式存入一个变量，方便调用
		var imgStyle = '<img src="http://t1.aixinxi.net/o_1ca18ajjo5ffrun1n2s94nsd2a.jpg-w.jpg" width=30 style="border-radius:50%">'
		li.innerHTML = imgStyle + text
		
		// 将内容插入到当前节点中：父节点.appendChild(当前节点)
		list.appendChild(li)
		sum += 1

		setTimeout(function() {
			var say = ['你是个逗比，我么有你逗比！','哈哈！','给你介绍一个小姐姐怎么样？','你想要哪个小姐姐呀？告诉我就行！']

			//使用Math.floor()函数取数组的元素值，Math.random()*4取0-4之间的数字
			var random = say[Math.floor(Math.random()*4)]
			
			var reply = document.createElement('li')
			var sevPic = '<img src="http://t1.aixinxi.net/o_1ca18bjeh854shmjt16m9j4la.jpg-w.jpg" width=30 style="border-radius:50%">'

			// 随机取自动回复数组中的字符串
			reply.innerHTML = sevPic + '<span style="color:#0aa344;">' + random +'</span>'
			list.appendChild(reply)	
			sum += 1		
		},2000)

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

		// 输入时保持焦点在输入框
		input.focus()
	}

	// 按键清除聊天窗口内容
	clean.onclick = function() {
		list.innerHTML = ''
		return false
	}
</script>
</html>

运行实例 »

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

理解：

这节课较深入的了解了javascript的语法及变量定义技巧，掌握了基础的javascript编程概念，重点在于灵活运用。

还得加深理解。

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

20180315作业（卡片）

2018-04-11 22:33:14