选项卡与对话机器人 2018年3月30日 - javascript

首页 > 博客列表 > 选项卡与对话机器人 2018年3月30日

博主信息

博文 27

粉丝 2

访问量 16686

专题推荐

更多>

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>选项卡实战</title>
	<style type="text/css">
		h2 {
			text-align: center;
		}
		.box {
				width:600px;
				height:400px;
				border: 1px solid gray;
				margin:auto;
				background-color: white;
				color:#383838;

		}

		.box > ul {
			margin:0;
			padding:0;
			background-color: #f8f8f8;
			overflow: hidden;
		}

		.box > ul li {
			list-style-type:none;
			width:90px;
			height:35px;
			float:left;
			border-right:1px solid #ccc;
			border-bottom:1px solid #ccc;

			text-align: center;
			line-height: 35px;
		}
		.box ul +span {
			float:right;
			margin-top:-35px;
		}

		.box ul +span >a {
			text-decoration: none;
			color:#696969;
		}

		.box li.active {
			background-color:#fff;
			font-weight: bolder;
			border-bottom: none;
			border-top:3px solid coral;
		}

		/*.box div {
			display:none;
		}*/

		.box div ul {
			margin:0;
			padding:30px;
			list-style-type: none;
		}

		.box div ul li {
			line-height:1.5em;
			

		}

		.box div ul li a {
			color:#636363;
			text-decoration: none;
		}

		.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">Android入门</li>
			<li>Android框架</li>
			<li>线下活动视频回顾</li>
			<li>其他视频</li>
		</ul>
		<span><a href="">更多内容> ></a></span>
		<!-- 选项卡内容 -->
	
		<div>
			<ul>
				<li><a href="">MySQLPDO对象常用方法-MySql参考手册</a><span>2018-3-31</span></li>
				<li><a href="">MySQLPDO对象常用方法-MySql参考手册</a><span>2018-3-31</span></li>
				<li><a href="">MySQLPDO对象常用方法-MySql参考手册</a><span>2018-3-31</span></li>
				<li><a href="">MySQLPDO对象常用方法-MySql参考手册</a><span>2018-3-31</span></li>
				<li><a href="">MySQLPDO对象常用方法-MySql参考手册</a><span>2018-3-31</span></li>
				<li><a href="">MySQLPDO对象常用方法-MySql参考手册</a><span>2018-3-31</span></li>
				<li><a href="">MySQLPDO对象常用方法-MySql参考手册</a><span>2018-3-31</span></li>
				<li><a href="">MySQLPDO对象常用方法-MySql参考手册</a><span>2018-3-31</span></li>
				<li><a href="">MySQLPDO对象常用方法-MySql参考手册</a><span>2018-3-31</span></li>
				<li><a href="">MySQLPDO对象常用方法-MySql参考手册</a><span>2018-3-31</span></li>
				<li><a href="">MySQLPDO对象常用方法-MySql参考手册</a><span>2018-3-31</span></li>
				<li><a href="">MySQLPDO对象常用方法-MySql参考手册</a><span>2018-3-31</span></li>
				<li><a href="">MySQLPDO对象常用方法-MySql参考手册</a><span>2018-3-31</span></li>
				<li><a href="">MySQLPDO对象常用方法-MySql参考手册</a><span>2018-3-31</span></li>
				
			</ul>
		</div>

		<div>
			<ul>
				<li><a href="">33333333333333333333</a><span>2018-3-31</span></li>
				<li><a href="">MySQLPDO对象常用方法-MySql参考手册</a><span>2018-3-31</span></li>
				<li><a href="">MySQLPDO对象常用方法-MySql参考手册</a><span>2018-3-31</span></li>
				<li><a href="">MySQLPDO对象常用方法-MySql参考手册</a><span>2018-3-31</span></li>
				<li><a href="">MySQLPDO对象常用方法-MySql参考手册</a><span>2018-3-31</span></li>
				<li><a href="">MySQLPDO对象常用方法-MySql参考手册</a><span>2018-3-31</span></li>
				<li><a href="">MySQLPDO对象常用方法-MySql参考手册</a><span>2018-3-31</span></li>
				<li><a href="">MySQLPDO对象常用方法-MySql参考手册</a><span>2018-3-31</span></li>
				<li><a href="">MySQLPDO对象常用方法-MySql参考手册</a><span>2018-3-31</span></li>
				<li><a href="">MySQLPDO对象常用方法-MySql参考手册</a><span>2018-3-31</span></li>
				<li><a href="">MySQLPDO对象常用方法-MySql参考手册</a><span>2018-3-31</span></li>
				<li><a href="">MySQLPDO对象常用方法-MySql参考手册</a><span>2018-3-31</span></li>
				<li><a href="">MySQLPDO对象常用方法-MySql参考手册</a><span>2018-3-31</span></li>
				<li><a href="">3333333333333333333</a><span>2018-3-31</span></li>
				
			</ul>
		</div>

		<div>
			<ul>
				<li><a href="">22222222222222222222222222222</a><span>2018-3-31</span></li>
				<li><a href="">MySQLPDO对象常用方法-MySql参考手册</a><span>2018-3-31</span></li>
				<li><a href="">MySQLPDO对象常用方法-MySql参考手册</a><span>2018-3-31</span></li>
				<li><a href="">MySQLPDO对象常用方法-MySql参考手册</a><span>2018-3-31</span></li>
				<li><a href="">MySQLPDO对象常用方法-MySql参考手册</a><span>2018-3-31</span></li>
				<li><a href="">MySQLPDO对象常用方法-MySql参考手册</a><span>2018-3-31</span></li>
				<li><a href="">MySQLPDO对象常用方法-MySql参考手册</a><span>2018-3-31</span></li>
				<li><a href="">MySQLPDO对象常用方法-MySql参考手册</a><span>2018-3-31</span></li>
				<li><a href="">MySQLPDO对象常用方法-MySql参考手册</a><span>2018-3-31</span></li>
				<li><a href="">MySQLPDO对象常用方法-MySql参考手册</a><span>2018-3-31</span></li>
				<li><a href="">MySQLPDO对象常用方法-MySql参考手册</a><span>2018-3-31</span></li>
				<li><a href="">MySQLPDO对象常用方法-MySql参考手册</a><span>2018-3-31</span></li>
				<li><a href="">MySQLPDO对象常用方法-MySql参考手册</a><span>2018-3-31</span></li>
				<li><a href="">2222222222222222222222</a><span>2018-3-31</span></li>
				
			</ul>
		</div>

		<div>
			<ul>
				<li><a href="">11111111111111111111</a><span>2018-3-31</span></li>
				<li><a href="">MySQLPDO对象常用方法-MySql参考手册</a><span>2018-3-31</span></li>
				<li><a href="">MySQLPDO对象常用方法-MySql参考手册</a><span>2018-3-31</span></li>
				<li><a href="">MySQLPDO对象常用方法-MySql参考手册</a><span>2018-3-31</span></li>
				<li><a href="">MySQLPDO对象常用方法-MySql参考手册</a><span>2018-3-31</span></li>
				<li><a href="">MySQLPDO对象常用方法-MySql参考手册</a><span>2018-3-31</span></li>
				<li><a href="">MySQLPDO对象常用方法-MySql参考手册</a><span>2018-3-31</span></li>
				<li><a href="">MySQLPDO对象常用方法-MySql参考手册</a><span>2018-3-31</span></li>
				<li><a href="">MySQLPDO对象常用方法-MySql参考手册</a><span>2018-3-31</span></li>
				<li><a href="">MySQLPDO对象常用方法-MySql参考手册</a><span>2018-3-31</span></li>
				<li><a href="">MySQLPDO对象常用方法-MySql参考手册</a><span>2018-3-31</span></li>
				<li><a href="">MySQLPDO对象常用方法-MySql参考手册</a><span>2018-3-31</span></li>
				<li><a href="">MySQLPDO对象常用方法-MySql参考手册</a><span>2018-3-31</span></li>
				<li><a href="">111111111111111111111111</a><span>2018-3-31</span></li>
				
			</ul>
		</div>
