知识点总结如下:用原生JavaScript写东西写到吐血;光是获取ID;和className就一大堆代码;而且getElementsByClassName在IE大爷上还不兼容;自己写的类库里写好了,但是代码还没有优化好,就先这么着了;因为getElementsByClassName没做处理,目前IE大爷没出效果;以后处理下getElementsByClassName的兼容性问题就妥妥的了;学习为主,总结如下:

 

JavaScript方面:

  • 问题1:拉勾网底部的拉勾微信实现的不好,从拉勾网锚文本到悬停出现的图片中间,如果鼠标移动速度慢,会出现BUG,也就是微信图片会消失;
  • 解决:我用了DOM2级事件中的事件委托的方法,新建一个自定义属性imgShow=”true” ;放在拉勾微信的a链接内和微信图片所在的DIV中;【已经搞定】,和以前做的仿小米导航是一个思路:http://taobao.fm/works/xiaomiNavigation/index.html
  • 问题2:拉勾网侧边点击“我要反馈”后,出现的邮件的inptu文件中,输入邮箱格式不正确,点击提交后才提示邮箱格式不正确;不利于客户体验;
  • 解决思路:定义一个正则的邮箱;与input的innerHTML对比;做及时提示;当input失去焦点的时候,就开始验证,用红字提示邮箱输入有误;当邮箱格式正确的时候用绿色提示通过【学习时间比较紧急,在以后表单验证的时候再统一实现;】
  • 问题3:拉勾网左侧的小火箭,返回顶部是以匀速实现的;和我以前做的http://taobao.fm/works/imgLoad/index.html一样,
  • 解决思路:如果页面高度比较大的时候,体验很差;用该用运动的思路,做减速运动由快到慢;,可以拿页面高度/2作为标准,然后接近顶部的时候,强制等于0;【在以后实现】
  • 问题4:拉勾网页面底部的:【帮助中心】【联系我们】【拉勾微博】【拉勾微信】原始颜色和鼠标悬停颜色一样了,这样不利于客户发现;
  • 优化思路:加一个hover就可以了;这样感觉舒服多了(顺手解决了);

CSS方面的总结

CSS方面我很渣渣的;备份一个清楚样式的模板,供以后参考和优化:

