javascript实现前程无忧的选择城市

最新推荐文章于 2023-10-19 11:34:51 发布
最新推荐文章于 2023-10-19 11:34:51 发布
阅读量3k 收藏 3
点赞数
文章标签： javascript function layer border div null
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mengxj85/article/details/4193117
版权

前程无忧（51job）主页上的选择工作地点，效果不错，还有弹出层的效果也很好，于是花两天整理出该功能的所有代码

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="javascriptdiv.aspx.cs" Inherits="mytest_javascriptdiv" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>前程无忧选择地址功能</title>
    <link href="../JS/style20080905[1].css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var objX = 0;
var objY = 0;
var bodyScrollWidth=0;
var bodyScrollHeight=0;
var layer=new Array();
var dragObj=new Array();
var dragObjId=new Array();
//启动JS调试
debugger;

//buildGlobalDiv()
function buildGlobalDiv()
{
 var globalDiv=document.createElement('div');
 globalDiv.id='globalDiv';
 globalDiv.style.display='none';
 globalDiv.style.zIndex='98';
 globalDiv = set_div_style(globalDiv,'globalDiv','0px','0px',bodyScrollWidth+'px',bodyScrollHeight+'px',"absolute"," #333333 0px solid","default","darkgray");
    globalDiv.style.filter="alpha(opacity=30)"; 
 document.body.appendChild(globalDiv);
}

function set_div_style(obj,id,top,left,width,height,position,border,cursor,background)
{
    var obj = obj;
    obj.id = id?id:null;
    obj.style.top = top?top:'0px';
    obj.style.left = left?left:'0px';
    obj.style.width = width?width:'0px';
    obj.style.height = height?height:'0px';
    obj.style.position = position?position:"static";
    obj.style.border = border?border:"1px #000 solid";
    obj.style.cursor = cursor?cursor:"default";
    obj.style.background = background?background:"";
    return obj
}

//buildDiv('popupArea')
function buildDiv()
{
 var argArr = buildDiv.arguments;
 //定义层需要的初始字串变量
 var mainTable = '';

 var i=0;
    mainTable = initJobArea();
 dragObjId[i]=argArr[i];
 layer[i] = document.createElement("div");
 layer[i].style.visibility='hidden';
 layer[i].style.zIndex='999';
 layer[i].innerHTML+=mainTable;
 document.body.appendChild(layer[i]);

 var styleWidth=layer[i].firstChild.width+'px';
 var styleHeight=layer[i].firstChild.firstChild.clientHeight+'px';
 var layerId = argArr[i];

 layer[i] = set_div_style(layer[i],layerId,'0px','0px',styleWidth,'0px',"absolute","0px solid #c0d4db","default","#fff");
 dragObj[i]=layer[i].firstChild.firstChild.firstChild.firstChild;
 dragObj[i].style.cursor='move';

 dragObj[i].onmousedown = function(event){drag_mouse_down(event,this.parentNode.parentNode.parentNode.parentNode)};

 layer[i].onselectstart=function(){return false};
 
 layer[i].firstChild.οnresize=function(){checkAndResetStyleTop(this.parentNode)};
 
}

function drag_mouse_down(event,obj)
{
 var obj_left = obj.style.left;
 var obj_top = obj.style.top;
 var obj_left = obj_left.replace(/p|x/g,"");
 var obj_top = obj_top.replace(/p|x/g,"");
 if ( event == null ) {//IE必须
  event=window.event;
 }
 var clientX = String(event.clientX).replace(/p|x/g,"");
 var clientY = String(event.clientY).replace(/p|x/g,"");
 objX = clientX - obj_left;
 objY = clientY - obj_top;
}

function checkAndResetStyleTop (obj)
{
 var clientHeight=obj.firstChild.clientHeight;
 var styleTop=parseInt(obj.style.top.substring(0,obj.style.top.length-2));
 if ( clientHeight+styleTop>bodyScrollHeight )
 {
  obj.style.top=(bodyScrollHeight- clientHeight)+'px';
 }
}

