一个新进前端小白实习僧的初次探索

我不怕万人阻挡，只怕自己投降

一个新进前端小白实习僧的初次探索

在学校的时候写过几个静态页面、用过一些简单的JavaScript，写过一些基础的CSS，去应付课程项目，却也仅仅于此。
谁也没想到会阴差阳错的进入web前端这个行业。

俗话说：做一行爱一行

学习了一个多月，终于完成了一个相较于较为完整的demo，一个超市网页。完成了其中差不多完整的流程：登录->首页->商品详情页->购物车->商品搜索列表。

来点干货

模拟类似于京东中配送地址选择

/*html*/
<h3 class="fl">配送至:</h3><div class="u-addr fl"><span>北京 东城区 城区</span><i class="iconfont"></i></div><p>有货</p><div class="u-addrdetail none "><ul class="clearfix choose"><li class="fl province hover"><span>北京</span><i class="iconfont"></i></li><li class="fl city"><span>朝阳区</span><i class="iconfont"></i></li><li class="fl area"><span>北苑</span><i class="iconfont"></i></li></ul><div class="fl con block province"><ul class="clearfix"><li class="fl">北京</li><li class="fl">上海</li><li class="fl">天津</li><li class="fl">重庆</li><li class="fl">河北</li><li class="fl">山西</li><li class="fl">河南</li><li class="fl">辽宁</li><li class="fl">吉林</li></ul></div><div class="fl con none city"><ul class="clearfix"><li class="fl">朝阳区</li><li class="fl">海淀区</li><li class="fl">西城区</li><li class="fl">东城区</li><li class="fl">昌平区</li><li class="fl">平谷区</li><li class="fl">延庆县</li></ul></div><div class="fl con none area"><ul class="clearfix"><li class="fl">延庆镇</li><li class="fl">城区</li><li class="fl">康庄镇</li><li class="fl">八达岭镇</li><li class="fl">永宁镇</li><li class="fl">旧县镇</li></ul></div></div>

其中class=“u-addr”的这个div 显示选择后的地址信息，class=“u-addrdetail”这个div中的内容为一个tab页，来选择详细的地址信息。

