search

博客列表 >JS基础实战【选项卡和模拟聊天机器人】-2018年4月2号19点03分

JS基础实战【选项卡和模拟聊天机器人】-2018年4月2号19点03分

改变从心开始
改变从心开始原创
2018年04月02日 19:04:05651浏览

选项卡作业代码演示：http://111.231.88.20/front/html/0330/1.html

通过这个作业了解了for循环语句的基本使用方法

实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>0330选项卡作业练习</title>
	</head>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.box{
			width: 550px;
			height: 500px;
			background-color: #FFF;
			border: 1px solid #808080;
			margin: 100px auto;
			box-shadow: 0 0 3px #111;
		}
		.box div:first-child{
			width: 247px;
			height: 50px;
			text-align: center;
			background-color: #eee;
			float: left;
			border-bottom: 1px solid #808080;
		}
		h2{
			color: #00CED1;
			margin-left: 10px;
			float: left;
			padding-top: 10px;
		}
		p{
			color: #999999;
			float: left;
			margin-left: 5px;
			padding-top: 20px;
		}
		.box ul{
			height: 50px;
			list-style-type: none;
			float: right;
			background-color: #eee;
		}
		.box ul li{
			width: 100px;
			height: 100%;
			float: left;
			text-align: center;
			line-height: 50px;
			border-left: 1px solid #808080;
			border-bottom: 1px solid #808080;
		}
		.box li.choose{
			height: 48px;
			background-color: #fff;
			border-top: 3px solid #1b64f8;
			border-bottom: none;
		}
		.box div{
			display: none;
			clear: both;
		}
		ol{
			list-style-type: none;
			height: 432px;
			margin-left: 10px;
			background: url(images/sort_icon.png) no-repeat;
		}
		ol li{
			margin-left: 45px;
			line-height: 2.3em;
		}
		ol li a:first-child{
			text-decoration: none;
			color: #888;
		}
		ol li a:last-child{
			float: right;
			text-decoration: none;
			color: #ccc;
			margin-right: 10px;
		}
		ol li a:hover{
			color: #000;
		}
	</style>
	<body>
		<div class="box">
			<div style="display: block;">
				<h2>热闻排行</h2>
				<p>给你好看</p>
			</div>
			<ul>
				<li class="choose">日榜</li>
				<li>周榜</li>
				<li>月榜</li>
			</ul>
			<div class="list" style="display: block;">
				<ol>
					<li><a href="">干掉免费Wifi钥匙的可能不是法律 而是5G</a><a href="">贾敬华</a></li>
					<li><a href="">干掉免费Wifi钥匙的可能不是法律 而是5G</a><a href="">贾敬华</a></li>
					<li><a href="">干掉免费Wifi钥匙的可能不是法律 而是5G</a><a href="">贾敬华</a></li>
					<li><a href="">干掉免费Wifi钥匙的可能不是法律 而是5G</a><a href="">贾敬华</a></li>
					<li><a href="">干掉免费Wifi钥匙的可能不是法律 而是5G</a><a href="">贾敬华</a></li>
					<li><a href="">干掉免费Wifi钥匙的可能不是法律 而是5G</a><a href="">贾敬华</a></li>
					<li><a href="">干掉免费Wifi钥匙的可能不是法律 而是5G</a><a href="">贾敬华</a></li>
					<li><a href="">干掉免费Wifi钥匙的可能不是法律 而是5G</a><a href="">贾敬华</a></li>
					<li><a href="">干掉免费Wifi钥匙的可能不是法律 而是5G</a><a href="">贾敬华</a></li>
					<li><a href="">干掉免费Wifi钥匙的可能不是法律 而是5G</a><a href="">贾敬华</a></li>
					<li><a href="">干掉免费Wifi钥匙的可能不是法律 而是5G</a><a href="">贾敬华</a></li>
					<li><a href="">干掉免费Wifi钥匙的可能不是法律 而是5G</a><a href="">贾敬华</a></li>
				</ol>
			</div>
			<div class="list">
				<ol>
					<li><a href="">30万炒家哭晕在厕所！一公司遭遇史上最大利空</a><a href="">齐俊杰看财经</a></li>
					<li><a href="">30万炒家哭晕在厕所！一公司遭遇史上最大利空</a><a href="">齐俊杰看财经</a></li>
					<li><a href="">30万炒家哭晕在厕所！一公司遭遇史上最大利空</a><a href="">齐俊杰看财经</a></li>
					<li><a href="">30万炒家哭晕在厕所！一公司遭遇史上最大利空</a><a href="">齐俊杰看财经</a></li>
					<li><a href="">30万炒家哭晕在厕所！一公司遭遇史上最大利空</a><a href="">齐俊杰看财经</a></li>
					<li><a href="">30万炒家哭晕在厕所！一公司遭遇史上最大利空</a><a href="">齐俊杰看财经</a></li>
					<li><a href="">30万炒家哭晕在厕所！一公司遭遇史上最大利空</a><a href="">齐俊杰看财经</a></li>
					<li><a href="">30万炒家哭晕在厕所！一公司遭遇史上最大利空</a><a href="">齐俊杰看财经</a></li>
					<li><a href="">30万炒家哭晕在厕所！一公司遭遇史上最大利空</a><a href="">齐俊杰看财经</a></li>
					<li><a href="">30万炒家哭晕在厕所！一公司遭遇史上最大利空</a><a href="">齐俊杰看财经</a></li>
					<li><a href="">30万炒家哭晕在厕所！一公司遭遇史上最大利空</a><a href="">齐俊杰看财经</a></li>
					<li><a href="">30万炒家哭晕在厕所！一公司遭遇史上最大利空</a><a href="">齐俊杰看财经</a></li>
				</ol>
			</div>
			<div class="list">
				<ol>
					<li><a href="">一文读懂中国独角兽，下一个BAT为什么还没有出现？</a><a href="">俊世太保</a></li>
					<li><a href="">一文读懂中国独角兽，下一个BAT为什么还没有出现？</a><a href="">俊世太保</a></li>
					<li><a href="">一文读懂中国独角兽，下一个BAT为什么还没有出现？</a><a href="">俊世太保</a></li>
					<li><a href="">一文读懂中国独角兽，下一个BAT为什么还没有出现？</a><a href="">俊世太保</a></li>
					<li><a href="">一文读懂中国独角兽，下一个BAT为什么还没有出现？</a><a href="">俊世太保</a></li>
					<li><a href="">一文读懂中国独角兽，下一个BAT为什么还没有出现？</a><a href="">俊世太保</a></li>
					<li><a href="">一文读懂中国独角兽，下一个BAT为什么还没有出现？</a><a href="">俊世太保</a></li>
					<li><a href="">一文读懂中国独角兽，下一个BAT为什么还没有出现？</a><a href="">俊世太保</a></li>
					<li><a href="">一文读懂中国独角兽，下一个BAT为什么还没有出现？</a><a href="">俊世太保</a></li>
					<li><a href="">一文读懂中国独角兽，下一个BAT为什么还没有出现？</a><a href="">俊世太保</a></li>
					<li><a href="">一文读懂中国独角兽，下一个BAT为什么还没有出现？</a><a href="">俊世太保</a></li>
					<li><a href="">一文读懂中国独角兽，下一个BAT为什么还没有出现？</a><a href="">俊世太保</a></li>
				</ol>
			</div>
		</div>
		<script type="text/javascript">
			// 1、首先获取选项卡和区块信息列表
			var box = document.getElementsByClassName('box')[0] //获取最外层的div
			var ul = box.getElementsByTagName('ul')[0] //获取到选项卡中第一个ul
			var tab = ul.getElementsByTagName('li') //获取到ul里面所有的li

			var list = box.getElementsByClassName('list')
			//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 = 'choose'
					list[this.index].style.display = 'block'
				}
			}
		</script>
	</body>