//
function initJobArea()
{ 
 var htmlDiv = '';
 
 htmlDiv +='<table width="500" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">';
 htmlDiv +='<tr>';
 htmlDiv +='<td width="797" height="36" valign="top" background="title_bg.gif"  top="top" left="left" repeat-x;="repeat-x;"">';
 htmlDiv +='<table width="100%" height="28" border="0" cellpadding="0" cellspacing="0">';
 htmlDiv +='<tr>';
 htmlDiv +='<td width="4%" align="center" valign="middle"><img src="01.gif" width="17" height="17" /></td>';
 htmlDiv +='<td width="86%" align="left" valign="middle"  style="color:#fff;">请选择工作地点</td>';
 htmlDiv +='<td width="10%" align="center" valign="middle" style="color:#fff;"><a onClick="javascript:cancel();hiddenLayer(/'popupArea/')" style="color:#FFFFFF;cursor:pointer;">[关闭]</a> </td>';
 htmlDiv +='</tr>';
 htmlDiv +='</table>';
 htmlDiv +='</td>';
 htmlDiv +='</tr>';
 htmlDiv +='<tr>';
 htmlDiv +='<td align="center" valign="top"><table width="100%" border="0" align="center" cellpadding="3" cellspacing="0">';
 htmlDiv +='<tr>';
 htmlDiv +='<td colspan="2" align="left" valign="middle"><a href="#" style="color:#000000;font-weight: bold;" onClick="javascript:sltJobarea(/'不限/',/'/')">不限</a></td>';
 htmlDiv +='</tr>';
 htmlDiv +='<tr>';
 htmlDiv +='<td colspan="2" align="left" valign="middle" bgcolor="#F7F7F7" style="color:#ff7400; font-size: 14px; font-weight: bold;">主要城市:</td>';
 htmlDiv +='</tr>';
 htmlDiv +='<tr>';
 htmlDiv +='<td width="80" align="left" valign="middle" style="color:#000000;font-weight: bold;">华北-东北：</td>';
 htmlDiv +='<td align="left" valign="middle">';
 htmlDiv +='<span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="sltJobarea(/'北京/',/'0100/');">北京</span> ';
 htmlDiv +='<span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="sltJobarea(/'天津/',/'0500/');">天津</span> ';
 htmlDiv +='<span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="sltJobarea(/'大连/',/'2303/');">大连</span> ';
 htmlDiv +='<span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="sltJobarea(/'沈阳/',/'2302/');">沈阳</span> ';
 htmlDiv +='<span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="sltJobarea(/'长春/',/'2402/');">长春</span> ';
 htmlDiv +='<span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="sltJobarea(/'哈尔滨/',/'2202/');">哈尔滨</span></td>';
 htmlDiv +='</tr>';
 htmlDiv +='<tr>';
 htmlDiv +='<td align="left" valign="middle" style="color:#000000;font-weight: bold;">华东地区：</td>';
 htmlDiv +='<td align="left" valign="middle">';
 htmlDiv +='<span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="sltJobarea(/'上海/',/'0200/');">上海</span> ';
 htmlDiv +='<span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="sltJobarea(/'南京/',/'0702/');">南京</span> ';
 htmlDiv +='<span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="sltJobarea(/'苏州/',/'0703/');">苏州</span> ';
 htmlDiv +='<span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="sltJobarea(/'杭州/',/'0802/');">杭州</span> ';
 htmlDiv +='<span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="sltJobarea(/'宁波/',/'0803/');">宁波</span> ';
 htmlDiv +='<span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="sltJobarea(/'合肥/',/'1502/');">合肥</span> ';
 htmlDiv +='<span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="sltJobarea(/'福州/',/'1102/');">福州</span> ';
 htmlDiv +='<span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="sltJobarea(/'济南/',/'1202/');">济南</span> ';
 htmlDiv +='<span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="sltJobarea(/'青岛/',/'1203/');">青岛</span></td>';
 htmlDiv +='</tr>';
 htmlDiv +='<tr>';
 htmlDiv +='<td align="left" valign="middle" style="color:#000000;font-weight: bold;">华南-华中：</td>';
 htmlDiv +='<td align="left" valign="middle">';
 htmlDiv +='<span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="sltJobarea(/'广州/',/'0302/');">广州</span> ';
 htmlDiv +='<span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="sltJobarea(/'深圳/',/'0400/');">深圳</span> ';
 htmlDiv +='<span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="sltJobarea(/'东莞/',/'0308/');">东莞</span> ';
 htmlDiv +='<span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="sltJobarea(/'武汉/',/'1802/');">武汉</span> ';
 htmlDiv +='<span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="sltJobarea(/'长沙/',/'1902/');">长沙</span> ';
 htmlDiv +='<span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="sltJobarea(/'郑州/',/'1702/');">郑州</span></td>';
 htmlDiv +='</tr>';
 htmlDiv +='<tr>';
 htmlDiv +='<td align="left" valign="middle" style="color:#000000;font-weight: bold;">西北-西南：</td>';
 htmlDiv +='<td align="left" valign="middle">';
 htmlDiv +='<span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="sltJobarea(/'西安/',/'2002/');">西安</span> ';
 htmlDiv +='<span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="sltJobarea(/'成都/',/'0902/');">成都</span> ';
 htmlDiv +='<span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="sltJobarea(/'重庆/',/'0600/');">重庆</span> ';
 htmlDiv +='<span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="sltJobarea(/'昆明/',/'2502/');">昆明</span></td>';
 htmlDiv +='</tr>';
 htmlDiv +='<tr>';
 htmlDiv +='<td height="5" colspan="2" align="left" valign="middle" background="bgclear_bot.gif"></td>';
 htmlDiv +='</tr>';
 htmlDiv +='</table>';
 
 htmlDiv +='<div id="subareadiv">';
 
 htmlDiv +=getAllArea();
 
 htmlDiv +='</div>';
 
 htmlDiv +='</td>';
 htmlDiv +='</tr>';
 htmlDiv +='<tr>';
 htmlDiv +='<td height="4" align="center" valign="top" bgcolor="#FF7400"></td>';
 htmlDiv +='</tr>';
 htmlDiv +='</table>';
 
 return htmlDiv;
}

