JS实例-选项卡与机器人客服--2018年3月31日0点30分 - 作业

Home > List of blog posts > JS实例-选项卡与机器人客服--2018年3月31日0点30分

Blogger Information

Blog 15

fans 0

comment 1

visits 7807

Special Recommendation

More>

Related recommendations

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>选项卡</title>
	<style>
		.box{
			width:550px;
			height:400px;
			background-color:#EBEBEB; 
			margin: 10px auto;
			border:1px solid #D9D7D7;
		}
		.box > ul{
			overflow:hidden;
			margin:0;
			padding:0;
			background-color: #fff;
		}
		.box > ul li{
			float:left;
			list-style: none;
			width:90px;
			height:40px;
			text-align: center;
			line-height: 40px;
			border-right: 1px solid #D9D7D7;
			border-bottom: 1px solid #D9D7D7;
		}
		.box ul + span{
			float:right;
			width:90px;
			height:40px;
			line-height: 40px;
			margin-top: -40px;
		}
		.box ul + span > a{
			text-decoration:none;
			color:#757575;
		}
		.box li.active {
			background-color: #fff;
			font-weight: bolder;
			border-bottom: none;
			border-top: 3px solid #EB885E;
		}
		.box div{
			display:none;

		}
		.box div ul{
			list-style: none;
			margin:0;
			padding:10px;
		}
		.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: #F23030;
		}
	</style>
</head>
<body>
	<div class="box">
		<ul>
			<li class="active">选项卡1</li>
			<li>选项卡2</li>
			<li>选项卡3</li>
			<li>选项卡4</li>
		</ul>
		<span><a href="">更多>></a></span>
		<div style="display: block;">
			<ul>
				<li><a href="">我国诞生世界首例神经疾病基因敲入猪</a><span>02-26</span></li>
				<li><a href="">我国诞生世界首例神经疾病基因敲入猪</a><span>02-26</span></li>
				<li><a href="">我国诞生世界首例神经疾病基因敲入猪</a><span>02-26</span></li>
				<li><a href="">我国诞生世界首例神经疾病基因敲入猪</a><span>02-26</span></li>
				<li><a href="">我国诞生世界首例神经疾病基因敲入猪</a><span>02-26</span></li>
				
				
			</ul>
		</div>
		<div>
			<ul>
				<li><a href="">2018中国常德桃花源桃花节25日开幕</a><span>2-27</span></li>
				<li><a href="">2018中国常德桃花源桃花节25日开幕</a><span>2-27</span></li>
				<li><a href="">2018中国常德桃花源桃花节25日开幕</a><span>2-27</span></li>
				<li><a href="">2018中国常德桃花源桃花节25日开幕</a><span>2-27</span></li>
				<li><a href="">2018中国常德桃花源桃花节25日开幕</a><span>2-27</span></li>
				
			</ul>
		</div>
		<div>
			<ul>
				<li><a href="">王毅将于4月4日至5日对俄罗斯进行访问</a><span>2-28</span></li>
				<li><a href="">王毅将于4月4日至5日对俄罗斯进行访问</a><span>2-28</span></li>
				<li><a href="">王毅将于4月4日至5日对俄罗斯进行访问</a><span>2-28</span></li>
				<li><a href="">王毅将于4月4日至5日对俄罗斯进行访问</a><span>2-28</span></li>
				<li><a href="">王毅将于4月4日至5日对俄罗斯进行访问</a><span>2-28</span></li>
				
			</ul>
		</div>
		<div>
			<ul>
				<li><a href="">外交部:中方不想打贸易战 美没必要撞南墙再回头</a><span>2-29</span></li>
				<li><a href="">外交部:中方不想打贸易战 美没必要撞南墙再回头</a><span>2-29</span></li>
				<li><a href="">外交部:中方不想打贸易战 美没必要撞南墙再回头</a><span>2-29</span></li>
				<li><a href="">外交部:中方不想打贸易战 美没必要撞南墙再回头</a><span>2-29</span></li>
				<li><a href="">外交部:中方不想打贸易战 美没必要撞南墙再回头</a><span>2-29</span></li>
				
			</ul>
		</div>
	</div>
	<script>
		//获取数据
		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>
		div:nth-child(1) {
			width: 450px;
			height: 650px;
			background-color: #53CFC4;
			margin: 30px auto;
			color: #333;
			box-shadow: 2px 2px 2px #737373;
		}
		
		h2 {
			text-align: center;
			margin-bottom: -10px;
		}
		div:nth-child(2) {
			width: 400px;
			height: 500px;
			border: 4px double #66CC99;
			background-color: #efefef;
			margin: 20px auto 10px;
		}
		
		ul {
			list-style: none;
			line-height: 2em;
			overflow: hidden;
			padding: 15px;
		}

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

		textarea{
			border: none;
			resize: none;
			background-color: #FFF0B2;
			
		}
		button {
			width: 60px;
			height: 40px;
			background-color: #329633;
			color: #fff;
			border: none;
			
		}
		button:hover {
			cursor: pointer;
			background-color: #FF9955;
		}
	</style>
</head>
<body>
	<div>
		<h2>在线客服</h2>
		<div contenteditable="true">
			<ul>
				<li></li>
			</ul>
		</div>
		<table>
			<tr>
				<td align="right"><textarea cols="50" rows="4" name="text"></textarea></td>
				<td align="left"><button type="button">发送</button></td>
			</tr>
		</table>
	</div>
	<script>
		//获取数据
		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('请问想说什么')
				return false
			}
			var userComment = text.value
			text.value = ''
			//创建节点li
			var li = document.createElement('li')
			li.innerHTML = userComment
			var userPic = '<img src="image/sl.jpg" width="30" style="border-radius:50%">'
			li.innerHTML = userPic+userComment
			//将节点插入对话列表中
			list.appendChild(li)
			sum += 1
				setTimeout(function(){
				var info = ['回答1','回答2','回答3']
				var temp = info[Math.floor(Math.random()*3)]
				var reply = document.createElement('li')
				var kefuPic = '<img src="image/fbb.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 = 0
			}
		}
	</script>
</body>
</html>

运行实例 »

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

手抄代码：

Correction status：Uncorrected

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

前端入门第一课

2018-03-16 19:54:26

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

实例

实例