3_30 javascript实战2 - 作业

Home > List of blog posts > 3_30 javascript实战2

Blogger Information

Blog 19

fans 0

comment 0

visits 10543

Special Recommendation

More>

Related recommendations

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>仿PHP中文网选项卡</title>
	<style type="text/css">
		h2 {
			text-align: center;
		}
		.box {
			width: 538px;
			height: 500px;
			background-color: white;
			border:1px solid #ccc;
			margin: 20px auto;
			color: #363636; 
		}
		.box>ul {
			margin: 0;
			padding: 0;
			background-color: #f8f8f8;
			overflow: hidden;
		}
		.box>ul li {
			list-style-type: none;
			width: 90px;
			height: 33px;
			float: left;
            border-right: 1px solid #ccc;
            border-bottom: 1px solid #ccc; 
            text-align: center;
            line-height: 36px;
		}
		.box ul+span {
			float: right;
			width: 174px;
			height: 33px;
			line-height: 33px;
			margin-top: -36px;
			border-bottom: 1px solid #ccc;
			text-align: right;
		}
		.box ul+span>a {
			color: #696969;
			text-decoration: none;
		}
        .box li.active {
        	background-color: #fff;
        	/*加粗*/
        	font-weight: bolder;
        	border-bottom: none;
        	border-top: 3px solid orangered;
        }
        .box div {
        	/*隐藏div*/
        	display: none;
        	/*第一个div要显示*/
        }
        .box div ul {
        	/*内边距*/
        	margin: 0;
        	/*外边距*/
        	padding: 5px;
        	/*去除表格样式小黑点*/
        	list-style-type: none;
        }
        .box div ul li {
        	/*行间距离*/
        	line-height: 1.5em;
        }
        .box div ul li a {
        	color: #636363;
        	text-decoration: none;
        	padding: 5px;
        }
        .box div ul li a:hover {
        	color: #000;
        }
        .box div ul li  span {
			float: right;
			color: red;
	</style> 
</head>
<body>
	<h2>仿PHP中文网选项卡</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="">js教程 | Angular开发实践（二）：HRM运行机制</a><span>2018-04-02</span></li>
				<li><a href="">js教程 | Angular开发实践（一）：环境准备及框架搭</a><span>2018-04-02</span></li>
				<li><a href="">js教程 | ajax响应json字符串和json数组的方法</a><span>2018-04-02</span></li>
				<li><a href="">js教程 | JS实现AJAX局部刷新（附代码）</a><span>2018-04-02</span></li>
				<li><a href="">js教程 | 用Ajax实现同步和异步有什么区别</a><span>2018-04-02</span></li>
				<li><a href="">php教程 | PHP中删除数组中的元素详解</a><span>2018-04-02</span></li>
				<li><a href="">Python教程 | 关于Python中的range 对象是不是迭代器的</a><span>2018-04-02</span></li>
				<li><a href="">js教程 | JavaScript设计模式系列八：外观模式</a><span>2018-04-02</span></li>
				<li><a href="">js教程 | Ajax如何实现城市二级联动</a><span>2018-04-02</span></li>
				<li><a href="">js教程 | AJAX跨域请求JSONP获取JSON数据步骤详解</a><span>2018-04-02</span></li>
				<li><a href="">js教程 | JavaScript设计模式七：装饰者模式</a><span>2018-04-02</span></li>
				<li><a href="">Python教程 | Python代码实现图片文字的识别</a><span>2018-04-02</span></li>
				<li><a href="">js教程 | Ajax优化页面刷新的两种方法</a><span>2018-04-02</span></li>
				<li><a href="">js教程 | ajax有哪几种方法可以实现局部刷新</a><span>2018-04-02</span></li>
				<li><a href="">js教程 | JavaScript设计模式系列六：桥接模式</a><span>2018-04-02</span></li>
				<li><a href="">js教程 | 怎样用AjaxSubmit()提交file文件</a><span>2018-04-02</span></li>
				<li><a href="">js教程 | 使用Blod做出ajax的进度条下载</a><span>2018-04-02</span></li>
				<li><a href="">js教程 | Ajax+json实现购物车结算</a><span>2018-04-02</span></li>
			</ul>
		</div>

		<div>
			<ul>
				<li><a href="">前端模板 | 彩色音乐扬声器娱乐网站模板</a><span>2018-03-05</span></li>
				<li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>2018-03-05</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="">前端模板 | 紫色的旅游窄屏HTML模板</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="">前端模板 | 绿色调实用的UI工具包网页模板</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="">MySQL | CentOS7安装MySQL5.7密码查看与修改-</a><span>2018-02-07</span></li>
				<li><a href="">MySQL | 大小写敏感性 lower_case_table_names-</a><span>2018-02-07</span></li>
				<li><a href="">MySQL | PDO 与 MySQLi 二者效率简单比较-MySql参</a><span>2018-02-07</span></li>
				<li><a href="">MySQL | PDO 事务处理-MySql参考手册</a><span>2018-02-07</span></li>
				<li><a href="">MySQL | PDO对象常用方法-MySql参考手册</a><span>2018-02-07</span></li>
				<li><a href="">MySQL | 数据库抽象层 PDO-MySql参考手册</a><span>2018-02-07</span></li>
				<li><a href="">MySQL | 批量修改Mysql表引擎为InnoDB的方法-</a><span>2018-02-07</span></li>
				<li><a href="">MySQL | 日志-MySql参考手册</a><span>2018-02-07</span></li>
				<li><a href="">MySQL | 查询表-MySql参考手册</a><span>2018-02-07</span></li>
				<li><a href="">MySQL | 修改表中的指定一条数据-MySql参考手册</a><span>2018-02-07</span></li>
				<li><a href="">MySQL | 数据库表中数据操作-MySql参考手册</a><span>2018-02-07</span></li>
				<li><a href="">MySQL | Mysql表复制及备份还原 -MySql参考手册</a><span>2018-02-07</span></li>
				<li><a href="">MySQL | 数据库与表显示、创建、删除-MySql参考手</a><span>2018-02-07</span></li>
				<li><a href="">MySQL | 用户创建、权限、删除-MySql参考手册</a><span>2018-02-07</span></li>
				<li><a href="">MySQL | MySQL语句大全-MySql参考手册</a><span>2018-02-07</span></li>
				<li><a href="">MySQL | 配置phpmyadmin连接多实例MySQL-MySql</a><span>2018-02-07</span></li>
				<li><a href="">MySQL | 灾难恢复-MySql参考手册</a><span>2018-02-06</span></li>
				<li><a href="">MySQL | 主从复制读写分离-MySql参考手册</a><span>2018-02-06</span></li>
			</ul>
		</div>

		<div>
			<ul>
				<li><a href="">推荐博文 | 各大网站必用前端js选项卡。实现案列 2018-</a><span>2018-03-31</span></li>
				<li><a href="">推荐博文 | Javascript 实现计算器-20180331 16:14</a><span>2018-03-31</span></li>
				<li><a href="">推荐博文 | javascript实战2+2018年3月31日15时39分</a><span>2018-03-31</span></li>
				<li><a href="">推荐博文 | Excel表格数据转化到数据库里面</a><span>2018-03-31</span></li>
				<li><a href="">推荐博文 | PHP数据迁移到EXCEL表格</a><span>2018-03-31</span></li>
				<li><a href="">推荐博文 | js标签选择器，聊天机器人——2018年3月31</a><span>2018-03-31</span></li>
				<li><a href="">推荐博文 | js实战：选项卡的制作 2018年03月31日 12点</a><span>2018-03-31</span></li>
				<li><a href="">推荐博文 | 0330两个js小案例</a><span>2018-03-31</span></li>
				<li><a href="">推荐博文 | 初识js 图片切换,简易计算器 2018-3-29</a><span>2018-03-31</span></li>
				<li><a href="">推荐博文 | JS实例-选项卡与机器人客服--2018年3月31</a><span>2018-03-31</span></li>
				<li><a href="">推荐博文 | JS-明星相册和迷你计算器-2018年3月30日17</a><span>2018-03-31</span></li>
				<li><a href="">推荐博文 | js将秒数改变为经历的时间</a><span>2018-03-30</span></li>
				<li><a href="">推荐博文 | 用javascript实现明星相册-20180330-16:34</a><span>2018-03-30</span></li>
				<li><a href="">推荐博文 | 3.28仿制页面首页</a><span>2018-03-30</span></li>
				<li><a href="">推荐博文 | 20180328课后作业及html阶段总结(仿</a><span>2018-03-30</span></li>
				<li><a href="">推荐博文 | javascript教学第一节课--2018年3月30日上</a><span>2018-03-30</span></li>
				<li><a href="">推荐博文 | js明星照片，迷你计算器——2018年3月30日</a><span>2018-03-30</span></li>
				<li><a href="">推荐博文 | 仿站-3月30日11时14分</a><span>2018-03-30</span></li>
			</ul>
		</div>
	</div>
	<script type="text/javascript">
		// 先获取选项卡和对应的区块信息列表
		var box=document.getElementsByClassName('box')[0]
		// alert(box.nodeName)测试
		// 从box里拿ul
		var ul=box.getElementsByTagName('ul')[0]
		// 从ul里找li
		var tab=ul.getElementsByTagName('li')
		// box下所有div
		var list=box.getElementsByTagName('div')
		// 给每个选项卡循环添加事件
		// alert(tab.length)测试

		for (var i=0; i<tab.length; i++) {
			// 给当前选项卡添加一个自定义属性index
			tab[i].index=i
			// 给每一个选项卡添加事件 鼠标滑动到事件
			tab[i].onmouseover=function(){
				// alert(1)测试
				// 清空标签的样式，把除了当前的选项卡和对应列表之外的标签全部样式清空
				for (var i=0; i<tab.length; i++) {
                // 把选项卡的样式清空
					tab[i].className=''
				// 将除了当前信息列表之外的列表全部隐藏
					list[i].style.display = 'none'
				}
					this.className = 'active'
					// alert(this.index)测试
					list[this.index].style.display = 'block'		
			}			
		}
	</script>
</body>
</html>

运行实例 »

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

仿自动应答在线客服机器人：

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>仿机器人聊天窗口</title>
	<style type="text/css">
		div:nth-child(1) {
			width: 450px;
			height: 650px;
			background-color: lightblue;
			margin: 30px auto;
			color: gray;
			box-shadow: 3px 3px 3px #808080
		}
		h3 {
			text-align: center;
			margin-bottom: -15px;
		}
		div:nth-child(2) {
			width: 400px;
			height: 500px;
			border: 2px solid lightgray;
			background-color: #efefef;
			margin: 20px auto 10px;
		}
		ul {
			list-style: none;
			line-height: 2em;
			overflow: hidden;
			padding: 15px;
		}
		table {
			width: 90%;
			height:80px;
			margin: auto;
		}
		textarea{
			width: 330px;
			border: none;
			resize: none;
			background-color: #efefef;

		}
		button {
			width: 60px;
			height: 40px;
			background-color: lightskyblue;
			color: white;
			border: none;
		}
		button:hover {
			cursor: pointer;
			background-color: orange;
		}
	</style>
</head>
<body>
	<div>
		<h3>在线答疑解惑</h3>
		<div contenteditable="true">
			<ul>
				<li></li>
			</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">
		//获取到页面中的按钮,文本域,对话内容区
		var btn = document.getElementsByTagName('button')[0]
		var text = document.getElementsByName('text')[0]
		var list = document.getElementsByTagName('ul')[0]
		var sum = 0
		//添加按钮点击事件,获取用户数据并推送到对话窗口中
		btn.onclick = function () {
			// alert(text.value)
			//获取用户提交的内容
			if (text.value.length == 0) {
				alert('请输入您想要问的问题')
				return false
			}
			var userComment = text.value
			//立即清空用户信息区
			text.value = ''
			//创建一个新节点li
			var li = document.createElement('li')		
			li.innerHTML = userComment
			var userPic = '<img src="../images/wukong.jpg" 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()*3)]
				//取1-5之间的一个整数:Math.floor(Math.random()*6 + 1)
				var reply = document.createElement('li')
				var kefuPic = '<img src="../images/tangseng.jpg" width="30" style="border-radius:50%;">'
				reply.innerHTML = kefuPic + '<span style="color:lightskyblue">'+temp+'</span>'
				list.appendChild(reply)
				sum += 1
			},2000)		
			if (sum > 8) {
				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

3.16作业

2018-03-18 20:38:58