function getAllArea()
{
 htmlDiv = '';
 
 htmlDiv +='<table width="100%" border="0" cellpadding="3" cellspacing="0">';
 htmlDiv +='<tr>';
 htmlDiv +='<td colspan="7" align="left" valign="middle" bgcolor="#F7F7F7" style="color:#ff7400; font-size: 14px; font-weight: bold;">所有省份:</td>';
 htmlDiv +='</tr>';
 
 htmlDiv +='<tr>';
 htmlDiv +='<td width="80" align="left" valign="middle" bgcolor="#FFFFFF" style="color:#000000;font-weight: bold;">华北-东北：</td>';
 htmlDiv +='<td align="left" valign="middle" bgcolor="#FFFFFF"><span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="javascript:showSubArea( /'1600/' , /'河北省/' )">河北省</span></td>';
 htmlDiv +='<td align="left" valign="middle" bgcolor="#FFFFFF"><span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="javascript:showSubArea( /'2100/' , /'山西省/' )">山西省</span></td>';
 htmlDiv +='<td align="left" valign="middle" bgcolor="#FFFFFF"><span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="javascript:showSubArea( /'2800/' , /'内蒙古/' )">内蒙古</span></td>';
 htmlDiv +='<td align="left" valign="middle" bgcolor="#FFFFFF"><span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="javascript:showSubArea( /'2300/' , /'辽宁省/' )">辽宁省</span></td>';
 htmlDiv +='<td align="left" valign="middle" bgcolor="#FFFFFF"><span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="javascript:showSubArea( /'2400/' , /'吉林省/' )">吉林省</span></td>';
 htmlDiv +='<td align="left" valign="middle" bgcolor="#FFFFFF"><span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="javascript:showSubArea( /'2200/' , /'黑龙江省/' )">黑龙江省</span></td>';
 htmlDiv +='</tr>';
 htmlDiv +='<tr>';
 htmlDiv +='<td align="left" valign="middle" bgcolor="#FFFFFF" style="color:#000000;font-weight: bold;">华东地区：</td>';
 htmlDiv +='<td align="left" valign="middle" bgcolor="#FFFFFF"><span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="javascript:showSubArea( /'0700/' , /'江苏省/' )">江苏省</span></td>';
 htmlDiv +='<td align="left" valign="middle" bgcolor="#FFFFFF"><span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="javascript:showSubArea( /'0800/' , /'浙江省/' )">浙江省</span></td>';
 htmlDiv +='<td align="left" valign="middle" bgcolor="#FFFFFF"><span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="javascript:showSubArea( /'1500/' , /'安徽省/' )">安徽省</span></td>';
 htmlDiv +='<td align="left" valign="middle" bgcolor="#FFFFFF"><span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="javascript:showSubArea( /'1100/' , /'福建省/' )">福建省</span></td>';
 htmlDiv +='<td align="left" valign="middle" bgcolor="#FFFFFF"><span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="javascript:showSubArea( /'1300/' , /'江西省/' )">江西省</span></td>';
 htmlDiv +='<td align="left" valign="middle" bgcolor="#FFFFFF"><span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="javascript:showSubArea( /'1200/' , /'山东省/' )">山东省</span></td>';
 htmlDiv +='</tr>';
 htmlDiv +='<tr>';
 htmlDiv +='<td align="left" valign="middle" bgcolor="#FFFFFF" style="color:#000000;font-weight: bold;">华南-华中：</td>';
 htmlDiv +='<td align="left" valign="middle" bgcolor="#FFFFFF"><span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="javascript:showSubArea( /'0300/' , /'广东省/' )">广东省</span></td>';
 htmlDiv +='<td align="left" valign="middle" bgcolor="#FFFFFF"><span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="javascript:showSubArea( /'1400/' , /'广西/' )">广西</span></td>';
 htmlDiv +='<td align="left" valign="middle" bgcolor="#FFFFFF"><span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="javascript:showSubArea( /'1000/' , /'海南省/' )">海南省</span></td>';
 htmlDiv +='<td align="left" valign="middle" bgcolor="#FFFFFF"><span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="javascript:showSubArea( /'1700/' , /'河南省/' )">河南省</span></td>';
 htmlDiv +='<td align="left" valign="middle" bgcolor="#FFFFFF"><span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="javascript:showSubArea( /'1800/' , /'湖北省/' )">湖北省</span></td>';
 htmlDiv +='<td align="left" valign="middle" bgcolor="#FFFFFF"><span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="javascript:showSubArea( /'1900/' , /'湖南省/' )">湖南省</span></td>';
 htmlDiv +='</tr>';
 htmlDiv +='<tr>';
 htmlDiv +='<td align="left" valign="middle" bgcolor="#FFFFFF" style="color:#000000;font-weight: bold;">西北-西南：</td>';
 htmlDiv +='<td align="left" valign="middle" bgcolor="#FFFFFF"><span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="javascript:showSubArea( /'2000/' , /'陕西省/' )">陕西省</span></td>';
 htmlDiv +='<td align="left" valign="middle" bgcolor="#FFFFFF"><span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="javascript:showSubArea( /'2700/' , /'甘肃省/' )">甘肃省</span></td>';
 htmlDiv +='<td align="left" valign="middle" bgcolor="#FFFFFF"><span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="javascript:showSubArea( /'3200/' , /'青海省/' )">青海省</span></td>';
 htmlDiv +='<td align="left" valign="middle" bgcolor="#FFFFFF"><span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="javascript:showSubArea( /'2900/' , /'宁夏/' )">宁夏</span></td>';
 htmlDiv +='<td align="left" valign="middle" bgcolor="#FFFFFF"><span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="javascript:showSubArea( /'3100/' , /'新疆/' )">新疆</span></td>';
 htmlDiv +='<td align="left" valign="middle" bgcolor="#FFFFFF"><span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="javascript:showSubArea( /'0900/' , /'四川省/' )">四川省</span></td>';
 htmlDiv +='</tr>';
 htmlDiv +='<tr>';
 htmlDiv +='<td align="left" valign="middle" bgcolor="#FFFFFF" style="color:#000000;font-weight: bold;">&nbsp;</td>';
 htmlDiv +='<td align="left" valign="middle" bgcolor="#FFFFFF"><span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="javascript:showSubArea( /'2600/' , /'贵州省/' )">贵州省</span></td>';
 htmlDiv +='<td align="left" valign="middle" bgcolor="#FFFFFF"><span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="javascript:showSubArea( /'2500/' , /'云南省/' )">云南省</span></td>';
 htmlDiv +='<td align="left" valign="middle" bgcolor="#FFFFFF"><span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="javascript:showSubArea( /'3000/' , /'西藏/' )">西藏</span></td>';
 htmlDiv +='<td align="left" valign="middle" bgcolor="#FFFFFF">&nbsp;</td>';
 htmlDiv +='<td align="left" valign="middle" bgcolor="#FFFFFF">&nbsp;</td>';
 htmlDiv +='<td align="left" valign="middle" bgcolor="#FFFFFF">&nbsp;</td>';
 htmlDiv +='</tr>';
 htmlDiv +='<tr>';
 htmlDiv +='<td align="left" valign="middle" bgcolor="#FFFFFF" style="color:#000000;font-weight: bold;">其它：</td>';
 htmlDiv +='<td align="left" valign="middle" bgcolor="#FFFFFF"><span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="javascript:showSubArea( /'3300/' , /'香港/' )">香港</span></td>';
 htmlDiv +='<td align="left" valign="middle" bgcolor="#FFFFFF"><span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="javascript:showSubArea( /'3400/' , /'澳门/' )">澳门</span></td>';
 htmlDiv +='<td align="left" valign="middle" bgcolor="#FFFFFF"><span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="javascript:showSubArea( /'3500/' , /'台湾/' )">台湾</span></td>';
 htmlDiv +='<td align="left" valign="middle" bgcolor="#FFFFFF"><span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="javascript:showSubArea( /'3600/' , /'国外/' )">国外</span></td>';
 htmlDiv +='<td align="left" valign="middle" bgcolor="#FFFFFF">&nbsp;</td>';
 htmlDiv +='<td align="left" valign="middle" bgcolor="#FFFFFF">&nbsp;</td>';
 htmlDiv +='</tr>';
 
 htmlDiv +='</table>';
 
 return htmlDiv; 
}