@charset "utf-8";
/* Broszhu - taobao.fm */
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div,dl,dt,dd,input{margin:0;padding:0;}
body{font-size:14px;font-family: "微软雅黑", "宋体", Arial;}
img{border:none;}
ul,ol{list-style:none;}
input,select,textarea{outline:none; border:none; background:#FFF;}
textarea{resize:none;}
a{text-decoration:none;}

position: fixed;算是一个最深刻的知识点,以前仅限于知道,没有咋使用,今天用了一次,感觉效果还是不错的;

HTML代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>关于我们-拉勾网-最专业的互联网招聘平台</title>
<link rel="stylesheet" href="style/css/style.css"/>
</head>
<body>
<div id="body">
<!-- 顶部内容-->
<div id="header">
<div class="wrapper" >
<a href="index.html" class="logo">
<img src="style/images/logo.png" width="229" height="43" alt="拉勾招聘-专注互联网招聘"/>
<!-- style="width:229px;" 是行内样式,跟链接一个css文件效果是一样的,书写规则也是一样(css里,必须带单位,0除外),但是行内样式的权限高于css文件,可以覆盖链接的css文件属性;而<img width=“229” height="43" src="style/images/logo.png" />这里的width是标签的属性,直接写数值,不带单位。-->
</a>
<ul class="resrt" id="navheader">
<li><a href="index.html">首页</a></li>
<li><a href="companylist.html">公司</a></li>
<li><a href="jianli.html" rel="nofollow">我的简历</a></li>
<li><a href="create.html" rel="nofollow">发布职位</a></li>
<li><a href="http://pai.lagou.com/index.html" target="_blank">一拍</a>
<span class="beta-wrapper"><b class="beta">beta</b></span>
</li>

<!--nofollow的使用:
nofollow有两种用法:
1.用于meta元标签:<meta name="robots" content="nofollow" />,告诉爬虫该页面上所有链接都无需追踪。
2.用于a标签:<a href="login.aspx" rel="nofollow">登录</a>,告诉爬虫该页面无需追踪。
nofollow的作用
nofollow主要有三个作用:
1.防止不可信的内容,最常见的是博客上的垃圾留言与评论中为了获取外链的垃圾链接,为了防止页面指向一些拉圾页面和站点。
2.付费链接:为了防止付费链接影响Google的搜索结果排名,Google建议使用nofollow属性。
3.引导爬虫抓取有效的页面:避免爬虫抓取一些无意义的页面,影响爬虫抓取的效率。-->
</ul>
<ul class="loginTop">
<li><a href="logoin.html" rel="nofollow">登陆</a></li>
<li></li>
<li><a href="register.html" rel="nofollow">注册</a></li>
</ul>
</div>
</div>
<!--中间内容-->
<div id="container">
<div class="content_mid">
<dl class="c_section c_section_mid">
<dt>
<h2><em></em>联系我们</h2>
</dt>
<dd class="aboutus">
<img src="style/images/aboutus.jpg" alt="拉勾网团队"width="186" height="186"/>
<div>
<span>拉勾网(隶属于北京拉勾网络技术有限公司)是专注互联网职业机会的招聘网站,以众多优质互联网资源为依托,发布圈内招聘信息,为求职者提供人性化、个性化、专业化的信息服务,以让优质人才和优秀企业及时相遇为己任。</span>
<span>我们是一个热爱互联网的年轻团队,我们用责任来做这件事情,致力于打造最专业的互联网招聘平台。</span>
</div>
<ul class="reset contact_box ">
<li class="cli1">
<p>商务合作</p>
邮箱:<a href="mailto:79228807@qq.com">79228807@qq.com</a>
地址:北京市海淀区海淀西大街70号
</li>
<li class="cli2">
<p>增值服务</p>
邮箱:<a href="mailto:79228807@qq.com">bill@lagou.com</a>
</li>
<li class="cli3">
<p>客服邮箱:vivi@lagou.com</p>
<p>电话:122222222222</p>
<br/>
<p><script charset="utf-8" type="text/javascript" src="http://wpa.b.qq.com/cgi/wpa.php?key=XzgwMDA1NjM3OV8xNDUzODBfODAwMDU2Mzc5Xw"></script></p>
</li>
<li class="cli4">
<p>拉勾服务站</p>
<p>上海服务站:上海市黄浦区瑞金南路1号海兴广场18E</p>
<p>广州服务站:广州市天河区马场路28号富力公园28B2栋2101</p>
<p>深圳服务站:深圳市南山区松坪山路1号源兴科技大厦东座负一楼3W孵化器</p>

</li>
<li class="cli5">
<img src="style/images/hotline.png" alt="服务热线" id="phoneImges"/>
<p id="bigPhone">服务热线</p>
<p id="smallPhone">Service hotline</p>
<p id="phone">400-800-0000</p>
<p id="phoneNotes">仅收市话费</p>
</li>
<li class="cli6">
<p >400 service is powered by T&I天润融通</p>
</li>
</ul>

</dd>
</dl>

</div>
</div>
<!--侧边内容-->
<ul id="sideLeft">
<li class="backTop"><img sideShow1="true" src="style/css/img/backtop.png" alt="返回顶部"/></li>
<li class="helpUs showHelp"><img sideShow2="true" src="style/css/img/feedback.png" alt="給我们提意见"/></li>
<li class="helpContent showHelp">我要反馈</li>
<div id="callMe">
<div class="callMeHead">
<div class="callMeHead1"></div>
<div class="callMeHead2"></div>
<textarea class="callMeContentBtn1" placeholder="我是拉勾的产品经理哈丁,把你遇到的问题,或是想要的功能告诉我吧(200字以内)" maxlength="200"></textarea>
<!--<input type="text" placeholder="我是拉勾的产品经理哈丁,把你遇到的问题,或是想要的功能告诉我吧(200字以内)" class="callMeContentBtn1"/>-->
<input type="text" class="callMeContentBtn2" placeholder="留下邮箱方便我们沟通(选填)"/>
<input type="button" class="callMeContentBtn3" value="确定"/>
</div>
</div>
</ul>

<!--底部内容-->
<div id="footer">
<div id="nowWeinxin" ><img imgShow="true" src="style/css/img/qrcode.jpg" alt="look微信" height="242" width="242" /></div>
<div class="wrapper">
<a href="javascript:void(0)" target="_blank" rel="nofollow">帮助中心</a>
<a href="http://www.lagou.com/af/zhaopin.html" target="_blank">联系我们</a>
<a href="http://e.weibo.com/lagou720" target="_blank" rel="nofollow">拉勾微博</a>
<a id="isLook" rel="nofollow" imgShow="true" >拉勾微信</a>
<div class="copyright" id="weixinShow"> <a href="#">点此查看本页面的实现原理</a> </div>
</div>
</div>
</div>
</body>
</html>
<script src="style/js/tools.min.js"></script>
<script src="style/js/about.js"></script>

CSS代码如下:

 

@charset "utf-8";
/* Broszhu - taobao.fm */
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div,dl,dt,dd,input{margin:0;padding:0;}
body{font-size:14px;font-family: "微软雅黑", "宋体", Arial;}
img{border:none;}
ul,ol{list-style:none;}
input,select,textarea{outline:none; border:none; background:#FFF;}
textarea{resize:none;}
a{text-decoration:none;}
/*顶部的样式*/
#body{color: #9c9a9c;}
#header{min-width: 1024px;height: 60px;background: #fafafa;border-top: 3px solid #019875;}
/*min-width: 1024px和width: 1024p的区别是,min-width是最小的宽度,可以弄成全屏模式的,而width只能是固定的;这个在border-top上有体现的;*/
#header .wrapper{width: 1024px;margin:0 auto;position: relative; z-index: 90;}
.logo{border: 0;float: left;margin: 10px 0 0 0;}
#navheader{float: left;position: relative;margin-left: 50px;height:60px;line-height:60px;color: #9c9a9c;}
#navheader li{float: left;padding: 0 20px;font-size: 20px;}
#navheader li a{text-decoration:none;}
#navheader li a:link,#navheader li a:visited{color: #9c9a9c;text-decoration:none;}
#navheader li a:hover{color: #000000;}
#navheader .beta-wrapper{background: url("img/icon_beta_tail.png") no-repeat;margin-left:-5px;}
#navheader .beta-wrapper .beta{background: #ff0000;font-size: 10px;border-radius: 10px;font-weight: normal;color: #fff;padding: 0 5px;margin-left:2px;position: relative;top: -18px;}
#header ul.loginTop{width: 107px;height: 30px; line-height:30px;float: right;background: #00b28c;overflow: hidden;position: relative;text-align: center;}
#header ul.loginTop li{float: left;color: #f0f0f0;}
#header ul.loginTop li a{text-decoration:none;color: #fff;padding: 0 8px;}
/*关于我们的*/
#container{width:1024px;position: absolute;left: 50%;margin:35px 0 0 -512px; }
.content_mid{width:680px;height: 707px; padding:0 60px; margin:0 112px 150px 112px;background:#fafafa;}
.c_section{position:relative;margin-bottom:40px;background: #fffbff;}
.c_section h2{color: #fff;font-size: 24px;font-weight: normal;height: 43px;background:
#91cebe;width:96px; padding: 0 20px;margin: -8px 0 40px 40px;line-height: 43px;position: absolute;}
.c_section h2 em{background: url("img/title_arrow01.png")no-repeat;width: 6px;height: 8px;left: -6px;top:0;position: absolute;}
.aboutus{position: relative;width:629px;top: 80px;left: 24px;margin-bottom: 295px;color: #fff}
.aboutus img{margin-right: 10px;float: left;}
.aboutus div{margin-right: 10px;background: #089673;padding: 20px 30px;width: 374px;height: 146px; margin-left:196px; }
.contact_box li{float: left;}
.cli1{width: 180px;height: 92px;padding: 0 0 5px 7px;margin: 10px 10px 0 0;background: #089673;}
.cli2{width: 156px;height: 92px;padding: 0 0 5px 7px;margin: 10px 10px 0 0;background: #089673;}
.cli3{width: 252px;height: 92px;padding: 0 0 5px 7px;margin: 10px 0 0 0;background: #089673;}
.cli4{width: 622px;height: 92px;padding: 0 0 5px 7px;margin-top: 10px;background: #089673;}
.cli5{width: 622px;height: 56px;padding: 5px 0 5px 7px;margin-top: 10px;background: #089673;float: left;}
.cli6{width: 622px;height: 56px;padding: 5 0 5px 7px;text-align:right;color: #9c9a94;}
.cli5 #phoneImges{width: 52px;height: 52px;margin-top: 2px;}
.cli5 #bigPhone{font-size: 24px;margin-top: 2px;}
.cli5 #smallPhone{color:#b5e7ce;font-size: 14px; }
.cli5 #phone{float: right;font-size: 24px; position:relative;top: -54px;margin-right: 10px;}
.cli5 #phoneNotes{font-size: 12px; position:relative;top: -24px;float: right;left: 160px;color: #7bd7bd;font-weight: 900}
.contact_box .cli1 a{text-decoration:none;}
.contact_box .cli1 a:link,.contact_box .cli1 a:visited{color: #fff;text-decoration:none;}
.contact_box .cli1 a:hover{color: #fff;}
.contact_box .cli2 a{text-decoration:none;}
.contact_box .cli2 a:link,.contact_box .cli2 a:visited{color: #fff;text-decoration:none;}
.contact_box .cli2 a:hover{color: #fff;}
/*侧边的*/
#sideLeft{position: fixed;bottom: 100px;right: 138px;cursor: pointer;}
.backTop{width: 28px;height:64px;overflow: hidden;margin-bottom: 12px;}
.helpUs{width: 30px;height: 30px;overflow: hidden;}
.helpContent{color: #525552;margin-left: -15px;}
#callMe{width: 382px;height:241px;border: 1px solid #e7e7e7;margin: -241px 0 0 -342px;background: #fffff7;z-index: 2;position: fixed;display: none;font-family: "微软雅黑", "宋体", Arial}
#sideLeft .callMeHead1{ width: 60px;height: 60px;background: url("img/feedback.png")repeat 0 -66px;margin: -30px 0 0 161px; }
#sideLeft .callMeHead2{ width: 12px;height: 12px;background: url("img/close_notice.png")repeat;margin: -20px 10px 0 0;float: right; }
#sideLeft .callMeContentBtn1{width: 332px;height: 114px;border: 1px solid #f7f3ef;padding: 5px 11px;margin: 10px 0 0 13px;}
#sideLeft .callMeContentBtn2{width: 260px;height: 37px;border: 1px solid #f7f3ef;padding: 0 11px;margin: 10px 0 0 13px;}
#sideLeft .callMeContentBtn3{width: 65px;height: 37px;background: #00ba8c;border: 0;color: #fff;font-size: 16px;cursor: pointer;}
/*尾部的 */
#footer{min-width: 1024px;height: 36px;line-height: 36px;position: relative;top:627px;}
#footer .wrapper{width:1024px;margin:0 auto;border-top: 1px solid #efebef; }
#footer .wrapper a{float: left; cursor: pointer;}
#footer .wrapper a{text-decoration:none;cursor: pointer;}
#footer .wrapper a:link,#footer .wrapper a:visited{color: #9c9a9c;text-decoration:none;}
#footer .wrapper a:hover{color: #000;}
#footer a{padding:0 8px; color:#555;}
#footer .copyright{float: right;}
#nowWeinxin{position:relative; width: 248px;height: 248px;left: 50%;margin-left:-293px;top:10px; }
#nowWeinxin img{border: 3px solid #089673;display: none;cursor: pointer;}









JavaScript代码如下:

 

var oIsLook=document.getElementById("isLook");
var oNowWeinxin=document.getElementById("nowWeinxin");
var oImg=oNowWeinxin.getElementsByTagName("img")[0];

var oSideLeft=document.getElementById("sideLeft");
var oBackTop=oSideLeft.getElementsByClassName("backTop")[0];
var oHelpUs=oSideLeft.getElementsByClassName("helpUs")[0];
var oSideImg1=oSideLeft.getElementsByTagName("img")[0];
var oSideImg2=oSideLeft.getElementsByTagName("img")[1];
var backTop=document.getElementsByClassName("backTop")[0];

var oShowHelp1=oSideLeft.getElementsByClassName("showHelp")[0];
var oShowHelp2=oSideLeft.getElementsByClassName("showHelp")[1];

var oCallMe=document.getElementById("callMe");
var oCallMeHead2=oCallMe.getElementsByClassName("callMeHead2")[0];


var tool = new Tool;
document.onmouseover = function (e) {
e = e || window.event;//处理事件兼容性;
var tar = e.target || e.srcElement;//事件源;
var show = tar.getAttribute("imgShow");//监听的对象;
var sideShow1 = tar.getAttribute("sideShow1");
var sideShow2 = tar.getAttribute("sideShow2");
if (show === "true") {//以属性来判断;
oImg.style.display = "block";
} else {
oImg.style.display = "none";
}
if (sideShow1 === "true") {
oSideImg1.style.marginLeft = "-28px";
} else {
oSideImg1.style.marginLeft = 0;
}
if (sideShow2 === "true") {
oSideImg2.style.marginTop = "-31px";
} else {
oSideImg2.style.marginTop = 0;
}
};

backTop.onclick = toTop;
var winTop = getWin("offsetTop") + getWin("scrollTop");
var cH = getWin("offsetTop");

if (winTop > cH) {
backTop.style.display = "block";
}else{
backTop.style.display = "none";
}
function getWin(attr) {
return document.documentElement[attr] || document.body[attr];
}
function toTop() {
this.style.display = "none";
this.isMove = true;
var count = document.body.scrollTop;
var cur = this;
_toTop();
function _toTop() {
window.clearTimeout(cur.timer);
if (count - 200 <= 0) {
document.body.scrollTop = 0;
cur.isMove = false;
return;
}
count -= 200;
document.body.scrollTop = count;
cur.timer = window.setTimeout(_toTop, 10);
}
}
oCallMeHead2.onclick=function(){
oCallMe.style.display="none"
};
oShowHelp1.onclick=oShowHelp2.onclick=function(){
oCallMe.style.display="block"
};

········