/*css*/
.u-addr{border: 1px solid #4c4c4c;padding: 2px 5px;margin-left: 10px;}
.u-addrdetail{width:500px;background-color:#fff;border: 1px solid #4c4c4c;margin-left: 10px;position: absolute;margin-top: 29px;}
.u-addrdetail ul{border-bottom: 1px solid #d4d9de;margin: 0 22px;}
.u-addrdetail li{height: 30px;width:70px;line-height: 30px;text-align: center}
.u-addrdetail li:hover{color:#DA3434;}

/*js*/
$('.u-addr').hover(function(){$(this).next().next().show();
});
$('.u-addrdetail').hover(function(){$(this).show();
},function() {$(this).hide();}
);

- tab页效果

<div class="u-tab"><div class="u-tabtitle"><ul><li  class="fl">充話費</li><li  class="fl">充流量</li></ul></div><div class="u-tabcontent"><div class="u-ipt"><div class="fl u-title">手机号码：</div><input type="text" class="w130"/></div><div class="u-ipt"><div class="fl u-title">充值面值：</div><input type="text"  class="u-value w130"  readonly value="100"/><a href="#"><i class="iconfont"></i></a></div><p class="u-valuedetail w130 u-l110"><a>￥10</a><a>￥20</a><a>￥30</a><a>￥50</a><a>￥100</a><a>￥200</a><a>￥300</a><a>￥500</a><a>￥600</a></p><div class="u-ipt"><div class="fl u-title">售价：</div><label class="s-orange">19.9</label><div class="fr"><input type="button" value="立即购买"></div></div></div><div class="u-tabcontent none"><div class="u-ipt"><div class="fl u-title">手机号码：</div><input type="text" class="w130" /></div><div class="u-ipt"><div class="fl u-title">流量：</div><select><option>全国</option><option>省内</option></select><input type="text" class="u-value w80" readonly value="100"/><a href="#"><i class="iconfont"></i></a></div><p class="u-valuedetail w80 u-l150"><a>20M</a><a>100M</a><a>150M</a><a>300M</a><a>500M</a><a>1G</a></p><div class="u-ipt"><div class="fl u-title">售价：</div><label class="s-orange">19.9</label><div class="fr"><input type="button" value="立即购买"></div></div></div></div>

/*css*/
.u-tab{height: 200px;width: 230px;background-color: #666666;margin-top: 10px;margin-right: 10px;margin-left: 10px}
.u-tabtitle{height: 30px;font-size: 15px;line-height: 30px;margin-left: 12px;}
.u-tabtitle ul{overflow: auto;margin-left: 35px;}
.u-tabtitle li{padding: 0px 12px;display: block;color: #fff}
.u-tabtitle li:hover{color: #e74649;background-color: white}
.u-tabcontent{height: 165px;background-color: #ffffff;border: 5px solid #666666;border-top: 0px;}
.u-ipt{padding-left: 10px;padding-top: 20px}
.u-tabcontent .u-title{height: 20px;line-height: 20px;}
.u-tabcontent .ipt{height: 20px;border: 1px solid #666666; }
.u-tabcontent select{height: 20px;width: 60px;border: 1px solid #666666;}
.u-tabcontent .w80{width: 90px;}
.u-tabcontent .w130{width: 130px}
.u-tabcontent i{margin-left: -20px;z-index: 99999;position: absolute}
.u-tabcontent input[type=button]{height: 20px;width: 70px;border-radius: 3px;-webkit-border-radius:3px;-moz-border-radius:3px; background-color: #e74649;color: #ffffff;border: 0px;margin-right: 30px}.u-valuedetail{display: none;position: absolute;background-color: #ffffff;}
.u-valuedetail a{padding-right: 7px;padding-left: 4px;*padding-right: 0px;*padding-left: 0px;padding-top: 8px;padding-bottom: 5px;line-height: 30px;box-sizing: border-box;border: 1px solid #666666;width: 43px;*width:41px;display: block;float: left;}
.u-l110{margin-left: 70px;}
.u-l150{margin-left: 106px;}

/*js*/
$('.u-tabtitle li').hover(function(){var Index;Index=$(this).index();$(this).addClass('li:hover').siblings('li').removeClass('li:hover');$('.u-tabcontent').eq(Index).show(200).siblings('.u-tabcontent').hide();
});

这是tab也切换效果，这段代码中也包含用input与div模拟select控件效果，js为：

/*面值下拉列表*/
$('.u-value.w130').click(function(){$('.u-valuedetail.w130').toggle();return false;});
$('.u-valuedetail a').click(function(){$('.u-value.w130').val($(this).html().replace("￥",""));
});
/*流量下拉列表*/
$('.u-value.w80').click(function(){$('.u-valuedetail.w80').toggle();return false;
});
$('.u-valuedetail a').click(function(){$('.u-value.w80').val($(this).html().replace("￥",""));
});
/*点击空白处隐藏*/
$('body').click(function(){if($(this)!=$('.u-valuedetail.w130')||$(this)!=$('.u-valuedetail.w80')){$('.u-valuedetail.w130').hide();$('.u-valuedetail.w80').hide();}
});

- 购物车等处的+ - 商品数量效果

/*html*/
<div class="u-buy m-moudle fl"><input type="button" value="-"><input type="text" value="1" readonly><input type="button" value="+"><a href="addcartsucess.html"> <input class="buy" type="button" value="加入购物车" ></a><input class="buy" type="button" value="立即购买"><br><br>温馨提示:支持7天无理由退货</div>

/*css*/
.u-buy input[type=text]{border: 1px solid #787878;width: 28px;height: 26px;text-align: center;}
.u-buy .buy{background-color: #C30008;color: #fff;border-radius: 3px;-webkit-border-radius:3px;-moz-border-radius:3px; border: 0px;height: 30px;width: 140px;margin-left: 10px;}
input[value='+']{border: 0px;height: 30px;}
input[value='-']{border: 0px;height: 30px;}

/*js*/
$("input[value='+']").click(function(){//$(this).prev('').val(parseInt($(this).prev().val())+1);$(this).closest('div').children("input[type='text']").val(parseInt($(this).closest('div').children("input[type='text']").val())+1);
});
$("input[value='-']").click(function(){if($(this).closest('div').children("input[type='text']").val()=='1'){return}else{$(this).closest('div').children("input[type='text']").val(parseInt($(this).closest('div').children("input[type='text']").val())-1);}

以上的+ - 效果，可以当组件来用，只要将+ - 的button 以及显示内容的input框放在一个div中即可。

- 轮播图

<div class="m-cf fl "><ul class="u-bannercirle"><li class="s-orange" >1</li><li>2</li><li>3</li></ul><div class="u-bannerlist"><a href="#"><img src="../images/1.jpg"></a><a href="#"><img src="../images/2.jpg"></a><a href="#"><img src="../images/3.jpg"></a></div></div>

/*Carousel figure*/
.m-cf{height: 456px;width: 750px;background-color: #e74649;margin-left: 200px}
.m-cf a{position: absolute;}
.u-bannercirle{position:absolute;list-style-type:none;filter: Alpha(Opacity=80);opacity:0.8; border:0;z-index:1002;margin-left: 375px;margin-top: 425px}
.u-bannercirle li{margin-left:15px;float: left;font-size: 14px;cursor: pointer }
.u-bannercirle li:hover{color: #e74649; }
.u-bannerlist{}
.m-cf img{height: 456px;width: 750px}

/*轮播图*/var count=0;var n=0;var bannerlist = $('.u-bannerlist a');count = bannerlist.length;$(".u-bannerlist a:not(:first-child)").hide();$(".u-bannercirle li").mouseover(function() {var i = $(this).text() -1;if (i >= count) return;bannerlist.filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);$(this).addClass('s-orange');$(this).siblings("li").removeClass("s-orange");});var tt = 0;tt = setInterval(function(){n = n >=(count -1) ?0 : ++n;$(".u-bannercirle li").eq(n).trigger('mouseover');},1000);bannerlist.mouseover(function(){clearInterval(tt);});bannerlist.mouseout(function(){tt=setInterval(function(){n = n >=(count -1) ?0 : ++n;$(".u-bannercirle li").eq(n).trigger('mouseover');},2000);});

采用position:absolute绝对定位，让图片叠加在一起，然后用定时器来定时出发mouseover的时间。

楼层控制

<div class="m-floorbox "><a href="#"><div>返回顶部</div></a><a href="#"><div>精品推荐</div></a><a href="#"><div>进口商品</div></a><a href="#"><div>食品饮料</div></a><a href="#"><div>粮油副食</div></a><a href="#"><div>家庭清洁</div></a><a href="#"><div>美容洗护</div></a><a href="#"><div>生鲜水果</div></a></div>

.m-floorbox{position: fixed;background-color: #ffffff;z-index: 99999;top: 100px;right: 20px;width:44px;border: 1px solid #d4d9de;display: none;}
.m-floorbox a{height: 44px;text-align: center;padding: 5px 10px;border-top: 1px solid #d4d9de;display: block;}
.m-floorbox a:hover{color: #ffffff;background-color: #de8f6b}
.s-pre{background-color: #de8f6b;color: #ffffff;}

 /*导航电梯*/$('.m-floorbox a').click(function(){var msg = $(this).children().html();if(msg=='返回顶部'){$("html,body").animate({scrollTop:0},1000);}else if(msg=='精品推荐'){var Y = $('.m-recommendedgoods').offset().top-200;$("html,body").animate({scrollTop:Y},1000);$('.m-floorbox a:nth-child(2)').addClass('s-pre');$('.m-floorbox a:nth-child(2)').siblings().removeClass('s-pre');}else if(msg=='进口商品'){var Y = $('.m-importgoods').offset().top-200;$("html,body").animate({scrollTop:Y},1000);$('.m-floorbox a:nth-child(3)').addClass('s-pre');$('.m-floorbox a:nth-child(3)').siblings().removeClass('s-pre');}else if(msg=='食品饮料'){var Y = $('.m-foods').offset().top-50;$("html,body").animate({scrollTop:Y},1000);$('.m-floorbox a:nth-child(4)').addClass('s-pre');$('.m-floorbox a:nth-child(4)').siblings().removeClass('s-pre');}else if(msg=='粮油副食'){var Y = $('.m-Graingoods').offset().top-50;$("html,body").animate({scrollTop:Y},1000);$('.m-floorbox a:nth-child(5)').addClass('s-pre');$('.m-floorbox a:nth-child(5)').siblings().removeClass('s-pre');}else if(msg=='家庭清洁'){var Y = $('.m-cleaninggoods').offset().top-50;$("html,body").animate({scrollTop:Y},1000);$('.m-floorbox a:nth-child(6)').addClass('s-pre');$('.m-floorbox a:nth-child(6)').siblings().removeClass('s-pre');}else if(msg=='美容洗护'){var Y = $('.m-toiletriesgoods').offset().top-50;$("html,body").animate({scrollTop:Y},1000);$('.m-floorbox a:nth-child(7)').addClass('s-pre');$('.m-floorbox a:nth-child(7)').siblings().removeClass('s-pre');}else{var Y = $('.m-fruitgoods').offset().top-50;$("html,body").animate({scrollTop:Y},1000);$('.m-floorbox a:nth-child(8)').addClass('s-pre');$('.m-floorbox a:nth-child(8)').siblings().removeClass('s-pre');}});
/*楼层定位*/
var title = $('title').html();
if(title=='index'){
$(window).scroll(function (){var top = $(document).scrollTop();console.log(top);if(top>$(window).height()-200){$('.m-floorbox').show();if(top>$('.m-recommendedgoods').offset().top-100 && top<$('.m-importgoods').offset().top-360){$('.m-floorbox a:nth-child(2)').addClass('s-pre');$('.m-floorbox a:nth-child(2)').siblings().removeClass('s-pre');}else if(top>$('.m-importgoods').offset().top-100 && top<$('.m-foods').offset().top-360){$('.m-floorbox a:nth-child(3)').addClass('s-pre');$('.m-floorbox a:nth-child(3)').siblings().removeClass('s-pre');}else if(top>$('.m-foods').offset().top-100 && top<$('.m-Graingoods').offset().top-360){$('.m-floorbox a:nth-child(4)').addClass('s-pre');$('.m-floorbox a:nth-child(4)').siblings().removeClass('s-pre');}else if(top>$('.m-Graingoods').offset().top-100 && top<$('.m-cleaninggoods').offset().top-360){$('.m-floorbox a:nth-child(5)').addClass('s-pre');$('.m-floorbox a:nth-child(5)').siblings().removeClass('s-pre');}else if(top>$('.m-cleaninggoods').offset().top-100 && top<$('.m-toiletriesgoods').offset().top-360){$('.m-floorbox a:nth-child(6)').addClass('s-pre');$('.m-floorbox a:nth-child(6)').siblings().removeClass('s-pre');}else if(top>$('.m-toiletriesgoods').offset().top-100&& top<$('.m-fruitgoods').offset().top-360){$('.m-floorbox a:nth-child(7)').addClass('s-pre');$('.m-floorbox a:nth-child(7)').siblings().removeClass('s-pre');}else if(top>$('.m-fruitgoods').offset().top-300){$('.m-floorbox a:nth-child(8)').addClass('s-pre');$('.m-floorbox a:nth-child(8)').siblings().removeClass('s-pre');}}else{$('.m-floorbox').hide();}
});

滚动条滚动时，根据元素的offset().top的范围来定位到相应的楼层。同理，点击的楼层不同，根据元素的offset().top使用$(“html,body”).animate({scrollTop:Y},1000);将滚动条定位到相应的楼层。

- 登录界面输入提示

<div class="m-content"><div class="m-account"><div class="u-icon"><i class="icon iconfont"></i></div><span>请输入您的账号</span><input type="text"></div><div class="m-account"><div class="u-icon"><i class="icon iconfont"></i></div><span>请输入您的密码</span><input type="password"></div><a href="#" class="fl">忘记密码？</a><a href="#" class="fr">立即注册</a><a href="index.html"><input type="button" value="登录"></a><a href="#" class="fr">请准守网购协议</a></div>

.m-content{margin-left: 10%;margin-right: 10%;width:80%;}
.m-account{width:100%;position: relative}
.m-account input{width:100%;height: 35px;margin-top: 20px;line-height: 35px;font-size: 12px;text-indent: 55px;border: 1px solid #dedede}
.m-account .u-icon{width: 41px;height: 39px;*height:40px;float:left;position: absolute;background-color: #dedede;margin-top: 20px}
.m-account i{color: #ffffff;font-size: 20px;float: left;margin-left: 11px;margin-top: 6px}
.m-account span{color: #666666;float: left;margin-left: 55px;margin-top: 30px;position: absolute}
.m-content a{ margin-top: 20px;margin-bottom: 20px;}
.m-content input[type=button]{width:100%;height:35px;background-color: #e74649;color: #ffffff;text-align: center;font-size: 18px;font-weight: bold;line-height:35px;border: 0 }

/*输入提示*/$(".m-account>input").focus(function(){var value = $(this).val();if(value!=null){$(this).siblings("span").hide();}else{$(this).siblings("span").show();}});$(".m-account>input").blur(function(){var value = $(".m-account>input").val();if(value[0]!=null&&value[1]!=null){//$(this).css('background-color','red');$(this).siblings("span").hide();}else if(value[0]==null||value[1]==null){// $(this).css('background-color','blue');$(this).siblings("span").show();}});

附一些效果图：

第一次写博客，有很多不足的地方，希望大家见谅。
以上的解决方案也许不是最佳的，只希望能给大家找找思路。

超市的相关资源可以从我的github上下载：附件地址（https://github.com/Sosoyy/supertmark_web.git）