//hide()
//滤镜效果
function hide()
{
 synSizeByBody("globalDiv");
 document.getElementById("globalDiv").style.display = "block";
 hideElementAll();
}

function synSizeByBody()
{
 reCalBodySize();
 var argArr=synSizeByBody.arguments;
 for ( var i=0;i<argArr.length;i++ )
 {
  if ( document.getElementById(argArr[i]) != null )
  {
   document.getElementById(argArr[i]).style.width = (bodyScrollWidth)+'px';
   document.getElementById(argArr[i]).style.height = (bodyScrollHeight)+'px';
  }
 }
}

function reCalBodySize()
{
 bodyScrollWidth=document.documentElement.scrollWidth;
 bodyScrollHeight=document.documentElement.scrollHeight;
}

//隐藏元素
var hiddenObjs = [];
function hideElementAll()
{
 hiddenObjs = [];
 HideElement("SELECT");
 HideElement("OBJECT");
 HideElement("IFRAME");
}
function HideElement(strElementTagName)
{
 try
 {
  for(i=0;i<window.document.all.tags(strElementTagName).length; i++)
  {
   var objTemp = window.document.all.tags(strElementTagName)[i];
   if ( 'visible' == objTemp.style.visibility )
   {
    objTemp.style.visibility = "hidden";
    hiddenObjs.push( objTemp );
   }
  }
 }catch(e)
 {
  alert(e.message);
 }
}

