search

博客列表 >javascript实战2+2018年3月31日15时39分

javascript实战2+2018年3月31日15时39分

KongLi的博客
KongLi的博客原创
2018年03月31日 15:40:06764浏览

原生JavaScript实例

  1. js 选项卡实例

     首选使用 document.getElementByClassName('tab')[0] 得到当前总区块

     再依次得到下面的 ul li 以及div 子块，获取完毕之后再给选项卡添加 onmouseover 鼠标移动事件

     并且根据临时添加的序号来改变显示某选项卡对应的div

    具体源码：

    

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>选项卡实例</title>
	<style type="text/css">
		h2{
			text-align: center;
		}
		.tab{
			width: 400px;
			height: 300px;
			background-color: white;
			border:1px solid #ccc;
			margin: 20px auto;
			color: #363636;
		}
		.tab > ul{
			margin: 0;
			padding: 0;
			background: #f8f8f8;
			overflow: hidden;
		}
		.tab > ul li{
			list-style-type: none;
			width: 70px;
			height: 30px;
			float: left;
			border-right: 1px solid #ccc;
			border-bottom: 1px solid #ccc;
			line-height: 30px;
			text-align: center;
		}
		.tab ul + span{
			float: right;
			margin-right: 8px;
			line-height: 30px;
			margin-top: -30px;
			font-size: 14px;
		}
		.tab ul + span a{
			text-decoration: none;
			color: #363636;
		}
		.tab li.preferred{
			font-weight: bolder;
			border-bottom: none;
			border-top: 2px solid #FF2E12;
		}
		.tab div{
			display: none;
		}
		.tab div ul{
			margin: 0;
			padding:0px;
			list-style-type: none;
		}
		.tab div ul li{
			margin-left: 5px;
			line-height: 1.5em;
		}
		.tab div ul li a{
			text-decoration: none;
		}
		.tab div ul li a:hover{
			font-weight: bolder;
		}
		.tab div ul li span{
			float: right;
			margin-right: 10px;
			color: red;
		}
	</style>
	<script type="text/javascript">
		
	</script>
