简体中文（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

博客列表 >PHP第十一天作业-JS实现选项卡和机器人对话

PHP第十一天作业-JS实现选项卡和机器人对话

HeartofSunny的博客
HeartofSunny的博客原创
2018年04月02日 19:58:39595浏览

选项卡

<!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;
            border: 1px solid #ccc;
            margin: 20px auto;
            color: #363636;
        }
        .box > ul {
            margin: 0;
            padding: 0;
            background-color: #f8f8f8;
            overflow: hidden;
        }
        .box > ul li {
            list-style-type: none;
            width: 90px;
            height:36px;
            float:left;

            border-right: 1px solid #ccc;
            border-bottom: 1px solid #ccc;
            

            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: #fff;
            font-weight: bolder;
            border-bottom: none;

            border-top: 3px solid orangered;            
        }

        .box div {
            display: none;
        }

        .box div ul {
            margin: 0;
            padding: 10px;

            list-style-type: none;
        }
        
        .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: red;
        }
    </style>
</head>
<body>
        <!-- 掌握循环操作 -->
    <h2>选项卡实战</h2>
    <div class="box">
        
        <ul>
            <!-- 创建四个选项卡,并设置第一个为当前激活高亮状态 -->
            <li class="active">选项一</li>
            <li>选项二</li>
            <li>选项三</li>
            <li>选项四</li>
        </ul>
        <span><a href="">查看详情>></a></span>

        <!-- 其实你在页面中看到列表,其实都已经在页面中了,只是隐藏了起来,实际开发过程,大多是通过Ajax请求来动态获取 -->
        <div style="display: block;">
            <ul>
                <li><a href="">标题内容1 | 主要内容主要内容主要内容</a><span>03-30</span></li>
                <li><a href="">标题内容 | 主要内容主要内容主要内容</a><span>03-30</span></li>
                <li><a href="">标题内容 | 主要内容主要内容主要内容</a><span>03-30</span></li>
                <li><a href="">标题内容 | 主要内容主要内容主要内容</a><span>03-30</span></li>
                <li><a href="">标题内容 | 主要内容主要内容主要内容</a><span>03-30</span></li>
                <li><a href="">标题内容 | 主要内容主要内容主要内容</a><span>03-30</span></li>
                <li><a href="">标题内容 | 主要内容主要内容主要内容</a><span>03-30</span></li>
                <li><a href="">标题内容 | 主要内容主要内容主要内容</a><span>03-30</span></li>
                <li><a href="">标题内容 | 主要内容主要内容主要内容</a><span>03-30</span></li>
                <li><a href="">标题内容 | 主要内容主要内容主要内容</a><span>03-30</span></li>
                <li><a href="">标题内容 | 主要内容主要内容主要内容</a><span>03-30</span></li>
                <li><a href="">标题内容 | 主要内容主要内容主要内容</a><span>03-30</span></li>
                <li><a href="">标题内容 | 主要内容主要内容主要内容</a><span>03-30</span></li>
                <li><a href="">标题内容 | 主要内容主要内容主要内容</a><span>03-30</span></li>
                <li><a href="">标题内容 | 主要内容主要内容主要内容</a><span>03-30</span></li>
                <li><a href="">标题内容 | 主要内容主要内容主要内容</a><span>03-30</span></li>
                <li><a href="">标题内容 | 主要内容主要内容主要内容</a><span>03-30</span></li>
                <li><a href="">标题内容 | 主要内容主要内容主要内容</a><span>03-30</span></li>
            </ul>
        </div>

        <div>
            <ul>
                <li><a href="">标题内容2 | 主要内容主要内容主要内容</a><span>03-30</span></li>
                <li><a href="">标题内容 | 主要内容主要内容主要内容</a><span>03-30</span></li>
                <li><a href="">标题内容 | 主要内容主要内容主要内容</a><span>03-30</span></li>
                <li><a href="">标题内容 | 主要内容主要内容主要内容</a><span>03-30</span></li>
                <li><a href="">标题内容 | 主要内容主要内容主要内容</a><span>03-30</span></li>
                <li><a href="">标题内容 | 主要内容主要内容主要内容</a><span>03-30</span></li>
                <li><a href="">标题内容 | 主要内容主要内容主要内容</a><span>03-30</span></li>
                <li><a href="">标题内容 | 主要内容主要内容主要内容</a><span>03-30</span></li>
                <li><a href="">标题内容 | 主要内容主要内容主要内容</a><span>03-30</span></li>
                <li><a href="">标题内容 | 主要内容主要内容主要内容</a><span>03-30</span></li>
                <li><a href="">标题内容 | 主要内容主要内容主要内容</a><span>03-30</span></li>
                <li><a href="">标题内容 | 主要内容主要内容主要内容</a><span>03-30</span></li>
                <li><a href="">标题内容 | 主要内容主要内容主要内容</a><span>03-30</span></li>
                <li><a href="">标题内容 | 主要内容主要内容主要内容</a><span>03-30</span></li>
                <li><a href="">标题内容 | 主要内容主要内容主要内容</a><span>03-30</span></li>
                <li><a href="">标题内容 | 主要内容主要内容主要内容</a><span>03-30</span></li>
                <li><a href="">标题内容 | 主要内容主要内容主要内容</a><span>03-30</span></li>
                <li><a href="">标题内容 | 主要内容主要内容主要内容</a><span>03-30</span></li>   
            </ul>
        </div>

        <div>
            <ul>
               <li><a href="">标题内容3 | 主要内容主要内容主要内容</a><span>03-30</span></li>
                <li><a href="">标题内容 | 主要内容主要内容主要内容</a><span>03-30</span></li>
                <li><a href="">标题内容 | 主要内容主要内容主要内容</a><span>03-30</span></li>
                <li><a href="">标题内容 | 主要内容主要内容主要内容</a><span>03-30</span></li>
                <li><a href="">标题内容 | 主要内容主要内容主要内容</a><span>03-30</span></li>
                <li><a href="">标题内容 | 主要内容主要内容主要内容</a><span>03-30</span></li>
                <li><a href="">标题内容 | 主要内容主要内容主要内容</a><span>03-30</span></li>
                <li><a href="">标题内容 | 主要内容主要内容主要内容</a><span>03-30</span></li>
                <li><a href="">标题内容 | 主要内容主要内容主要内容</a><span>03-30</span></li>
                <li><a href="">标题内容 | 主要内容主要内容主要内容</a><span>03-30</span></li>
                <li><a href="">标题内容 | 主要内容主要内容主要内容</a><span>03-30</span></li>
                <li><a href="">标题内容 | 主要内容主要内容主要内容</a><span>03-30</span></li>
                <li><a href="">标题内容 | 主要内容主要内容主要内容</a><span>03-30</span></li>
                <li><a href="">标题内容 | 主要内容主要内容主要内容</a><span>03-30</span></li>
                <li><a href="">标题内容 | 主要内容主要内容主要内容</a><span>03-30</span></li>
                <li><a href="">标题内容 | 主要内容主要内容主要内容</a><span>03-30</span></li>
                <li><a href="">标题内容 | 主要内容主要内容主要内容</a><span>03-30</span></li>
                <li><a href="">标题内容 | 主要内容主要内容主要内容</a><span>03-30</span></li>
            </ul>
        </div>
        <div>
            <ul>
                <li><a href="">标题内容4 | 主要内容主要内容主要内容</a><span>03-30</span></li>
                <li><a href="">标题内容 | 主要内容主要内容主要内容</a><span>03-30</span></li>
                <li><a href="">标题内容 | 主要内容主要内容主要内容</a><span>03-30</span></li>
                <li><a href="">标题内容 | 主要内容主要内容主要内容</a><span>03-30</span></li>
                <li><a href="">标题内容 | 主要内容主要内容主要内容</a><span>03-30</span></li>
                <li><a href="">标题内容 | 主要内容主要内容主要内容</a><span>03-30</span></li>
                <li><a href="">标题内容 | 主要内容主要内容主要内容</a><span>03-30</span></li>
                <li><a href="">标题内容 | 主要内容主要内容主要内容</a><span>03-30</span></li>
                <li><a href="">标题内容 | 主要内容主要内容主要内容</a><span>03-30</span></li>
                <li><a href="">标题内容 | 主要内容主要内容主要内容</a><span>03-30</span></li>
                <li><a href="">标题内容 | 主要内容主要内容主要内容</a><span>03-30</span></li>
                <li><a href="">标题内容 | 主要内容主要内容主要内容</a><span>03-30</span></li>
                <li><a href="">标题内容 | 主要内容主要内容主要内容</a><span>03-30</span></li>
                <li><a href="">标题内容 | 主要内容主要内容主要内容</a><span>03-30</span></li>
                <li><a href="">标题内容 | 主要内容主要内容主要内容</a><span>03-30</span></li>
                <li><a href="">标题内容 | 主要内容主要内容主要内容</a><span>03-30</span></li>
                <li><a href="">标题内容 | 主要内容主要内容主要内容</a><span>03-30</span></li>
                <li><a href="">标题内容 | 主要内容主要内容主要内容</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 = 'active'
                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">
		div:nth-child(1) {
			width: 700px;
			height: 500px;
			background-color: white;
			margin: 30px auto;
			color: #333;
			box-shadow: 2px 2px 2px #808080
		}
		
		h2 {
			font-size: 14px;
			text-align: center;
			margin-bottom: -10px;
		}
		div:nth-child(2) {
			width: 600px;
			height: 400px;
			border: 1px double lightblue;
			background-color: #white;
			margin: 20px auto;
		}
		
		ul {
			list-style: none;
			line-height: 2em;
			overflow: hidden;
			padding: 15px;
		}

		table {
			width: 600px;
			height:50px;
			margin: -10px auto;
		}

		textarea{
			height: 40px;
			border: 1px solid lightblue;
			resize: none;
		}
		button {
			width: 60px;
			height: 40px;
			background-color: white;
			color: black;
			border: 1px solid lightblue;
		}
		button:hover {
			cursor: pointer;
			background-color:lightblue;
			color:white;
		}
	</style>