//displayLayer('popupArea')
function displayLayer(layerID)
{
 if ( document.getElementById(layerID) != null)
 {
  var dv = document.getElementById(layerID);
  hiddenLayerOther(layerID);
  if ( dv.style.visibility == "hidden" )
  {
   GetCenterXY_ForLayer(dv);
   dv.style.visibility = "visible";
  }
  document.body.onmousemove = function (event){drag(event,dv)};
  document.body.onmouseup = function(){objX = 0;objY=0};
 }
 return false;
}

function hiddenLayerOther(layerID)
{
 for( var i=0;i<dragObjId.length;i++ )
 {
  if ( dragObjId[i] != layerID && document.getElementById(dragObjId[i]) != null )
  {
   hiddenLayer(dragObjId[i]);
  }
 }
}

function hiddenLayer()
{
 var argArr = hiddenLayer.arguments;
 for(var i=0;i<argArr.length;i++)
 {
  if ( document.getElementById(argArr[i])!=null )
  {
   document.getElementById(argArr[i]).style.visibility = "hidden";
  }
 }
}

//将悬浮层的位置定位在body可见区域中央
function GetCenterXY_ForLayer(objdiv)
{
 objdiv.style.display='block';
 var styleWidth=objdiv.style.width.substring(0,objdiv.style.width.length-2);
 var clientHeight=objdiv.firstChild.clientHeight;
 var objLeft = parseInt(document.documentElement.scrollLeft+(document.documentElement.clientWidth - styleWidth)/2)+'px';
 var relTop=(document.documentElement.clientHeight-clientHeight)/2 > 0 ? (document.documentElement.clientHeight-clientHeight)/2:0;
 var objTop = parseInt(document.documentElement.scrollTop+relTop)+'px';
 objdiv.style.top = objTop;
 objdiv.style.left = objLeft;
 checkAndResetStyleTop(objdiv);
}

function drag(event,obj)
{
 if( objX != 0 && objY != 0 )
 {
  if ( event == null ) {//IE必须
   event=window.event;
  }
  if ( event.button == 1 ||  event.button == 0 )
  {
   var objWidth=obj.firstChild.clientWidth;
   var objHeight=obj.firstChild.clientHeight;
   reCalBodySize();

   var leftPo= event.clientX-objX;
   if ( leftPo < 0 )
   {
    leftPo=0;
   }
   if ( leftPo > bodyScrollWidth-objWidth )
   {
    leftPo=bodyScrollWidth-objWidth;
   }

   var topPo=event.clientY-objY;
   if ( topPo < 0 )
   {
    topPo=0;
   }
   if ( topPo > bodyScrollHeight-objHeight )
   {
    topPo=bodyScrollHeight-objHeight;
   }
   obj.style.left=leftPo+'px';
   obj.style.top=topPo+'px';
  }
 }
}


//JS+HTML中的事件
function cancel()
{
 document.getElementById("globalDiv").style.display = "none";
    showElementAll();
}

function showElementAll()
{
 var len = hiddenObjs.length;
 for ( var i = 0 ; i < len ; i++ )
 {
  hiddenObjs[i].style.visibility = "visible";
 }
}

//接收并保存选择的值
function sltJobarea(show,value)
{
    document.getElementById("form1").jobarea.value = value;
 document.getElementById("form1").btnSltArea.value = show; 
  cancel();
  hiddenLayer("popupArea");
}