</head>
<body>
	<h2>选项卡实例</h2>
	<div class="tab">
		<ul>
			<li class="preferred">最新文章</li>
			<li>今日话题</li>
			<li>社会新闻</li>
			<li>七天热门</li>
		</ul>
		<span><a href="">更多下载>></a></span>

		<!-- 选项卡中对应的div -->
		<div style="display: block;">
			<ul>
				<li><a href="">new | 习近平主持中共中央政治局会议</a><span>2018-03-30</span></li>
				<li><a href="">new | 习近平主持中共中央政治局会议</a><span>2018-03-30</span></li>
				<li><a href="">new | 习近平主持中共中央政治局会议</a><span>2018-03-30</span></li>
				<li><a href="">new | 习近平主持中共中央政治局会议</a><span>2018-03-30</span></li>
				<li><a href="">new | 习近平主持中共中央政治局会议</a><span>2018-03-30</span></li>
				<li><a href="">new | 习近平主持中共中央政治局会议</a><span>2018-03-30</span></li>
				<li><a href="">new | 习近平主持中共中央政治局会议</a><span>2018-03-30</span></li>
				<li><a href="">new | 习近平主持中共中央政治局会议</a><span>2018-03-30</span></li>
				<li><a href="">new | 习近平主持中共中央政治局会议</a><span>2018-03-30</span></li>
				<li><a href="">new | 习近平主持中共中央政治局会议</a><span>2018-03-30</span></li>
				<li><a href="">new | 习近平主持中共中央政治局会议</a><span>2018-03-30</span></li>
			</ul>
		</div>

		<div>
			<ul>
				<li><a href="">最火 | 因“玩具枪”坐牢的故事要结束了</a><span>2018-03-30</span></li>
				<li><a href="">最火 | 因“玩具枪”坐牢的故事要结束了</a><span>2018-03-30</span></li>
				<li><a href="">最火 | 因“玩具枪”坐牢的故事要结束了</a><span>2018-03-30</span></li>
				<li><a href="">最火 | 因“玩具枪”坐牢的故事要结束了</a><span>2018-03-30</span></li>
				<li><a href="">最火 | 因“玩具枪”坐牢的故事要结束了</a><span>2018-03-30</span></li>
				<li><a href="">最火 | 因“玩具枪”坐牢的故事要结束了</a><span>2018-03-30</span></li>
				<li><a href="">最火 | 因“玩具枪”坐牢的故事要结束了</a><span>2018-03-30</span></li>
				<li><a href="">最火 | 因“玩具枪”坐牢的故事要结束了</a><span>2018-03-30</span></li>
				<li><a href="">最火 | 因“玩具枪”坐牢的故事要结束了</a><span>2018-03-30</span></li>
				<li><a href="">最火 | 因“玩具枪”坐牢的故事要结束了</a><span>2018-03-30</span></li>
				<li><a href="">最火 | 因“玩具枪”坐牢的故事要结束了</a><span>2018-03-30</span></li>
			</ul>
		</div>

		<div>
			<ul>
				<li><a href="">社会 | 实拍特战队员魔鬼极限训练</a><span>2018-03-30</span></li>
				<li><a href="">社会 | 实拍特战队员魔鬼极限训练</a><span>2018-03-30</span></li>
				<li><a href="">社会 | 实拍特战队员魔鬼极限训练</a><span>2018-03-30</span></li>
				<li><a href="">社会 | 实拍特战队员魔鬼极限训练</a><span>2018-03-30</span></li>
				<li><a href="">社会 | 实拍特战队员魔鬼极限训练</a><span>2018-03-30</span></li>
				<li><a href="">社会 | 实拍特战队员魔鬼极限训练</a><span>2018-03-30</span></li>
				<li><a href="">社会 | 实拍特战队员魔鬼极限训练</a><span>2018-03-30</span></li>
				<li><a href="">社会 | 实拍特战队员魔鬼极限训练</a><span>2018-03-30</span></li>
				<li><a href="">社会 | 实拍特战队员魔鬼极限训练</a><span>2018-03-30</span></li>
				<li><a href="">社会 | 实拍特战队员魔鬼极限训练</a><span>2018-03-30</span></li>
				<li><a href="">社会 | 实拍特战队员魔鬼极限训练</a><span>2018-03-30</span></li>
			</ul>
		</div>

		<div>
			<ul>
				<li><a href="">7Day | 坚决不做游戏的马云食言了</a><span>2018-03-30</span></li>
				<li><a href="">7Day | 坚决不做游戏的马云食言了</a><span>2018-03-30</span></li>
				<li><a href="">7Day | 坚决不做游戏的马云食言了</a><span>2018-03-30</span></li>
				<li><a href="">7Day | 坚决不做游戏的马云食言了</a><span>2018-03-30</span></li>
				<li><a href="">7Day | 坚决不做游戏的马云食言了</a><span>2018-03-30</span></li>
				<li><a href="">7Day | 坚决不做游戏的马云食言了</a><span>2018-03-30</span></li>
				<li><a href="">7Day | 坚决不做游戏的马云食言了</a><span>2018-03-30</span></li>
				<li><a href="">7Day | 坚决不做游戏的马云食言了</a><span>2018-03-30</span></li>
				<li><a href="">7Day | 坚决不做游戏的马云食言了</a><span>2018-03-30</span></li>
				<li><a href="">7Day | 坚决不做游戏的马云食言了</a><span>2018-03-30</span></li>
				<li><a href="">7Day | 坚决不做游戏的马云食言了</a><span>2018-03-30</span></li>
			</ul>
		</div>
	</div>
	<script type="text/javascript">
		// 1.先获取到选项卡对应的ul列表头信息
		var tab = document.getElementsByClassName('tab')[0] //得到总的区块
		var ul = tab.getElementsByTagName('ul')[0] //得到第一个 ul
		var li_list = ul.getElementsByTagName('li')  //得到所有 li
		var div_list = tab.getElementsByTagName('div') //得所所有的子块div

		// 循环给选择卡添加事件
		for (var i = 0; i < li_list.length; i++) {

			// 1.首先给每个选项卡添加一个临时的序号
			li_list[i].index = i

			// 开始添加事件
			li_list[i].onmouseover = function(){
				//循环清空非当前样式的标签样式 跟 div 显示
				// 因为不清空会把之前的记录累加在一起
				for (var i = 0; i < li_list.length; i++) {
					li_list[i].className=''
					div_list[i].style.display='none'
				}

				// 鼠标移动到某项列表时将列表对应的class设置为 preferred(首选)
				this.className='preferred'
				// 通过临时序号的索引来更新显示对应 ul 标签的 div 
				div_list[this.index].style.display = 'block'
			}	
		}
	</script>