</html>

运行实例 »

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

模拟聊天机器人作业代码演示：http://111.231.88.20/front/html/0330/2.html

通过这个代码作业了解了新建节点元素并插入html文档的基本使用

实例

  <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>客服机器人作业</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.box{
			width: 500px;
			height: 450px;
			margin:50px auto;
			border:1px solid #000;
			border-radius: 10px;
		}
		.head{
			width: 100%;
			height: 40px;
			background-color: #37465d;
			color: #dadad9;
			border-radius: 10px 10px 0 0;
		}
		.head p{
			line-height: 40px;
			margin-left: 5px;
		}
		.head a{
			text-decoration: none;
			color: #dadad9;
			float: right;
			line-height: 40px;
			margin:-40px 20px 0 0;
		}
		.show{
			width: 100%;
			height: 330px;
			border-bottom:1px solid #000;
			overflow-y: scroll;/*垂直内容溢出后，出现滚动条*/
		}
		ul{
			list-style-type:none;
			padding-top: 10px;
		}
		ul li{
			margin:0 10px;
		}
		table{
			width: 95%;
			height: 70px;
			margin:5px auto;
		}
		textarea{
			width: 95%;
			resize: none;
		}
		button{
			width: 65px;
			height: 45px;
			margin-bottom: 4px;
			background-color: #37465d;
			border: none;
			border-radius: 20%;
			color: #fff;
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="head">
			<p>您好，您可以直接给我发送问题哈！</p>
			<a href="">意见反馈</a>
		</div>
		<div class="show">
			<ul>
				<li></li>
			</ul>
		</div>
		<table>
			<tr>
				<td><textarea cols="50" rows="3" name="text"></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('text')[0]
		var list = document.getElementsByTagName('ul')[0]
		//获取按钮点击事件，得到用户数据并显示到对话框中
		btn.onclick = function(){
			//获取用户提交的内容
			//对于用户提交的内容进行判断（不可为空）
			if (text.value.length == 0) {
				alert('您是不是忘记输入内容了？')
				text.focus()
				return false
			}
			//把用户的输入内容声明一个变量
			var userContent = text.value 
			//在发送后清除用户的内容区
			text.value = ''
			//创建一个新的节点li
			var li = document.createElement('li')
			li.style = 'text-align:right;'

			li.innerHTML = userContent

			//创建一个用户头像变量
			var userPic = '<img src="images/userico.jpg" width="30px" style="border-radius:50%">'
			li.innerHTML = userPic + userContent
			//将新的节点li，添加到对话框中
			list.appendChild(li)
			//添加一个定时回复

				setTimeout(function(){
				//添加随机回复内容
				var info = ['您好，请问有什么需要？','这个问题你自己去想','拜拜，我要睡觉了','呵呵']
				//添加随机回复的函数
				var temp = info[Math.floor(Math.random()*4)]
				//创建一个随机回复的节点li
				var reply = document.createElement('li')
				var csPic = '<img src="images/csico.jpg" width="30px" style="border-radius:50%">'
				//reply.innerHTML = csPic + '<span style="color:red">'+temp+'</span>'
				reply.innerHTML = csPic + '<span style="color:red">'+temp+'</span>'

				list.appendChild(reply)
			},1000)
		}
	</script>
</body>
</html>

运行实例 »

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

手抄代码作业【模拟聊天机器人】

通过手抄代码后，对于JS的基础语法更加熟悉了一点，然后对于一些代码的拼写也记忆更加深刻了

0330-1.jpg

0330-2.jpg

总结：

1、通过这两个作业的练习，首先对于之前学习的html和css又加深了一些记忆

2、通过选项卡作业，学习了for循环语句的基本使用场景和使用方法

3、通过模拟聊天机器人作业，学习了如何新建一个元素节点并且插入到html的方法，通过自己的一些练习，还学习了如何给通过JS给元素内添加CSS属性

4、通过这两个作业的练习和上节课的JS基础语法，让我对于学习编程更有信心了！

上一条：JS完成的选项卡和在线客服案例下一条：0329javascript入门与实战（实战：明星相册、实战：mini计算器）18：00
javascript
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多