function showSubArea(subareaid , subareaname )
{
 htmlDiv = '';
 
 htmlDiv +='<table width="100%" border="0" cellspacing="0">';
 htmlDiv +='<tr>';
 htmlDiv +='<td align="left" valign="middle"  bgcolor="#F7F7F7" style="text-indent:5px;">';
 htmlDiv +='<span style="cursor:pointer;font-weight:bold; font-size: 14px;"';
 htmlDiv +=' onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="sltJobarea(/'' + subareaname + '/',/'' + subareaid + '/');">' + subareaname;
 htmlDiv +='</span>&nbsp;&nbsp;&nbsp;&nbsp;<span style="cursor:pointer; color:#ff7300;" onMouseOver="this.style.color=/'#000000/'"';
 htmlDiv +=' onMouseOut="this.style.color=/'#ff7300/'" onClick="javascript:document.getElementById( /'subareadiv/' ).innerHTML=getAllArea();">[返回所有省份]</span></td>';
 htmlDiv +='</tr>';
 htmlDiv +='<tr><td><table width="100%"><tr>'
 
 subareaids = getAreaIDs( subareaid );
 subareanames = getAreaNames( subareaid );
 num = 0;
 for( var m = 1 ; m < subareaids.length ; m++ )
 {
  num++;
  htmlDiv +='<td align="left" valign="bottom" bgcolor="#FFFFFF"><span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'"';
  htmlDiv +=' onMouseOut="this.style.color=/'/'" onClick="sltJobarea(/'' + subareanames[m] + '/',/'' + subareaids[m] + '/');">' + subareanames[m] + '</span></td>';
  if( num % 7 == 0  )
  {
   htmlDiv +='</tr><tr>';
  } 
 }
 htmlDiv +='</tr></table></td></tr></table>';
 
 document.getElementById( 'subareadiv' ).innerHTML = htmlDiv;
}

function getAreaIDs(idx)
{
 switch(idx)
 {
  case '0100':
   return new Array('0100');
  case '0200':
   return new Array('0200');
  case '0300':
   return new Array('0300','0302','0400','0303','0304','0305','0306','0307','0308','0314','0315','0317','0318','0319','0320','0321','0322','0323','0324','0325');
  case '0400':
   return new Array('0400');
  case '0500':
   return new Array('0500');
  case '0600':
   return new Array('0600');
  case '0700':
   return new Array('0700','0702','0703','0704','0705','0706','0707','0708','0709','0710','0711','0712','0713','0714');
  case '0800':
   return new Array('0800','0802','0803','0804','0805','0806','0807','0808','0809','0810','0811','0812');
  case '0900':
   return new Array('0900','0902','0903','0904','0905','0906','0907','0908','0909','0910');
  case '1000':
   return new Array('1000','1002','1003');
  case '1100':
   return new Array('1100','1102','1103','1104','1105','1106','1107','1108','1109','1110');
  case '1200':
   return new Array('1200','1202','1203','1204','1205','1206','1207','1208','1209','1210','1211','1212','1213');
  case '1300':
   return new Array('1300','1302','1303');
  case '1400':
   return new Array('1400','1402','1403','1404','1405');
  case '1500':
   return new Array('1500','1502','1503','1504','1505','1506','1507','1508','1509','1510','1511','1512','1513','1514','1515');
  case '1600':
   return new Array('1600','1602','1603','1604','1605','1606');
  case '1700':
   return new Array('1700','1702','1703','1704');
  case '1800':
   return new Array('1800','1802','1803','1804','1805','1806','1807','1808','1809','1810');
  case '1900':
   return new Array('1900','1902','1903','1904','1905','1906','1907','1908','1909','1910','1911','1912','1913','1914');
  case '2000':
   return new Array('2000','2002','2003','2004','2005','2006');
  case '2100':
   return new Array('2100','2102','2103','2104','2105');
  case '2200':
   return new Array('2200','2202','2203','2204','2205','2206','2207','2208');
  case '2300':
   return new Array('2300','2302','2303','2304','2305','2306','2307','2308','2309','2310','2311','2312');
  case '2400':
   return new Array('2400','2402','2403','2404','2405');
  case '2500':
   return new Array('2500','2502','2503','2504','2505','2506','2507','2508','2509','2510');
  case '2600':
   return new Array('2600','2602','2603');
  case '2700':
   return new Array('2700','2702','2703');
  case '2800':
   return new Array('2800','2802','2803','2804');
  case '2900':
   return new Array('2900','2902');
  case '3000':
   return new Array('3000','3002','3003');
  case '3100':
   return new Array('3100','3102','3103','3104');
  case '3200':
   return new Array('3200','3202');
  case '3300':
   return new Array('3300');
  case '3400':
   return new Array('3400');
  case '3500':
   return new Array('3500');
  case '3600':
   return new Array('3600');
  default:
   return new Array();
 }
}