</body>
</html>

效果图：

选项卡.png

运行实例 »

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


2.js 自动应答机器人

用户块：

同上例一样，先获取到ul、text、button以及div块 再根据按钮添加事件，

并使用动态函数 document.createElement('li') 动态创建 li 标签 然后使用 innerHTML 进行拼接对应

的样式图片等，最后通过 先前获取到的 ul 利用 ul 下面的 appendChild 将 li 添加到 ul 的子项中显示


机器人块：

机器回复 使用 setTimeout(func,delay) 函数进行廷时控制回复信息，并从消息数组随机获取内容进行

回复，使用 Math.random() 产生随机数，从数组中随机抽取内容，由于Math.random()产生的随机数

是带小数据点的，所以要用 Math.floor() 函数取数字的最大整数，对数字进行下舍入


源码：

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>自动应答机器人</title>
	<style type="text/css">
		.box{
			width: 500px;
			height: 500px;
			background-color: #1ADCEF;
			margin: 20px auto;
		}
		h2{
			text-align: center;
		}
		.box .box-msg{
			width: 90%;
			height: 350px;
			background-color: #999797;
			margin: auto;
			margin-bottom: 10px;
			color: #fff;
			font-weight: bolder;
			overflow:auto;
		}
		.box .box-msg ul li{
			list-style-type: none;
		}
		.box .inText{
			height: 66px;
			text-align: center;
			line-height: 66px;
		}
	</style>
</head>
<body>
	<div class="box">
		<h2>自助问答系统</h2>
		<div class="box-msg" contenteditable="true" id="msgview">
			<ul>
				<li></li>
			</ul>
		</div>
		<div class="inText">
			<textarea rows="4" cols="54" name="text" style="resize:none"></textarea>
			<button>发送</button>
		</div>
	</div>
	<script type="text/javascript">
		// 获取页面中的消息框、输入框、发送按钮
		var msgbox = document.getElementsByTagName('ul')[0] //得到页面中的ul
		var text = document.getElementsByName('text')[0] //得到输入框
		var btn = document.getElementsByTagName('button')[0] //得到发送按钮
		var div = document.getElementById('msgview') //得到当前显示消息div 用来设置滚动

		// 给发送按钮添加事件
		btn.onclick=function(){
			// 先判断用户是否输入内容
			if(text.value!=''){
				var useMsg = text.value
				text.value='' //清空输入框内容

				// 动态创建一个 li 
				var li = document.createElement('li')
				li.style='text-align: right;margin-right:10px;'
				var userImg = '<img src="images/1.jpg" style="width:30px;border-radius: 50%">'
				li.innerHTML=useMsg+userImg


                // 将创建好的 li 添加到 ul 的子项中
				msgbox.appendChild(li)
				div.scrollTop = div.scrollHeight

				// 机器人开始回复
				setTimeout(function(){
					// 定义文本数组
					var replyArray=['您好,请问还有其它要问的吗?','欢迎您,我是在线客服','001号客服为您服务','客服不在线,请留言!']
					// 随机取数据中的值
					//因Math.random 产生的数值是1.00000 所以采用四舍五入 
					//Math.floor() 返回小于等于数字参数的最大整数，对数字进行下舍入
					var temp=replyArray[Math.floor(Math.random()*3)]   
					var reply=document.createElement('li')
					reply.style='font-size: 8px;color: blue;'
					var boximg = '<img src="images/2.jpg" style="width:30px;border-radius: 50%">'
					reply.innerHTML=boximg+temp
					msgbox.appendChild(reply)
					div.scrollTop = div.scrollHeight
				},2000)
				// setTimeout(func, delay) 传一个匿名函数跟廷时
			}else{
				alert('no input msg!')
			}
		}
	</script>
</body>
</html>

运行效果：

效果.png

运行实例 »

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


手写套餐

1.jpg

2.jpg

上一条：js实战：机器人聊天的制作 2018年03月31日 12点15分下一条：Excel表格数据转化到数据库里面
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多