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

首页 > 博客列表 > 0330作业-JS案例

博主信息

博文 20

粉丝 2

访问量 18409

专题推荐

更多>

实例

<!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

批改状态：未批改

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

0409作业-在线相册管理器

2018-04-14 15:50:36