function getAreaNames(idx)
{
 switch(idx)
 {
  case '0100':
   return new Array('北京市');
  case '0200':
   return new Array('上海市');
  case '0300':
   return new Array('广东省','广州市','深圳市','惠州市','汕头市','珠海市','佛山市','中山市','东莞市','韶关市','江门市','湛江市','肇庆市','清远市','潮州市','河源市','揭阳市','茂名市','汕尾市','顺德市');
  case '0400':
   return new Array('深圳市');
  case '0500':
   return new Array('天津市');
  case '0600':
   return new Array('重庆市');
  case '0700':
   return new Array('江苏省','南京市','苏州市','无锡市','常州市','昆山市','常熟市','扬州市','南通市','镇江市','徐州市','连云港市','盐城市','张家港市');
  case '0800':
   return new Array('浙江省','杭州市','宁波市','温州市','绍兴市','金华市','嘉兴市','台州市','湖州市','丽水市','舟山市','衢州市');
  case '0900':
   return new Array('四川省','成都市','绵阳市','乐山市','泸州市','德阳市','宜宾市','自贡市','内江市','攀枝花市');
  case '1000':
   return new Array('海南省','海口市','三亚市');
  case '1100':
   return new Array('福建省','福州市','厦门市','泉州市','漳州市','莆田市','三明市','南平市','宁德市','龙岩市');
  case '1200':
   return new Array('山东省','济南市','青岛市','烟台市','潍坊市','威海市','淄博市','临沂市','济宁市','东营市','泰安市','日照市','德州市');
  case '1300':
   return new Array('江西省','南昌市','九江市');
  case '1400':
   return new Array('广西','南宁市','桂林市','柳州市','北海市');
  case '1500':
   return new Array('安徽省','合肥市','芜湖市','安庆市','马鞍山市','蚌埠市','阜阳市','铜陵市','滁州市','黄山市','淮南市','六安市','巢湖市','宣城市','池州市');
  case '1600':
   return new Array('河北省','石家庄市','廊坊市','保定市','唐山市','秦皇岛市');
  case '1700':
   return new Array('河南省','郑州市','洛阳市','开封市');
  case '1800':
   return new Array('湖北省','武汉市','宜昌市','黄石市','襄樊市','十堰市','荆州市','荆门市','孝感市','鄂州市');
  case '1900':
   return new Array('湖南省','长沙市','株洲市','湘潭市','衡阳市','岳阳市','常德市','益阳市','郴州市','邵阳市','怀化市','娄底市','永州市','张家界市');
  case '2000':
   return new Array('陕西省','西安市','咸阳市','宝鸡市','铜川市','延安市');
  case '2100':
   return new Array('山西省','太原市','运城市','大同市','临汾市');
  case '2200':
   return new Array('黑龙江省','哈尔滨市','伊春市','绥化市','大庆市','齐齐哈尔市','牡丹江市','佳木斯市');
  case '2300':
   return new Array('辽宁省','沈阳市','大连市','鞍山市','营口市','抚顺市','锦州市','丹东市','葫芦岛市','本溪市','辽阳市','铁岭市');
  case '2400':
   return new Array('吉林省','长春市','吉林市','辽源市','通化市');
  case '2500':
   return new Array('云南省','昆明市','曲靖市','玉溪市','大理市','丽江市','蒙自市','开远市','个旧市','红河州');
  case '2600':
   return new Array('贵州省','贵阳市','遵义市');
  case '2700':
   return new Array('甘肃省','兰州市','金昌市');
  case '2800':
   return new Array('内蒙古','呼和浩特市','赤峰市','包头市');
  case '2900':
   return new Array('宁夏','银川市');
  case '3000':
   return new Array('西藏','拉萨市','日喀则市');
  case '3100':
   return new Array('新疆','乌鲁木齐市','克拉玛依市','喀什地区市');
  case '3200':
   return new Array('青海省','西宁市');
  case '3300':
   return new Array('香港');
  case '3400':
   return new Array('澳门');
  case '3500':
   return new Array('台湾');
  case '3600':
   return new Array('国外');
  default:
   return new Array();
 }
}

///
///
///
//初始化加载DIV模板和内容
function init()
{
    buildGlobalDiv();//建底层的DIV，屏蔽对页面的操作
    buildDiv('popupArea');//加载所有的省城市信息
}

</script>
</head>
<body οnlοad="javascript:init();">
    <form id="form1" runat="server">
    <div>
        <input type="hidden" name="jobarea" value=""/>
        <input type="button" name="btnSltArea" value="工作地点" οnclick="hide();displayLayer('popupArea')"/>
    </div>
    </form>
</body>
</html>

