Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 实战选项卡及自动机器人回复-2018年3月30日
Blogger Information
Blog 46
fans 1
comment 1
visits 30317
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
实战选项卡及自动机器人回复-2018年3月30日
笨鸟先飞
Original
449 people have browsed it

选项卡：

实例

<!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

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