简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >实战选项卡及自动机器人回复-2018年3月30日

实战选项卡及自动机器人回复-2018年3月30日

笨鸟先飞
笨鸟先飞原创
2018年04月01日 14:08:29442浏览

选项卡：

实例

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

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

		.box >ul li{
			float: left;
			list-style-type: none;
			width: 90px;
			height: 33px;
			border-right: 1px solid gray;
			border-bottom: 1px solid gray;
			text-align: center;
			line-height: 36px;
		}

		.box ul + span{
			float: right;
			width: 90px;
			height: 36px;
			line-height: 36px;
			margin-top: -36px;
		}

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

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

		.box div{
			display: none;
		}

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

		.box div ul li{
			line-height: 1.5em;
			/*background-color: green;*/
		}

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

		.box div ul li a:hover{
            color: black;
		}

		.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教程</a> | <a href="">使用Vue构建可重用的分页组件</a><span>2018-3-30</span></li>
		    <li><a href="">js教程</a> | <a href="">使用Vue构建可重用的分页组件</a><span>2018-3-30</span></li>
		    <li><a href="">js教程</a> | <a href="">使用Vue构建可重用的分页组件</a><span>2018-3-30</span></li>
		    <li><a href="">js教程</a>|<a href="">使用Vue构建可重用的分页组件</a><span>2018-3-30</span></li>
		    <li><a href="">js教程</a>|<a href="">使用Vue构建可重用的分页组件</a><span>2018-3-30</span></li>
		    <li><a href="">js教程</a>|<a href="">使用Vue构建可重用的分页组件</a><span>2018-3-30</span></li>
		    <li><a href="">js教程</a>|<a href="">使用Vue构建可重用的分页组件</a><span>2018-3-30</span></li>
		    <li><a href="">js教程</a>|<a href="">使用Vue构建可重用的分页组件</a><span>2018-3-30</span></li>
		    <li><a href="">js教程</a>|<a href="">使用Vue构建可重用的分页组件</a><span>2018-3-30</span></li>
		    <li><a href="">js教程</a>|<a href="">使用Vue构建可重用的分页组件</a><span>2018-3-30</span></li>
		    <li><a href="">js教程</a>|<a href="">使用Vue构建可重用的分页组件</a><span>2018-3-30</span></li>
		    <li><a href="">js教程</a>|<a href="">使用Vue构建可重用的分页组件</a><span>2018-3-30</span></li>
		    <li><a href="">js教程</a>|<a href="">使用Vue构建可重用的分页组件</a><span>2018-3-30</span></li>
		    <li><a href="">js教程</a>|<a href="">使用Vue构建可重用的分页组件</a><span>2018-3-30</span></li>
		    <li><a href="">js教程</a>|<a href="">使用Vue构建可重用的分页组件</a><span>2018-3-30</span></li>
		    <li><a href="">js教程</a>|<a href="">使用Vue构建可重用的分页组件</a><span>2018-3-30</span></li>
		    <li><a href="">js教程</a>|<a href="">使用Vue构建可重用的分页组件</a><span>2018-3-30</span></li>
		    <li><a href="">js教程</a>|<a href="">使用Vue构建可重用的分页组件</a><span>2018-3-30</span></li>
		  </ul>
	    </div>

	    <div>
		  <ul>
			<li><a href="">前端模板</a>|<a href="">战争网游公司网站模板</a><span>2018-3-30</span></li>
			<li><a href="">前端模板</a>|<a href="">战争网游公司网站模板</a><span>2018-3-30</span></li>
			<li><a href="">前端模板</a>|<a href="">战争网游公司网站模板</a><span>2018-3-30</span></li>
			<li><a href="">前端模板</a>|<a href="">战争网游公司网站模板</a><span>2018-3-30</span></li>
			<li><a href="">前端模板</a>|<a href="">战争网游公司网站模板</a><span>2018-3-30</span></li>
			<li><a href="">前端模板</a>|<a href="">战争网游公司网站模板</a><span>2018-3-30</span></li>
			<li><a href="">前端模板</a>|<a href="">战争网游公司网站模板</a><span>2018-3-30</span></li>
			<li><a href="">前端模板</a>|<a href="">战争网游公司网站模板</a><span>2018-3-30</span></li>
			<li><a href="">前端模板</a>|<a href="">战争网游公司网站模板</a><span>2018-3-30</span></li>
			<li><a href="">前端模板</a>|<a href="">战争网游公司网站模板</a><span>2018-3-30</span></li>
			<li><a href="">前端模板</a>|<a href="">战争网游公司网站模板</a><span>2018-3-30</span></li>
			<li><a href="">前端模板</a>|<a href="">战争网游公司网站模板</a><span>2018-3-30</span></li>
			<li><a href="">前端模板</a>|<a href="">战争网游公司网站模板</a><span>2018-3-30</span></li>
			<li><a href="">前端模板</a>|<a href="">战争网游公司网站模板</a><span>2018-3-30</span></li>
			<li><a href="">前端模板</a>|<a href="">战争网游公司网站模板</a><span>2018-3-30</span></li>
			<li><a href="">前端模板</a>|<a href="">战争网游公司网站模板</a><span>2018-3-30</span></li>
			<li><a href="">前端模板</a>|<a href="">战争网游公司网站模板</a><span>2018-3-30</span></li>
			<li><a href="">前端模板</a>|<a href="">战争网游公司网站模板</a><span>2018-3-30</span></li>			
		  </ul>
		</div>

		<div>
		
		  <ul>
			<li><a href="">MySQL</a>|<a href="">PDO 事务处理-MySql参考手册</a><span>2018-3-30</span></li>
			<li><a href="">MySQL</a>|<a href="">PDO 事务处理-MySql参考手册</a><span>2018-3-30</span></li>
			<li><a href="">MySQL</a>|<a href="">PDO 事务处理-MySql参考手册</a><span>2018-3-30</span></li>
			<li><a href="">MySQL</a>|<a href="">PDO 事务处理-MySql参考手册</a><span>2018-3-30</span></li>
			<li><a href="">MySQL</a>|<a href="">PDO 事务处理-MySql参考手册</a><span>2018-3-30</span></li>
			<li><a href="">MySQL</a>|<a href="">PDO 事务处理-MySql参考手册</a><span>2018-3-30</span></li>
			<li><a href="">MySQL</a>|<a href="">PDO 事务处理-MySql参考手册</a><span>2018-3-30</span></li>
			<li><a href="">MySQL</a>|<a href="">PDO 事务处理-MySql参考手册</a><span>2018-3-30</span></li>
			<li><a href="">MySQL</a>|<a href="">PDO 事务处理-MySql参考手册</a><span>2018-3-30</span></li>
			<li><a href="">MySQL</a>|<a href="">PDO 事务处理-MySql参考手册</a><span>2018-3-30</span></li>
			<li><a href="">MySQL</a>|<a href="">PDO 事务处理-MySql参考手册</a><span>2018-3-30</span></li>
			<li><a href="">MySQL</a>|<a href="">PDO 事务处理-MySql参考手册</a><span>2018-3-30</span></li>
			<li><a href="">MySQL</a>|<a href="">PDO 事务处理-MySql参考手册</a><span>2018-3-30</span></li>
			<li><a href="">MySQL</a>|<a href="">PDO 事务处理-MySql参考手册</a><span>2018-3-30</span></li>
			<li><a href="">MySQL</a>|<a href="">PDO 事务处理-MySql参考手册</a><span>2018-3-30</span></li>
			<li><a href="">MySQL</a>|<a href="">PDO 事务处理-MySql参考手册</a><span>2018-3-30</span></li>
			<li><a href="">MySQL</a>|<a href="">PDO 事务处理-MySql参考手册</a><span>2018-3-30</span></li>
			<li><a href="">MySQL</a>|<a href="">PDO 事务处理-MySql参考手册</a><span>2018-3-30</span></li>
			
			
		  </ul>
		</div>
		
		<div>
		  <ul>
			<li><a href="">Dai的博客</a>|<a href="">PHP数据迁移到EXCEL表格</a><span>2018-3-30</span></li>
			<li><a href="">Dai的博客</a>|<a href="">PHP数据迁移到EXCEL表格</a><span>2018-3-30</span></li>
			<li><a href="">Dai的博客</a>|<a href="">PHP数据迁移到EXCEL表格</a><span>2018-3-30</span></li>
			<li><a href="">Dai的博客</a>|<a href="">PHP数据迁移到EXCEL表格</a><span>2018-3-30</span></li>
			<li><a href="">Dai的博客</a>|<a href="">PHP数据迁移到EXCEL表格</a><span>2018-3-30</span></li>
			<li><a href="">Dai的博客</a>|<a href="">PHP数据迁移到EXCEL表格</a><span>2018-3-30</span></li>
			<li><a href="">Dai的博客</a>|<a href="">PHP数据迁移到EXCEL表格</a><span>2018-3-30</span></li>
			<li><a href="">Dai的博客</a>|<a href="">PHP数据迁移到EXCEL表格</a><span>2018-3-30</span></li>
			<li><a href="">Dai的博客</a>|<a href="">PHP数据迁移到EXCEL表格</a><span>2018-3-30</span></li>
			<li><a href="">Dai的博客</a>|<a href="">PHP数据迁移到EXCEL表格</a><span>2018-3-30</span></li>
			<li><a href="">Dai的博客</a>|<a href="">PHP数据迁移到EXCEL表格</a><span>2018-3-30</span></li>
			<li><a href="">Dai的博客</a>|<a href="">PHP数据迁移到EXCEL表格</a><span>2018-3-30</span></li>
			<li><a href="">Dai的博客</a>|<a href="">PHP数据迁移到EXCEL表格</a><span>2018-3-30</span></li>
			<li><a href="">Dai的博客</a>|<a href="">PHP数据迁移到EXCEL表格</a><span>2018-3-30</span></li>
			<li><a href="">Dai的博客</a>|<a href="">PHP数据迁移到EXCEL表格</a><span>2018-3-30</span></li>
			<li><a href="">Dai的博客</a>|<a href="">PHP数据迁移到EXCEL表格</a><span>2018-3-30</span></li>
			<li><a href="">Dai的博客</a>|<a href="">PHP数据迁移到EXCEL表格</a><span>2018-3-30</span></li>
			<li><a href="">Dai的博客</a>|<a href="">PHP数据迁移到EXCEL表格</a><span>2018-3-30</span></li>
          </ul>
        </div>
	</div>
	<script type="text/javascript">
		//第一步，先获取选项卡和对应的区块信息列表
		var box = document.getElementsByClassName('box')[0]
		// alert(box.nodeName)获取标签名
		var ul = box.getElementsByTagName('ul')[0]
		var tab = ul.getElementsByTagName('li')

		var list = box.getElementsByTagName('div')

		//给每一个选项卡添加事件：循环添加
		// alert(tab.length) 获得选项卡个数

		for (var i=0; i<tab.length; i++){
			//给当前的选项卡添加一个自定义属性 number
			tab[i].number = 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.number].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: 600px;
			background-color: lightblue;
			margin: 30px auto;
			color: #333;
			box-shadow: 2px 2px 2px #808080;
		}

		h2{
			text-align: center;
			margin-bottom: -10px;
		}

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

        ul{
        	list-style-type: none;
        	line-height: 2em;
        	padding: 15px;
        	overflow: hidden;
        }

        table{
        	width: 90%;
        	height: 80px;
        	margin: auto;
        	/*border: 1px solid red;*/
        }

        /*td{border: 1px solid red;}*/

        textarea{
        	resize: none;
        	border: none;
        	background-color: lightyellow;
        }

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

        button:hover{
        	cursor: pointer;
            color: red;
        }
	</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(){
			if(text.value.length==0){
				alert('此处不能输入为空')
				text.focus()
				return false

		     }

             var userComment = text.value
             text.value = ''
              
              // 创建新节点
              var li = document.createElement('li')
                var userPic ='<img src="images/5.jpg" width="30" style="border-radius:50%">'
              li.innerHTML =  userPic + userComment


              // 插到页面中： 父级.appendChild(当前节点)

              list.appendChild(li)
              // sum = sum + 1
              sum += 1
               
               setTimeout(function(){
               	var info =['你狠无聊啊', '不想理你', '不买就拉倒' ]
               	var temp = info[Math.floor(Math.random()*3)]
               	     var reply = document.createElement('li')
               	      var kefuPic ='<img src="images/yz.jpg" width="30" style="border-radius:50%">'
                     reply.innerHTML = kefuPic + '<span style=color:red>'+temp+'</span>'
                     list.appendChild(reply)
                     sum += 1
               },2000)


                 if(sum >10 ) {
                 	list.innerHTML = ''
                 	sum =''
                 }
            
			}
	</script>
</body>
</html>

运行实例 »

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

手写机器人自动回复的代码：

18_meitu_6.jpg

19_meitu_7.jpg

20_meitu_8.jpg

21_meitu_9.jpg

上一条：2018年03月28号15.30分下一条：实战王者荣耀相册及迷你计算机-2018年3月29日
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多