search

博客列表 >3.30PHP线上培训作业

3.30PHP线上培训作业

小丑的博客
小丑的博客原创
2018年04月01日 16:42:58593浏览

线上培训第十一天

代码1：TAB菜单

实例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Tab标签</title>

	<style type="text/css">
		.box{
			width: 675px;
			height: 625px;
			margin: 20px auto;
			border:1px solid #ccc;
		}

		.box .tab {
			width: 100%;
			height: 45px;
			margin: 0;
				
		}	

		.box .tab ul{
			overflow: hidden;
			list-style-type: none;
			height: 45px;
			padding: 0;
			margin: 0;
			background-color: #fcfcfc;
			/*background-color: black;*/
		}

		.box .tab ul li{
			float: left;
			line-height: 44px;
			width: 115px;
			text-align: center;
			border-right: 1px solid #ccc;
			border-bottom: 1px solid #ccc;
		}

		.box .tab ul li:hover{
			font-weight: bold;
			border-top: 2px solid orangered;
		}

		.box .tab span{
			float: right;
			margin-top:-35px; 
		}

		a{
			text-decoration: none;
			color:#666666
		}

		a:hover{
			color:black;
		}


		.box .listinfo{
			/*background-color: yellow;*/
			display: none;
		}

		.box .listinfo ul{
			margin-top: 45px;
			padding: 0 25px 0 25px;
			list-style-type: none;
			line-height: 1.5em;
		}

		.box .listinfo span{
			float: right;
			color: red;
		}
	</style>