mengxj85
关注
前程无忧岗位数据可视化分析报告
m0_52382330的博客
03-01 3211
利用python进行对前程无忧网站的数据爬取后进行的一系列数据分析及可视化处理
【Python网络爬虫】前程无忧网爬虫+可视化
weixin_46778443的博客
08-28 1万+
文章目录前言一、页面分析二、代码实现 前言 本文以前程无忧网的爬虫职位为例，通过面向对象的形式进行编码，利用requests库发起请求，利用xpath与正则表达式进行数据解析，将最终结果存入Excel中，最后对数据进行统计并可视化。 一、页面分析 首先进入爬取的目标页面：前程无忧网爬虫职位信息 城市名 城市编号 全国 000000 北京市 010000 上海市 020000 广州市 030200 深圳市 040000 武汉市 180200 西安市 200200
JS 51job城市选择控件带ajax动态生成
11-23
51job城市选择框,js写的,类似51job上的地区选择效果
仿51job.com城市选择框特效(多项选择)
avanry的专栏
12-01 315
[img]/upload/attachment/54920/1aa8cd92-036a-3132-9d47-214c86256171.jpg[/img] 仿51job.com城市选择框特效 您已选择的城市汇总 请选择城市 [取消] ...
Python爬虫之-前程无忧招聘网站（可运行源码）
qq_40771567的博客
05-21 4990
今天爬了前程无忧，分享下代码~ 可以直接运行的，也很简单，就不做注释了。 原创：禁止转载 2019-09-05更新--------------------------- 今天有人关注了这个代码 之前的代码都是刚开始学习的时候写的，自己都有点看不下去哈哈，现在贴一个简单些的代码，大家一起进步哈哈~ #coding:utf-8 import json import time im...
前程无忧招聘网站（51job）——数据爬取
土豆的博客
07-02 3926
第一次爬数据这么多的网站，有点小激动╰(*°▽°*)╯╰(*°▽°*)╯ 进入前程无忧网，在首页的搜索框中，输入大概的职位或公司名称，就能查看需要的职位和公司，但，如果你的搜索输入为空时，它就会查出那个地区的所有记录。如图 2.这时，我们似乎就拿到了全国的所有数据，但是只有2千页，感觉数据不对头，然后我又去看了看广东省的数据，如图： (╯>д<)╯⁽˙...
【Python爬虫】招聘网站实战合集第一弹：爬取前程无忧
最新发布
bagell的博客
10-19 4364
爬个妹子总是没过，没办法，咱们来爬爬招聘网站吧~本次以前程无忧为例，看看Python的工资如何。一. 数据来源分析二. 代码实现步骤: 发送请求 >>> 获取数据 >>> 解析数据 >>> 保存数据OK，思路都清楚的话，咱们来康康代码。算了，我直接贴代码吧，流程都写清楚了，我把注释也标上了。关于这篇文章，也有相对应的视频教程：( “复制代码”)
51job城市选择器javascript CSDN.net
07-24
通过DOM（文档对象模型）操作，JavaScript可以改变HTML元素的属性，实现选择框的展开、收缩和选中状态的改变。 二、jQuery库 jQuery是一个高效、简洁的JavaScript库，它简化了JavaScript的DOM操作、事件处理、动画...
前程无忧岗位数据爬取+Tableau可视化分析
热门推荐
weixin_48367833的博客
09-27 1万+
目录 一、项目背景 二、数据获取 1、相关库的导入与说明 2、构造自动翻页链接（获取二级链接） 3、信息获取与文档写入 三、数据清洗 1、数据读取、去重、空值修复 2、“岗位名称”字段预处理 3、“工作地点”字段预处理 4、“发布时间”字段预处理 5、“岗位薪资”字段预处理 6、“工作经验”字段预处理 7、“学历需求”字段...
仿51job弹出层城市选择代码
10-25
仿51job弹出层城市选择代码,
真正实现51Job的JS类
07-03
实现51job上的行业类型、地区等选择，通过JS+XML文件进行管理。效果超酷。。（含JS类、XML文件和实例）
用javascript做的51job网站
01-01
主要运用了javascript和html的一些基础知识
前程无忧网招聘信息爬取
weixin_48176210的博客
01-10 4974
from urllib.request import urlopen, Request from bs4 import BeautifulSoup import json import xlwt workbook = xlwt.Workbook(encoding='utf-8') worksheet = workbook.add_sheet('My Worksheet') worksheet.write(0, 0, 'job_name') worksheet.write(0, 1, 'company_nam
51job的城市编号
爱安敝之的博客
12-29 976
#以下是51job的城市编码，总共410条，囊括了中国所有地级市或以上的行政区域。 { "常州": "070500", "北京": "010000", "上海": "020000", "广州": "030200", "深圳": "040000", "武汉": "180200", "西安": "200200", "杭州": "080200", "南京": "070200", "成都": "090200", "重庆": "0
51job选择城市功能特效代码
Fusion
10-17 275
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;&lt;met
【51Job数据爬取日志】【小知识点】前程无忧URL编码处理的代码
m0_38052500的博客
03-20 817
以下代码直接粘贴复制到Pycharm中即可使用。 import urllib.parse class ChangeUrl_job(): """ 全然当做是小程序，用来解码与编码51job网站的url。 """ def unquoteCode(self,url_param): url_param = urllib.parse.unquote(u...
仿51job JS创建div,html,实现地区联动.
菜鸟的成长路 。
06-27 798
网页特效 地区选择效果 * {margin:0;} body {font-size:12px;} #container div{margin-top:5px;} #select_city h3{float:left;} #main_city,#all_province {clear:both;} #main_city div,#all_province div{width:600p
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值