点滴生活web前端博客，前端工程师
- 俞敏洪:上海交通大学演讲
-
Math random()、ceil()、floor()、round()
JavaScript: The Definitive Guide, 4thEdition中对Math.ceil(),Math.floor()与Math.round()三个函数的定义。
Math.random()
返回 0 ~ 1 之间的随机数。
Math.ceil()
ceil() 方法可对一个数进行上舍入。
参数必须是一个数值。返回值大于等于 x，并且与它最接近的整数。
Math.floor()
floor() 方法可对一个数进行下舍入。
参数可以是任意数值或表达式。返回值小于等于 x，且与 x 最接近的整数。
Math.round()
round() 方法可把一个数字舍入为最接近的整数
参数必须是一个数值。返回值与 x 最接近的整数。
document.writeln("Math.ceil(4.8992303)输出结果："+Math.ceil(4.8992303)+"<br/>");document.writeln("Math.floor(4.8992303)输出结果："+Math.floor(4.8992303)+"<br/>");document.writeln("Math.round(4.8992303)输出结果："+Math.round(4.8992303)+"<br/><br/>");document.writeln("Math.ceil(4.29993354)输出结果："+Math.ceil(4.29993354)+"<br/>");document.writeln("Math.floor(4.29993354)输出结果："+Math.floor(4.29993354)+"<br/>");document.writeln("Math.round(4.29993354)输出结果："+Math.round(4.29993354));
-
命名空间
讲功能组合在一起的对象，叫做命名空间。 比如： YAHOO.util.Dom——处理Dom的方法 YAHOO.util.Event——与事件交互的方法 YAHOO.lang——用于底层语言特性的方法。 命名空间很重要的一部分是确定每个人都同意使用的全局对象名字，并且尽可能唯一，让其他人不太可能也使用这个名字。在大多数情况下，可以是开发代码的公司的名字，例如我公司HZ，你可以如下例所示开始创建命名空间来组合功能。 //创建全局对象 var HZ={}； //为professional Javascript创建命名空间 HZ.ProJS={}; //将用到的对象附加上去 HZ.ProJS.EventUtil={}; HZ.ProJS.CookieUtil={}; 在这个例子中，HZ是全局量，其他命名空间在此之上创建。如果本书所有代码都放在HZ.ProJS命名空间，那么其他作者也应该把自己的代码添加到HZ对象中。只要所有人都遵循这个规则，那么就不用担心其他人也创建叫做EventUtil或者CookieUtil的对象，因为它会存在于不同的命名空间中。请看下面的例子： //为Professional Ajax创建命名空间 HZ.ProAjax={}; //附加功能使用的其他对象 HZ.ProAjax.EventUtil={}; HZ.ProAjax.CookieUtil={}; //ProJS还科技继续分别访问 HZ.ProJS.EventUtil.addHandler(); //以及ProAjax HZ.ProAjax.EventUtil.addHandler(); 虽然命名空间会需要多写一些代码，但是对于可维护的目的而言是值得的。命名空间有助于确保代码可以在同一个页面上与其他代码以无害的方式一起工作。 （以上是读javascritp高级程序设计3内容摘要），觉得很有意思就分享下。 -
JQuery图像滑块插件
个人很喜欢响应式的BXSlider
-
谈薪时候应该掌握的心理技巧
纽约的企业主管教练拉比娅·德兰德隆表示，就业市场的紧缩也许会使求职者在谈薪酬时少了些砝码，不过也不是说你就只能妥协，雇主一开价就得全盘接受。要想得到尽可能高的薪酬又不致令未来雇主心理不爽，不妨运用如下几招。
做好前期调研
德兰德隆表示，在以前，要想知道你的同事和其他业内同行的收入还是比较困难的，不过如今就有很多途径了。部分求职网站都根据求职者的职务、所在城市及工作经验给出了相应的薪酬范围。有些也许还能查到你所应征那家公司公布的薪酬状况。
不要轻易泄底
申请表上都会要求你给出自己对于薪酬的确切要求。德兰德隆的意见是，尽量不要给出确切的数字。如果你开的价码太高，很可能就没法进入下一阶段的面试。太低的话，雇主会以为你无法胜任这份工作，或者以为你是非常迫切地需要这份工作。
阿卡纳说，假使面试者还是坚持要求你说出预期薪酬，不要给出确定的数字，而是给出一个上下浮动的范围，低值是你所能承受的底线，高值则是你很满意的薪酬水平。
佐治亚州迪凯特市的职业规划教练沃尔特·阿卡纳表示，如果在面试过程中，对方坚持要了解你目前的薪酬，那你就告诉他你的“整体薪酬”，悉数报上你的工资、福利、奖金以及现任雇主给予的其他报酬。如果新公司没有类似的福利，那么人力资源部经理会在工资里把这些考虑进去的。
不要撒谎
德兰德隆说，“对于人力资源部的人来说，去核实你自报的薪水是否真实是易如反掌的，虽然他们不见得会这么去做。”即便你最终成功得到了工作机会，公司对你进行背景调查时也会发现你虚报薪酬的，你也许会就此失去这个工作机会，至少也会令你的新老板很不爽。
不要接受对方第一次开价
阿卡纳表示，多数雇主都预期应聘者会讨价还价，所以他们第一次开出价码时会预留上涨的空间。可能的话，安排一次跟你未来直接上司的直接面谈，而不是只跟人力资源部的人谈谈就拉倒了。阿卡纳表示，直接上司通常都更容易变通。
德兰德隆表示，虽然经济低迷时期工资会受到一定的影响，要求对方在开出的价码上再加10%是绝对不会错的。
阿卡纳说，如果你的未来上司表示，因为预算的限制，他没法给到你要的工资，那么可能是因为这个职位的薪酬级别是由人力资源部来“评定”的。可以试着问他是否可以找相关人员重新评定薪酬级别，问一问总是没错的，大不了他回答你说，“不行。”
-
简单的二级菜单导航
这种效果在b2c商城经常用的到，刚结束的项目就用到了，简单分享下。
Demo：http://www.ostools.net/jsbin/uiafeaei/1
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> ul{margin:0;padding:0;list-style-type:none;} a{ text-decoration:none;} .mold_open_hover,.mold_open{background-image:url(../image/open.png);background-repeat:none;display:inline-block;width:10px;height:6px;margin-left:10px;position:relative;top:-2px;} .mold_open{background-position:0 -6px;} .mold_open_hover{background-position:0 0;} .mod-menu{position:relative;z-index:1000;left:-1px;margin-left:100px;} h1{margin-left:100px;} .menu-cont-list a:hover{text-decoration:underline;} .mod-menu .menu-item{width:220px;border-top:solid 1px #d59bb2;border-bottom:solid 2px #d59bb2;position:relative;z-index:22;} .mod-menu .menu-item li{height:47px;line-height:47px;background:#feebf3;border-top:solid 1px #f0bfd3;} .mod-menu .menu-item li.mouse-bg{background:url(../image/mouse-menu-bg.jpg) no-repeat #fff;position:relative;z-index:22;margin-right:-4px;} .mod-menu .menu-item a{color:#c81d61;font-size:16px;padding-left:33px;display:block;height:45px;border-top:solid 1px #f1f2f7;} .mod-menu .menu-item a:hover{ text-decoration:none;} .mod-menu .menu-cont{position:absolute;left:220px;top:1px;background:#fff;width:573px;border:solid 1px #F0BFD3;box-shadow:2px 0 10px rgba(210,33,103,0.25);z-index:20;} .mod-menu .menu-cont-list{padding:0 30px;} .mod-menu .menu-cont-list li{border-bottom:dotted 1px #f0bfd3;padding:10px 0;} .mod-menu .menu-cont-list li:last-child{border-bottom:none;} .mod-menu .menu-cont-list h3{font-size:14px;font-weight:700;} .mod-menu .menu-cont-list h3 a{color:#222;} .mod-menu .menu-list-link a{color:#666;line-height:24px;} .mod-menu .menu-list-link .long-string{color:#ccc;font-size:12px;padding:0 10px;} </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ var mod_menu=$(".mod-menu");//导航模块区 var menu=function(){ var menuItem=$(".menu-item li");//选择导航列表 menuItem.each(function(){ var _index=$(this).index();//获取当前选择菜单列表的索引 $(this).mouseenter(function(){ var y = $(this).position().top+1;//获取当前鼠标滑过的列表的顶部坐标 $(".menu-cont").show(); $(".menu-cont").css("top",y);//需要显示的对应索引内容 $(this).addClass("mouse-bg").siblings().removeClass("mouse-bg"); $(".menu-cont>div").eq(_index).show().siblings().hide(); }); });/*导航菜单菜单*/ $(".mod-menu").mouseleave(function(){ $(".menu-cont").hide(); menuItem.removeClass("mouse-bg"); }) }//展开二级菜单 menu();//执行展开二级菜单函 }); </script> </head> <body> <h1>简单的2级菜单导航</h1> <div class="mod-menu f-l"> <div id="column-left"> <ul class="menu-item"> <li class=""><a href="trade-wedding.html">Wedding</a></li> <li class=""><a href="trade-occasion-dresses.html">Occasion Dresses</a></li> <li class=""><a href="trade-women-s-clothing.html">Women's Clothing</a></li> <li class=""><a href="trade-women-s-shoes.html">Women's Shoes</a></li> <li class=""><a href="trade-accessories.html">Accessories</a></li> <li class=""><a href="trade-beauty-health.html">Beauty & Health</a></li> </ul><!--一级菜单列表--> <div class="menu-cont hide" style="display: none; top: 241px;"> <div class="menu-cont-list" style="display: none;"> <ul> <li> <h3><a href="wedding-dresses-c1_2.html">Wedding Dresses</a></h3> <div class="menu-list-link"></div> </li> <li> <h3><a href="bridesmaid-dresses-c1_3.html">Bridesmaid Dresses</a></h3> <div class="menu-list-link"></div> </li> <li> <h3><a href="wedding-party-dresses-c1_4.html">Wedding Party Dresses</a></h3> <div class="menu-list-link"> <a title="" href="mother-of-the-brides-dresses-c1_4_36.html">Mother of the Brides Dresses</a> <span class="long-string">|</span> <a title="" href="flower-girl-dresses-c1_4_37.html">Flower Girl Dresses</a> <span class="long-string">|</span> <a title="" href="wedding-guest-dresses-c1_4_38.html">Wedding Guest Dresses</a> </div> </li> <li> <h3><a href="wedding-accessories-c1_6.html">Wedding Accessories</a></h3> <div class="menu-list-link"> <a title="" href="fabric-swatch-c1_6_100.html">Fabric Swatch</a> <span class="long-string">|</span> <a title="" href="bridal-lingerie-c1_6_101.html">Bridal Lingerie</a> <span class="long-string">|</span> <a title="" href="wedding-veils-c1_6_48.html">Wedding Veils</a> <span class="long-string">|</span> <a title="" href="wedding-gloves-c1_6_51.html">Wedding Gloves</a> <span class="long-string">|</span> <a title="" href="wedding-shawls-c1_6_47.html">Wedding Shawls</a> <span class="long-string">|</span> <a title="" href="wedding-flowers-c1_6_52.html">Wedding Flowers</a> <span class="long-string">|</span> <a title="" href="wedding-petticoats-c1_6_120.html">Wedding Petticoats</a> </div> </li> </ul> </div> <div class="menu-cont-list" style="display: none;"> <ul> <li> <h3><a href="prom-dresses-c103_39.html">Prom Dresses</a></h3> <div class="menu-list-link"> </div> </li> <li> <h3><a href="military-ball-dresses-c103_118.html">Military Ball Dresses</a></h3> <div class="menu-list-link"> </div> </li> <li> <h3><a href="evening-dresses-c103_40.html">Evening Dresses</a></h3> <div class="menu-list-link"> </div> </li> <li> <h3><a href="cocktail-dresses-c103_41.html">Cocktail Dresses</a></h3> <div class="menu-list-link"> </div> </li> <li> <h3><a href="ball-gowns-c103_43.html">Ball Gowns</a></h3> <div class="menu-list-link"> </div> </li> <li> <h3><a href="homecoming-dresses-c103_44.html">Homecoming Dresses</a></h3> <div class="menu-list-link"> </div> </li> <li> <h3><a href="little-black-dresses-c103_45.html">Little Black Dresses </a></h3> <div class="menu-list-link"> </div> </li> <li> <h3><a href="quinceanera-dresses-c103_46.html">Quinceanera Dresses</a></h3> <div class="menu-list-link"> </div> </li> </ul> </div> <div class="menu-cont-list" style="display: none;"> <ul> <li> <h3><a href="dresses-c7_8.html">Dresses</a></h3> <div class="menu-list-link"> </div> </li> <li> <h3><a href="clubwear-c7_9.html">Clubwear</a></h3> <div class="menu-list-link"> </div> </li> <li> <h3><a href="leggings-c7_12.html">Leggings</a></h3> <div class="menu-list-link"> </div> </li> <li> <h3><a href="lingeries-c7_13.html">Lingeries</a></h3> <div class="menu-list-link"> <a title="" href="bras-c7_13_54.html">Bras</a> <span class="long-string">|</span> <a title="" href="babydolls-c7_13_56.html">Babydolls</a> <span class="long-string">|</span> <a title="" href="teddies-c7_13_57.html">Teddies</a> <span class="long-string">|</span> <a title="" href="panties-c7_13_58.html">Panties</a> <span class="long-string">|</span> <a title="" href="hosiery-c7_13_59.html">Hosiery</a> </div> </li> <li> <h3><a href="bustiers-corsets-c7_102.html">Bustiers & Corsets</a></h3> <div class="menu-list-link"> </div> </li> <li> <h3><a href="costumes-c7_53.html">Costumes</a></h3> <div class="menu-list-link"> <a title="" href="sexy-costumes-c7_53_110.html">Sexy Costumes</a> <span class="long-string">|</span> <a title="" href="christmas-costumes-c7_53_119.html">Christmas Costumes</a> <span class="long-string">|</span> <a title="" href="halloween-costumes-c7_53_111.html">Halloween Costumes</a> <span class="long-string">|</span> <a title="" href="halloween-accessories-c7_53_112.html">Halloween Accessories</a> <span class="long-string">|</span> <a title="" href="zentai-c7_53_121.html">Zentai</a> </div> </li> <li> <h3><a href="swimwear-c7_11.html">Swimwear</a></h3> <div class="menu-list-link"> </div> </li> <li> <h3><a href="activewear-c7_10.html">Activewear</a></h3> <div class="menu-list-link"> </div> </li> </ul> </div> <div class="menu-cont-list" style="display: none;"> <ul> <li> <h3><a href="heels-c116_60.html">Heels</a></h3> <div class="menu-list-link"> </div> </li> <li> <h3><a href="pumps-c116_117.html">Pumps</a></h3> <div class="menu-list-link"> </div> </li> <li> <h3><a href="dance-shoes-c116_62.html">Dance Shoes</a></h3> <div class="menu-list-link"> </div> </li> <li> <h3><a href="boots-c116_63.html">Boots</a></h3> <div class="menu-list-link"> </div> </li> </ul> </div> <div class="menu-cont-list" style="display: none;"> <ul> <li> <h3><a href="evening-bags-c15_113.html">Evening Bags</a></h3> <div class="menu-list-link"> </div> </li> <li> <h3><a href="hats-scarves-c15_16.html">Hats & Scarves</a></h3> <div class="menu-list-link"> <a title="" href="womens-hats-c15_16_64.html">Womens Hats</a> <span class="long-string">|</span> <a title="" href="womens-scarves-c15_16_65.html">Womens Scarves</a> </div> </li> <li> <h3><a href="jewelry-c15_17.html">Jewelry</a></h3> <div class="menu-list-link"> <a title="" href="earrings-c15_17_66.html">Earrings</a> <span class="long-string">|</span> <a title="" href="necklaces-c15_17_67.html">Necklaces</a> <span class="long-string">|</span> <a title="" href="rings-c15_17_68.html">Rings</a> </div> </li> <li> <h3><a href="watches-c15_18.html">Watches</a></h3> <div class="menu-list-link"> </div> </li> </ul> </div> <div class="menu-cont-list" style="display: block;"> <ul> <li> <h3><a href="wigs-hair-extensions-c19_23.html">Wigs & Hair extensions</a></h3> <div class="menu-list-link"> </div> </li> <li> <h3><a href="fascinators-c19_69.html">Fascinators</a></h3> <div class="menu-list-link"> </div> </li> <li> <h3><a href="makeup-tools-c19_21.html">Makeup Tools</a></h3> <div class="menu-list-link"> </div> </li> <li> <h3><a href="spas-massagers-c19_71.html">Spas & Massagers</a></h3> <div class="menu-list-link"> </div> </li> <li> <h3><a href="health-fitness-c19_70.html">Health & Fitness</a></h3> <div class="menu-list-link"> </div> </li> </ul> </div> </div> </div><!--二级菜单内容--> </div> </body> </html> -
爱在记忆中找你 - 林峯
-
仿天猫的关注效果
Demo:http://www.ostools.net/jsbin/ulnladid/4
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>标题</title> <meta name="keywords" content="关键字" /> <meta name="description" content="描述" /> <meta content="zh-cn" http-equiv="content-language" /> <meta content="版权" name="copyright" /> <link rel="stylesheet" type="text/css" javascript:; media="all" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> <style type="text/css"> ul{list-style:none;padding:10px;} a{text-decoration:none; color:#333;} a:hover{color:# f30; text-decoration:underline;} .c{zoom:1;} .c:after{content:"."; display:block; height:0; clear:both; visibility:hidden;} .list{width:990px;margin:0 auto;border:1px solid #ccc;padding:20px;margin-top:100px;box-shadow:4px 4px 10px 1px rgba(0, 0, 0, 0.3);} .list li{float:left; width:24%; line-height:24px;margin:10px 0;font-size:12px;} .gz{margin-left:10px;color:#fff;cursor:pointer;} .list li:hover a.gz{color:#C00;} .bottom{position:fixed; text-align:right;right:0;bottom:0;height:40px;width:200px;border:solid 1px #ccc;} .bottom span,i{background-color:#C00;width:20px;height:20px;display:inline-block;border-radius:50%;} i{position:absolute;display:none; text-indent:-999em;} .bottom span{position:absolute;left:10px;top:50%;margin-top:-10px;} </style> </head> <body> <div class="list c"> <ul id="J_SearchResult"> <li><a target="_blank" href="http://genkek.tmall.com"> 臻格(Genkek) </a> <a data-brandid="109661549" class="gz" javascript:;><i>+</i> 关注</a> </li> <li><a target="_blank" href="http://gap.tmall.com"> Gap </a> <a data-brandid="29877" class="gz" javascript:;><i>+</i> 关注</a> </li> <li><a target="_blank" href="http://ggmm.tmall.com"> 古古美美 </a> <a data-brandid="40039488" class="gz" javascript:;><i>+</i> 关注</a> </li> <li><a target="_blank" href="http://gf.tmall.com"> 高夫 </a> <a data-brandid="3305573" class="gz" javascript:;><i>+</i> 关注</a> </li> <li><a target="_blank" href="http://list.tmall.com/search_product.htm?brand=29486&from=brandguide"> 金利来(Goldlion) </a> <a data-brandid="29486" class="gz" javascript:;><i>+</i> 关注</a> </li> <li><a target="_blank" href="http://gongniu.tmall.com"> 公牛 </a> <a data-brandid="118046" class="gz" javascript:;><i>+</i> 关注</a> </li> <li><a target="_blank" href="http://lecoqsportif.tmall.com"> 公鸡(Le coq sportif) </a> <a data-brandid="3224769" class="gz" javascript:;><i>+</i> 关注</a> </li> <li> <a target="_blank" href="http://codoon.tmall.com"> 咕咚(Codoon) </a> <a data-brandid="3263983" class="gz" javascript:;><i>+</i> 关注</a> </li> <li> <a target="_blank" href="http://guerdisen.tmall.com">古尔帝森</a> <a data-brandid="94008906" class="gz" javascript:;><i>+</i> 关注</a> </li> <li> <a target="_blank" href="http://garros.tmall.com">加露斯(Garros)</a> <a data-brandid="75129577" class="gz" javascript:;><i>+</i>关注</a> </li> </ul> </div> <div class="bottom"><span></span></div> <script language="JavaScript" type="text/javascript"> $(function(){ var gz=$(".gz");//关注按钮 gz.each(function(){ $(this).click(function(){ var i=$(this).find("i"); if(i.hasClass("dis")){ alert("你已经关注了") return false; }//如果包含dis类的产品就就提示已经关注了 var pst=$(this).position(), this_top=pst.top,//当前选中的关注按钮的top坐标值 this_left=pst.left,//当前选中的关注按钮left坐标值 T_top=this_top-30,//点击时圆心向上移动坐标 T_left =this_left+10;//以10个像素的单位网站左边位移的单位 var bottom=$(".bottom"),//底部接受合体的元素区域 P_bottom=bottom.position().top+10,//底部接受合体的top坐标值 P_left=bottom.position().left+10;//底部接收合体块的left坐标值 i.addClass("dis")//关注过的产品就添加dis类 i.show() .animate({top:T_top,left:T_left},400)//以同等x,y轴坐标位移 .animate({top:P_bottom, left:P_left},600);//与底部的关系合体 }); }); }); </script> </body> </html> -
jquery简单的倒计时
b2c网站促销页面有个倒计时效果，实现也挺简单的，不多说了，下面我直接上代码了，希望可以帮助到有需要的人，如果有那些不好的地方，望大家痛批指正，博主我虚心接受教育。
Demo:http://www.ostools.net/jsbin/kpwffltu/1
<div class="time-item"> <span id="day_show">0days</span> <strong id="hour_show"><s id="h"></s>0</strong> <strong id="minute_show"><s></s>0</strong> <strong id="second_show"><s></s>0</strong> </div><!--倒计时模块-- <script type="text/javascript"> var intDiff = parseInt("<?php echo $originTime;?>");//初始日期 function timer(intDiff){ window.setInterval(function(){ var day=0, hour=0, minute=0, second=0;//时间默认值 if(intDiff > 0){ day = Math.floor(intDiff / (60 * 60 * 24)); hour = Math.floor(intDiff / (60 * 60)) - (day * 24); minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60); second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60); } if (minute <= 9) minute = '0' + minute; if (second <= 9) second = '0' + second; $('#day_show').html(day+"days"); $('#hour_show').html('<s id="h"></s>'+hour); $('#minute_show').html('<s></s>'+minute); $('#second_show').html('<s></s>'+second); intDiff--; }, 1000); } $(function(){ timer(intDiff); }); </script> -
无障碍网页实现
貌似需要翻墙
Powered By diandian