</head>
<body>
	<h2 align="center">Tab标签</h2>

	<div class="box">
		<div class="tab">
			<ul id="list_ul">
				<li class="active">技术文章</li>
				<li>网站源码</li>
				<li>原生手册</li>
				<li>推荐博文</li>
			</ul>
			<span><a href="">更多下载>></a></span>
		</div>
		
		<div class="listinfo" style="display: block;">
			<ul>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>03-31</span></li>
				<li><a href="">Dai的博客KongLi的博客 | Excel表格数据转化到数据库里面</a><span>03-31</span></li>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>03-31</span></li>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>03-31</span></li>
				<li><a href="">Dai的博客KongLi的博客 | Excel表格数据转化到数据库里面</a><span>03-31</span></li>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>03-31</span></li>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>03-31</span></li>
				<li><a href="">Dai的博客KongLi的博客 | Excel表格数据转化到数据库里面</a><span>03-31</span></li>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>03-31</span></li>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>03-31</span></li>
				<li><a href="">Dai的博客KongLi的博客 | Excel表格数据转化到数据库里面</a><span>03-31</span></li>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>03-31</span></li>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>03-31</span></li>
				<li><a href="">Dai的博客KongLi的博客 | Excel表格数据转化到数据库里面</a><span>03-31</span></li>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>03-31</span></li>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>03-31</span></li>
				<li><a href="">Dai的博客KongLi的博客 | Excel表格数据转化到数据库里面</a><span>03-31</span></li>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>03-31</span></li>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>03-31</span></li>
				<li><a href="">Dai的博客KongLi的博客 | Excel表格数据转化到数据库里面</a><span>03-31</span></li>
			</ul>
		</div>
		<div  class="listinfo">
			<ul>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>04-01</span></li>
				<li><a href="">Dai的博客KongLi的博客 | Excel表格数据转化到数据库里面</a><span>04-01</span></li>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>04-01</span></li>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>04-01</span></li>
				<li><a href="">Dai的博客KongLi的博客 | Excel表格数据转化到数据库里面</a><span>04-01</span></li>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>04-01</span></li>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>04-01</span></li>
				<li><a href="">Dai的博客KongLi的博客 | Excel表格数据转化到数据库里面</a><span>04-01</span></li>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>04-01</span></li>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>04-01</span></li>
				<li><a href="">Dai的博客KongLi的博客 | Excel表格数据转化到数据库里面</a><span>04-01</span></li>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>04-01</span></li>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>04-01</span></li>
				<li><a href="">Dai的博客KongLi的博客 | Excel表格数据转化到数据库里面</a><span>04-01</span></li>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>04-01</span></li>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>04-01</span></li>
				<li><a href="">Dai的博客KongLi的博客 | Excel表格数据转化到数据库里面</a><span>04-01</span></li>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>04-01</span></li>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>04-01</span></li>
				<li><a href="">Dai的博客KongLi的博客 | Excel表格数据转化到数据库里面</a><span>04-01</span></li>
			</ul>
		</div>
		<div  class="listinfo">
			<ul>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>04-02</span></li>
				<li><a href="">Dai的博客KongLi的博客 | Excel表格数据转化到数据库里面</a><span>04-02</span></li>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>04-02</span></li>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>04-02</span></li>
				<li><a href="">Dai的博客KongLi的博客 | Excel表格数据转化到数据库里面</a><span>04-02</span></li>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>04-02</span></li>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>04-02</span></li>
				<li><a href="">Dai的博客KongLi的博客 | Excel表格数据转化到数据库里面</a><span>04-02</span></li>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>04-02</span></li>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>04-02</span></li>
				<li><a href="">Dai的博客KongLi的博客 | Excel表格数据转化到数据库里面</a><span>04-02</span></li>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>04-02</span></li>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>04-02</span></li>
				<li><a href="">Dai的博客KongLi的博客 | Excel表格数据转化到数据库里面</a><span>04-02</span></li>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>04-02</span></li>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>04-02</span></li>
				<li><a href="">Dai的博客KongLi的博客 | Excel表格数据转化到数据库里面</a><span>04-02</span></li>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>04-02</span></li>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>04-02</span></li>
				<li><a href="">Dai的博客KongLi的博客 | Excel表格数据转化到数据库里面</a><span>04-02</span></li>
			</ul>
		</div>
		<div  class="listinfo">
			<ul>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>04-03</span></li>
				<li><a href="">Dai的博客KongLi的博客 | Excel表格数据转化到数据库里面</a><span>04-03</span></li>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>04-03</span></li>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>04-03</span></li>
				<li><a href="">Dai的博客KongLi的博客 | Excel表格数据转化到数据库里面</a><span>04-03</span></li>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>04-03</span></li>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>04-03</span></li>
				<li><a href="">Dai的博客KongLi的博客 | Excel表格数据转化到数据库里面</a><span>04-03</span></li>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>04-03</span></li>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>04-03</span></li>
				<li><a href="">Dai的博客KongLi的博客 | Excel表格数据转化到数据库里面</a><span>04-03</span></li>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>04-03</span></li>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>04-03</span></li>
				<li><a href="">Dai的博客KongLi的博客 | Excel表格数据转化到数据库里面</a><span>04-03</span></li>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>04-03</span></li>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>04-03</span></li>
				<li><a href="">Dai的博客KongLi的博客 | Excel表格数据转化到数据库里面</a><span>04-03</span></li>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>04-03</span></li>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>04-03</span></li>
				<li><a href="">Dai的博客KongLi的博客 | Excel表格数据转化到数据库里面</a><span>04-03</span></li>
			</ul>
		</div>

	</div>

	<script type="text/javascript">
		
		var box = document.getElementsByClassName("tab")[0];
		
		var ul = box.getElementsByTagName("ul")[0];

		var tab = ul.getElementsByTagName("li");

		var list = document.getElementsByClassName("listinfo");


		for(var i=0;i<tab.length;i++){


			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>

</body>
</html>

运行实例 »

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

代码2：简易仿聊天机器人

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>2.热身: 仿机器人聊天窗口</title>
	<style type="text/css">
		
		.message{
			width: 500px;
			height: 650px;
			background-color: lightyellow;
			border: 1px solid red;
			/*margin: auto;*/
		}

		.showmessage{
			width: 90%;
			height: 450px;
			margin: auto;
			margin-bottom: 50px; 
			background-color: #fcfcfc;
		}

		ul{
			list-style-type: none;
		}

		table{

			width: 90%;
			height:80px;
			margin: auto;
		}

		textarea{
			width: 300px;
			height: 80px;
			border: none;
			resize: none;
			background-color: lightblue;
		}



		button {
			width: 80px;
			height: 80px;
			background-color: seagreen;
			color: white;
			border: none;
			/*text-align: left;*/

		}
	</style>
</head>
<body>
	<!-- 我们的任务是把文本框中的内容直接显示到下面的列表中 -->
	<div class="message">
		
		<div class="showmessage">
			<ul>
				<li></li>
			</ul>
		</div>

		<table>
		<tr>
			<td><textarea name="info"></textarea></td>
			<td><button>发送</button></td>
		</tr>
	
	
	</table>
	<ul>
		
	</ul>
</div>
	<script type="text/javascript">

		var input = document.getElementsByName('info')[0]
		var button = document.getElementsByTagName('button')[0]
		var ul = document.getElementsByTagName('ul')[0]

		var huifu = ['人工太忙，请稍后','人工服务请按1','继续等待请按2','返回上级请按3']
		
		var sum = 0;

		button.onclick = function() {
			var text = input.value
		 	var li = document.createElement('li')
			li.innerHTML = input.value
		 	ul.appendChild(li)
		 	sum += 1 ;

		 	setTimeout(function(){
		 		var temp = huifu[Math.floor(Math.random()*4)]
				var li2 = document.createElement('li')	
				li2.innerHTML = temp		 	
		 		ul.appendChild(li2)
		 		sum += 1 ;
		 	},2000)
			
			if(sum>10){
				ul.innerHTML = ''
				sum = 0
			}
		}

		

	</script>
</body>
</html>

运行实例 »

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

3.手抄代码111.jpg222.jpg333.jpg

上一条：2018/04/26(浮动，清除浮动)下一条：原生JS实现简易计算器实战
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多