</head>
<body>
	<div>
		<h2>在线客服</h2>
		<div contenteditable="true">
			<ul>
				<li></li>
			</ul>
		</div>
		<table>
			<tr>
				<td align="left"><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 () {
			// alert(text.value)
			//获取用户提交的内容
			if (text.value.length == 0) {
				alert('客官:是不是忘记输入内容了~~')
				return false
			}
			var userComment = text.value

			//立即清空用户信息区
			text.value = ''

			//创建一个新节点li
			var li = document.createElement('li')
			
			li.innerHTML = userComment

			//将新节点插入到对话列表中
			list.appendChild(li)
			sum += 1
		
				setTimeout(function(){
				var info = ['请问有什么可以帮您？','这个我不清楚','你找错人了']
				var temp = info[Math.floor(Math.random()*3)]
				//取1-5之间的一个整数:Math.floor(Math.random()*6 + 1)
				var reply = document.createElement('li')
				reply.innerHTML = '<span style="color:red">'+temp+'</span>'
				// reply.style.float = 'right'

				list.appendChild(reply)
				sum += 1

			},2000)
			
			
			if (sum > 10) {
				list.innerHTML = ''
				sum = 0
			}

		}
	</script>
</body>
</html>

运行实例 »

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

总结：

通常，通过 JavaScript，您需要操作 HTML 元素。

　　1、通过 id 找到 HTML 元素

　　2、通过标签名找到 HTML 元素

　　3、通过类名找到 HTML 元素

提示：通过类名查找 HTML 元素在 IE 5,6,7,8 中无效。

①、改变 HTML 元素的内容 (innerHTML)

②、改变 HTML 属性

③、改变 HTML 样式

④、添加或删除 HTML 元素

手抄代码：

微信图片_20180402195901.jpg

上一条：英雄联盟图册，简便计算机3月29日下一条：0330JavaScript实战2（实战1：选项卡、.实战: 仿机器人聊天窗口） 18：30
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多