js实现客服和选项卡 - 作业

Home > List of blog posts > js实现客服和选项卡

Blogger Information

Blog 38

fans 0

comment 1

visits 30411

Special Recommendation

More>

Related recommendations

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.box {
			border: 1px solid skyblue;
			width: 300px;
			height: 430px;
			margin:auto;
		}
		h3 {
			text-align: center;
			font-size: 17px;
			border-bottom: 1px solid;
			margin-bottom: 0px;
		}
		.box > ul {
			margin: 0;
			padding: 0;
			overflow: hidden;
		}
		.box > ul li {
			width: 70px;
			height:36px;
			float:left;
			font-size: 14px;
			list-style-type: none;
			text-align: center;
			line-height: 36px;
		}
		.box ul + p {
			font-size: 12px;
			float:right;
			margin-right: 10px;
			margin-top: -36px;
			line-height: 36px;
		}
		.box ul + p >a {
			color: black;
			text-decoration: none;
		}
		.box ul + p >a:hover{
			color: orangered;
		}
		.box li.active {
			border-bottom: 1px solid orangered;	
			font-weight: bolder;
		}

		.box div {
			display: none;
		}
		.box div ul {
			list-style-type: none;
			margin: 0;
			padding: 10px;	
		}
		.box div ul li a {
			font-size: 13px;
			color: #636363;
			text-decoration: none;
		}
		.box div ul li a:hover {
			color: orangered;
		}
		.box div ul li {
			line-height: 40px;
		}
	</style>
</head>
<body>
	<div class="box">
		<h3>排行</h3>
		<ul>
			<li class="active">每日</li>
			<li>每周</li>
			<li>每月</li>
		</ul>
		<p><a href="">更多>></a></p>
		<div style="display: block;">
			<ul>
				<li><a href="">It's time to say goodbye.</a></li>
				<li><a href="">It's time to say goodbye.</a></li>
				<li><a href="">It's time to say goodbye.</a></li>
				<li><a href="">It's time to say goodbye.</a></li>
				<li><a href="">It's time to say goodbye.</a></li>
				<li><a href="">It's time to say goodbye.</a></li>
				<li><a href="">It's time to say goodbye.</a></li>
			</ul>
		</div>

		<div>
			<ul>
				<li><a href="">那些年，藏在剑刃里的青春.</a></li>
				<li><a href="">那些年，藏在剑刃里的青春.</a></li>
				<li><a href="">那些年，藏在剑刃里的青春.</a></li>
				<li><a href="">那些年，藏在剑刃里的青春.</a></li>
				<li><a href="">那些年，藏在剑刃里的青春.</a></li>
				<li><a href="">那些年，藏在剑刃里的青春.</a></li>
				<li><a href="">那些年，藏在剑刃里的青春.</a></li>
			</ul>
		</div>

		<div>
			<ul>
				<li><a href="">对彩虹六号萌新玩家的一些忠告.</a></li>
				<li><a href="">对彩虹六号萌新玩家的一些忠告.</a></li>
				<li><a href="">对彩虹六号萌新玩家的一些忠告.</a></li>
				<li><a href="">对彩虹六号萌新玩家的一些忠告.</a></li>
				<li><a href="">对彩虹六号萌新玩家的一些忠告.</a></li>
				<li><a href="">对彩虹六号萌新玩家的一些忠告.</a></li>
				<li><a href="">对彩虹六号萌新玩家的一些忠告.</a></li>
				<li><a href="">对彩虹六号萌新玩家的一些忠告.</a></li>
			</ul>
		</div>
	</div>

	<script type="text/javascript">
		// 获取需要的元素
		var box = document.getElementsByClassName('box')[0]
		// box下面的ul
		var ul = box.getElementsByTagName('ul')[0]
		// ul下面所以的li
		var tab = ul.getElementsByTagName('li')
		var list = box.getElementsByTagName('div')
		// 元素獲取END
		// 添加事件
		for(var i=0;i<tab.length;i++){
			// 用自定義屬性inde屬性標記
			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>Document</title>
	<style type="text/css">
		div:nth-child(1){
			width: 450px;
			height: 600px;
			margin:30 auto;
			border: 1px solid skyblue;
			background-color: #2e2e2e
		}
		h3{
			text-align: center;
			color: #fff;
		}
		div:nth-child(2){
			width: 400px;
			height: 450px;
			border: 1px solid;
			margin: auto;
			background-color: #e2e2e2;
		}
		ul{
			list-style: none;
			line-height: 2em;
			overflow: hidden;
			padding: 15px;
		}
		table{
			margin: auto;
		}
		textarea{
			width: 100%;
			border: none;
			resize: none;
			background-color: skyblue;
			margin: auto;
			
		}
		button {
			width: 40px;
			height: 78px;
			background-color: seagreen;
			color: white;
			border: none;
		}
	</style>
</head>
<body>
	<div>
		<h3>性感客服</h3>
		<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 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('请输入')
				return false
			}

			var userComment = text.value 
			text.value = ''

			var li = document.createElement('li')
			// 创建头像
			li.innerHTML = userComment
			var userPic = '<img src = "../img/1.png"width="30"height="40">'

			li.innerHTML = userPic+userComment
			list.appendChild(li)

			sum += 1

			//添加定时器
			setTimeout(function(){
				// 创作随机数组
				var info = ['你好烦人呀,本姑娘好累,不知道怜香惜玉吗?','除了退货,退款,维修,什么问题都可以问','啥事呀,我的帅哥哥']
				// 取随机数
				var temp = info[Math.floor(Math.random()*3)]
				// 添加回复
				var reply = document.createElement('li')
				var kfPic = '<img src = "../img/11.png"width="30"height="40">'
				reply.innerHTML = kfPic+temp
				list.appendChild(reply)

				sum += 1
			},2000) 

				// 清除
				if (sum>10) {
					list.innerHTML = ""
					sum = 0
				}
		}
	</script>
</body>
</html>

运行实例 »

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

webwxgetmsgimg (4).jpg

webwxgetmsgimg (5).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

1

2018-03-16 00:39:40

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

实例

实例