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

我不怕万人阻挡，只怕本身投降

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

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

俗话说：作一行爱一行

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

来点干货

-

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

/*html*/
<h3 class="fl">配送至:</h3>
                    <div class="u-addr fl"><span>北京 东城区 城区</span><i class="iconfont">&#xe65b;</i></div>
                    <p>有货</p>
                    <div class="u-addrdetail none ">
                        <ul class="clearfix choose">
                            <li class="fl province hover"><span>北京</span><i class="iconfont">&#xe65b;</i></li>
                            <li class="fl city"><span>朝阳区</span><i class="iconfont">&#xe65b;</i></li>
                            <li class="fl area"><span>北苑</span><i class="iconfont">&#xe65b;</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">&#xe65b;</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">&#xe65b;</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">&#xe694;</i>
            </div>
            <span>请输入您的帐号</span>
            <input type="text">
        </div>
            <div class="m-account">
            <div class="u-icon">
                <i class="icon iconfont">&#xe611;</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）