首页 > 代码库 > JavaScript实现联想校招员工信息展示

JavaScript实现联想校招员工信息展示

2024-07-25 06:02:39   217人阅读

原文摘自我的前端博客，欢迎大家来访问

http://www.hacke2.cn

起因

今天和豪哥聊天，才知道他是我老乡，而且特别近。。真的感觉他是我的贵人，这是他从 联想校招扣出来的，我们就用JavaScript来实现吧

home联想校招员工信息展示home点击弹出详细信息

过程

给的有HTML还有CSS3，我打算先用前端模板技术讲信息都出来，之前数据是写死在HTML

数据封装在data.js里

var data = [];data.push({	‘name‘ : ‘Dillon‘,	‘enname‘ : ‘Dillon‘,	‘desc‘ : ‘来自哈佛的战略伙伴经理‘,	‘pic‘ : ‘images/n8_10.png‘,	‘bigpic‘ : ‘images/j2.jpg‘});data.push({	‘name‘ : ‘成俞晟‘,	‘enname‘ : ‘cheng‘,	‘desc‘ : ‘技术宅服务器工程师‘,	‘pic‘ : ‘images/n8_07.png‘,	‘bigpic‘ : ‘images/j3.jpg‘});data.push({	‘name‘ : ‘Said‘,	‘enname‘ : ‘Said‘,	‘desc‘ : ‘开朗健谈的中国通‘,	‘pic‘ : ‘images/n8_18.png‘,	‘bigpic‘ : ‘images/j5.jpg‘});//...

我们讲以前的HTML写成一个模板

展示区模板

<div id="temp_li" style="display: none;">	<li data-id="{i}" class="transform">		<div>			<i></i>			<span>{name}</span>			<p>{desc}</p>		</div>		<img src=http://www.mamicode.com/"{pic}">	</li></div>

弹出层模板

<div id="dialog"  class="box_ovo ">	<span id="close" class="close"><i></i></span>	<span class="prev"><i></i></span>	<span class="next"><i></i></span>	<div id="div_temp1" data-id="{i}" >		<img class="oimg1" src=http://www.mamicode.com/"{bigpic}">		<div class="ovotxt">			<div class="ovohead">				<h1>{name}</h1>				<i>{enname}</i>				<em>{desc}</em>				<span>ECS</span>			</div>			<p>2013年加入联想，联想游戏中心最霸气的女商务，性格大大咧咧，柔弱的外表下有一颗强大的心。自诩内可安邦定天下，外可御敌千里外。</p>			<p>联想游戏中心作为北研最靓丽的风景线，不仅有着最潮、最流行的游戏可以玩，有各种精美的游戏周边随便拿，最关键的是有这样娇(ba)媚(qi)可(shi)人(zu)的女汉子陪聊，陪工作，陪吃饭。总之一句话，联想游戏中心，你值得拥有。</p>		</div>	</div></div>

然后用一下代码弄到HTML里面

//获取LI模板HTMLvar tempLi = document.getElementById(‘temp_li‘).innerHTML;//HTML + 数据最后放到这个数组里var liArr = [];for (var i = 0; i < data.length; i++) {	//替换模板里{}表达式	var itemLi = tempLi.replace(/\{i\}/, i)					.replace(/\{name\}/,data[i].name)					.replace(/\{desc\}/,data[i].desc)					.replace(/\{pic\}/,data[i].pic);	liArr.push(itemLi);} //加入到ul里ul.innerHTML = liArr.join(‘‘);//获取详细信息模板var tempDialog = dialog.innerHTML;//打开弹出层function openDialog(dataIndex) {	dialog.innerHTML = tempDialog.replace(/\{i\}/,dataIndex)						.replace(/\{name\}/,data[dataIndex].name)						.replace(/\{enname\}/,data[dataIndex].enname)						.replace(/\{desc\}/,data[dataIndex].desc)						.replace(/\{bigpic\}/,data[dataIndex].bigpic);	bg.className += ‘ current‘;    dialog.className += ‘ current‘;}

因为HTML是动态生成的，直接不能加绑定事件，所以使用事件委托

//给每一个li加事件ul.onclick = function(event) {	var e = event || window.event;	var target = e.target || e.srcElement;	target = getLiByChild(target);	if(target) {		var curIndex = target.getAttribute(‘data-id‘);    	openDialog(curIndex);	}}	//给弹出层加事件dialog.onclick = function(){	var e = event || window.event;	var target = e.target || e.srcElement;	var curIndex = +dialog.lastElementChild.getAttribute(‘data-id‘); 	//点击关闭	if(target.nodeName == ‘I‘ && target.parentNode.className == ‘close‘) {		closeDialog();	}	//点击上一个	if(target.nodeName == ‘I‘ && target.parentNode.className == ‘prev‘) {		var preIndex= curIndex-1;		if(preIndex > -1) {			closeDialog(function() {				openDialog(preIndex);			});		}else {//否则循环到最后一个			closeDialog(function() {				openDialog(data.length-1);			});		}			}		//点击下一个	if(target.nodeName == ‘I‘ && target.parentNode.className == ‘next‘) {		var nextIndex= curIndex+1;		if(nextIndex < data.length) {			closeDialog(function() {				openDialog(nextIndex);			});		}else {//否则循环到最后一个			closeDialog(function() {				openDialog(0);			});		}	}    }

其中，弹出层里有三个动作；

1.关闭弹窗 2.前一个 2.后一个

我们在里面做处理，如果是前一个为第一个则跳到最后一个，如果为最后一个则跳到前一个

因为我们点击的时候有可能点到SPAN，有可能点到DIV(原因看展示区模板)，所以要有个函数来 找到顶层的LI,因为关闭有一个动画效果，我看了CSS是0.3s，所以我们加一个定时器做一个回调

//找到最顶层LIfunction getLiByChild(element) {	var li = element;	while(li.nodeName != ‘LI‘) {		li = li.parentNode;	}	return li;}//关闭Dialogfunction closeDialog(func) {	bg.className = ‘box_bg1‘;    dialog.className = ‘box_ovo‘;    setTimeout(function(){    	if(dialog.className == ‘box_ovo‘) {    		func && func();    	}    },300);}

获取代码

代码就不贴在博客上了，很简单，没什么可看的，大家可以去我的github上检出

JavaScript实现联想校招员工信息展示


联系
我们