0330作业-JS案例 - 第二阶段JavaScripts

Home > List of blog posts > 0330作业-JS案例

Blogger Information

Blog 20

fans 2

comment 0

visits 14973

Special Recommendation

More>

Related recommendations

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>选项卡</title>
	<style type="text/css">
		h2{
			text-align: center;
		}
		.box{
			width: 538px;
			height: 400px;
			margin: 20px auto;
			border: 1px solid #ccc;
			color: #363636;
		}
		/*标签样式*/
		.box > ul{
			background-color: #f8f8f8;
			margin: 0;
			padding: 0;
			overflow: hidden;
		}
		.box > ul li{
			list-style: none;
			width: 90px;
			height: 36px;
			float: left;
			border-right: 1px solid #ccc;
			border-bottom: 1px solid #ccc;			
			text-align: center;
			line-height: 36px;
		}
		.box ul > span{
			float: right;
			width: 90px;
			height: 36px;
			line-height: 36px;
			margin-right: 10px;
		}
		.box > ul a{
			text-decoration: none;
			color: #696969;
		}
		.box .active{
			border-bottom: none;
			border-top: 3px solid coral;
			height: 33px;
			font-weight: bolder;
			cursor: pointer;
		}

		/*内容区样式*/
		.box > div{
			display: none;
		}

		.box >ul + div{
			display: block;
		}

		.box > div ul{
			list-style: none;
			padding: 20px;
			margin: 0;
		}
		.box > div ul li{
			line-height: 1.5em;
		}
		.box > div a{
			color: #636363;
		}
		.box > div span{
			float: right;
			color: red;
			/*margin-right: 20px;*/
		}
	</style>
</head>
<body>
	<h2>选项卡</h2>
	<div class="box">
		<!-- 选项卡标题 -->
		<ul>
			<li class="active">技术文章</li>
			<li>网站源码</li>
			<li>原生手册</li>
			<li>推荐博文</li>
			<span><a href="">更多下载>></a></span>
		</ul>
		<!-- 选项卡内容 -->
		<div>
			<ul>
				<li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>03-30</span></li>
				<li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>03-30</span></li>
				<li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>03-30</span></li>
				<li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>03-30</span></li>
				<li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>03-30</span></li>
				<li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>03-30</span></li>
				<li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>03-30</span></li>
				<li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>03-30</span></li>
				<li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>03-30</span></li>
				<li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>03-30</span></li>
				<li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>03-30</span></li>
				<li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>03-30</span></li>
			</ul>
		</div>

		<div>
			<ul>
				<li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>03-30</span></li>
				<li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>03-30</span></li>
				<li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>03-30</span></li>
				<li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>03-30</span></li>
				<li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>03-30</span></li>
				<li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>03-30</span></li>
				<li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>03-30</span></li>
				<li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>03-30</span></li>
				<li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>03-30</span></li>
				<li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>03-30</span></li>
				<li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>03-30</span></li>
				<li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>03-30</span></li>
			</ul>
		</div>

		<div>
			<ul>
				<li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>03-30</span></li>
				<li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>03-30</span></li>
				<li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>03-30</span></li>
				<li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>03-30</span></li>
				<li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>03-30</span></li>
				<li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>03-30</span></li>
				<li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>03-30</span></li>
				<li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>03-30</span></li>
				<li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>03-30</span></li>
				<li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>03-30</span></li>
				<li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>03-30</span></li>
				<li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>03-30</span></li>
				
			</ul>
		</div>

		<div>
			<ul>
				<li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>03-30</span></li>
				<li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>03-30</span></li>
				<li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>03-30</span></li>
				<li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>03-30</span></li>
				<li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>03-30</span></li>
				<li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>03-30</span></li>
				<li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>03-30</span></li>
				<li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>03-30</span></li>
				<li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>03-30</span></li>
				<li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>03-30</span></li>
				<li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>03-30</span></li>
				<li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>03-30</span></li>
			</ul>
		</div>
	</div>

	<script type="text/javascript">
		// 1.获取元素
		var box = document.getElementsByClassName('box')[0]
		var ul = box.getElementsByTagName('ul')[0]
		var tab = ul.getElementsByTagName('li')
		var content = box.getElementsByTagName('div')

		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 = ''
					content[i].style.display = 'none'
				}
				this.className = "active"
				content[this.index].style.display = 'block'
			}
		}
	</script>
</body>
</html>

运行实例 »

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

2、模拟机器人对话：

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>模拟聊天窗口</title>
	<style type="text/css">
		div:nth-child(1){
			width: 500px;
			height: 600px;
			background-color: lightgreen;
			border: 1px solid #ccc;
			box-shadow: 2px 2px 2px #888;
			margin: 20px auto;
		}
		h2{
			text-align: center;
		}
		div:nth-child(2){
			width:460px;
			height: 450px; 
			margin: auto;
			border: 1px dotted green;
			background-color: #efefef;
		}
		ul{
			list-style: none;
			/*padding: 20px;*/
			overflow: hidden;
		}
		table{
			/*background-color: yellow;*/
			/*width: 92%;*/
			height: 70px;
			margin: auto;
		}
		textarea{
			resize: none;
			border: none;
			width: 390px;
			height: 60px;
		}
		button{
			width: 65px;
			height: 30px;
			background-color: seagreen;
			border: none;
			color: #fff;
			font-size: 1.05em;
			line-height: 30px;
		}
		button:hover{
			background-color: coral;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<div>
		<h2>在线客服</h2>
		<!-- 对话展示窗口 -->
		<div>
			<ul>
				<li></li>
			</ul>
		</div>
		<!-- 编辑内容及发送区 -->
		<table>
			<tr>
				<td><textarea></textarea></td>
				<td><button>发送</button></td>
			</tr>
		</table>
	</div>

	<script type="text/javascript">
		// 获取元素
		var btn = document.getElementsByTagName('button')[0]
		var text = document.getElementsByTagName('textarea')[0]
		var list = document.getElementsByTagName('ul')[0]
		var sum = 0

		btn.onclick = function(){
			// alert(text.value)
			if(text.value == ''){
				alert("发送内容不能为空")
				return false
			}

			var userComment = text.value
			// 清空用户输入框的信息
			text.value = ''
			// 创建新节点
			var li = document.createElement('li')
			var userPic = '<img src="../image/ao.png" width="30" style="border-radius:50%">'
			li.innerHTML = userPic + userComment
			list.appendChild(li)
			sum+=1

			setTimeout(function(){
				var info = ['请问有什么可以帮助您的吗？','今天天气真好呀','你的赞美是我们的动力','祝您生活愉快']
				var temp = info[Math.floor(Math.random()*4)]

				var reply = document.createElement('li')
				var kefuPic = '<img src="../image/sun.png" width="30" style="border-radius:50%">'
				reply.innerHTML = kefuPic + temp
				list.appendChild(reply)
				sum+=1
			},1000)
			if(sum>12){
				list.innerHTML = ''
				sum = 0
			}
		}
	</script>
</body>
</html>

运行实例 »

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

3、手写代码之模拟机器人对话：

0330作业.png

Correction status：Uncorrected

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

0409作业-在线相册管理器

2018-04-14 15:50:36