330选项卡，机器人客服 - js

首页 > 博客列表 > 330选项卡，机器人客服

博主信息

博文 18

粉丝 0

访问量 14912

专题推荐

更多>

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>选项卡</title>
	<style type="text/css">
		.box{
			width: 500px;
			height: 400px;
			margin: auto;
			border:1px solid #666;	
		}
		p{
			float: right;
			height: 38px;
			line-height: 38px;
			margin-top: -38px;
		}
		h2{
			text-align: center;
		}
		.box >ul{
			padding: 0;
			margin: 0;
			height: 38px;
			line-height: 38px;
			overflow: hidden;
			background-color:  #f8f8f8;
		}
		.box >ul li{
			margin: 0;
			width: 90px;
			height: 35px;
			float: left;
			line-height: 38px;
			text-align: center;
			list-style-type: none;
			
			border-right: 1px solid #666;
			border-bottom: 1px solid #666;
		}
		a{
			text-decoration: none;
			color: #696969;
		}
		.box >ul li.one{
			border-top:3px solid red;
			border-bottom:none;
            font-weight: bolder;
		}

		.box div ul {
			margin: 10px 15px;
			padding: 0;
			clear: both;
		}
		.box div ul li{
			list-style-type: none;
			line-height: 1.5em;
		}
		.box div ul li span{
			float: right;
			color: red;
		}
		.box div{
			display: none;
		}	
	</style>
</head>
<body>
			<h2>选项卡</h2>
	<div class="box">
		<ul >
			<li class="one" ><a href="">技术文章</a></li>
			<li><a href="">网站源码</a></li>
			<li><a href="">原生手册</a></li>
			<li><a href="">推荐博文</a></li>
		</ul>
		<p>更多下载>></p>
		<div>
			<ul>
				<li><a href="">PHP生成带logo图像二维码的两种方法</a><span>03-30</span></li>
				<li><a href="">PHP生成带logo图像二维码的两种方法</a><span>03-30</span></li>
				<li><a href="">PHP生成带logo图像二维码的两种方法</a><span>03-30</span></li>
				<li><a href="">PHP生成带logo图像二维码的两种方法</a><span>03-30</span></li>
				<li><a href="">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>				
			</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>				
			</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>
			</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='one'   
           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">
		table{
			width: 400px;
			height: 500px;
			border: 1px solid red;
			background-color: lightgreen;
		}
		tr:nth-child(2){
			height: 420px;
		}
		tr:nth-child(2) > td{
			line-height:1.1em;
			border: 1px solid green;

		}
		textarea{
			resize: none;
		}
		button{
			width: 80px;
			height: 50px;
			font-size: 20px;
			border: 0;
		}
		button:hover{
			background-color:lightblue;
			font-size: 1.5em;

		}
	</style>
</head>
<body>
	<table>
		<tr>
			<th colspan="2">机器人客服</th>
		</tr>
		<tr>
			<td class="one" colspan="2" contenteditable="true">
				
			</td>
		</tr>
		<tr>
			<td>
				<textarea cols="35" rows="5"></textarea>
			</td>
			<td><button>发送</button>
			</td>
		</tr>
	</table>
	<script type="text/javascript">
		var text=document.getElementsByTagName('textarea')[0]
		var input=document.getElementsByClassName('one')[0]
		var button=document.getElementsByTagName('button')[0]
		var sum=0
		button.onclick=function(){
			if (text.value.length==0) {
				alert('内容不能为空')
				text.focus()
				return flase
			}
            var user=text.value 
             text.value=''
			var p=document.createElement('p')
			p.innerHTML=user
			input.appendChild(p)
			sum=sum+1
           

           setTimeout(function(){
          var info=['回复一','回复二','回复三','回复四','回复五','回复六']
          var temp=info[Math.floor(Math.random()*4)]
          var replay=document.createElement('p')
          replay.innerHTML=temp
          input.appendChild(replay)
          sum+=1
          },500)
           if (sum>12) {
           	input.innerHTML=''
           	sum=0
           }
		}
	</script>
	
</body>
</html>

运行实例 »

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

批改状态：未批改

老师批语：

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

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

0条评论

作者最新博文

0409在线相册s.post()

2018-05-03 14:21:42