</div>


<script type="text/javascript">
	
		var box = document.getElementsByClassName('box')[0]

		var ul = box.getElementsByTagName('ul')[0]

		var tab = ul.getElementsByTagName('li')
		var list = box.getElementsByTagName('div')
		
		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>

运行实例 »

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

对话机器人代码如下:

实例

<!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: lightskyblue;
			margin: 30px auto;
			color: #333;
			box-shadow: 2px 2px 2px #808080
		}
		h2 {
			text-align: center;
			margin-top:10px;
		}

		div:nth-child(2){
			width:400px;
			height:500px;
			background-color: lightgray;
			margin:20px auto 10px;
			border: 4px double green;

		}
		
		ul {
			list-style-type: none;
			overflow: hidden;
			padding:15px;

		}

		table {
			margin:auto;
			width:90%;
			height:100px;
		}

		textarea {
			resize:none;
		}

		button {
			width:60px;
			height:50px;
			background-color: green;
			border: none;
		}

		button:hover {
			background-color: yellow;
		}
	
		</style>
</head>
<body>
	<div>
		<h2>在线客服</h2>
		
		<div contenteditable="true">
			<ul>
				<li></li>
			</ul>
		</div>

		<table>
			<tr>
				<td><textarea cols="50" rows="4" name="text"></textarea></td>
				<td><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=''

				// // 创建新节点
				var li = document.createElement('li')
				li.innerHTML = userComment
				var userPic = '<img src="../images/touxiang.png" alt="头像" width="50" 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)]

					var kefuPic = '<img src="../images/2.jpg" alt="头像" width="50" style="border-radius:50%"/>'

					var reply = document.createElement('li')
				reply.innerHTML = kefuPic +temp

				list.appendChild(reply)
				sum += 1

				}, 2000)

				if(sum>7){
					list.innerHTML=' '
					sum = 0
				}


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

运行实例 »

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

手抄作业:

批改状态：合格

老师批语：

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

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

0条评论

作者最新博文

将$.ajax()的第一种用法 2018-4-10

2018-04-12 11:29:59