一个新进前端小白实习僧的初次探索
来源：互联网 发布：js获取id下面的div 编辑：程序博客网 时间：2024/06/07 07:18
我不怕万人阻挡，只怕自己投降
一个新进前端小白实习僧的初次探索
在学校的时候写过几个静态页面、用过一些简单的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）
1 0
- 一个新进前端小白实习僧的初次探索
- 某度实习的前端小白进化史--Homebrewde
- 初次接触一个新的技术
- CSS之分离-前端小白的探索
- 1.一个小白初次接触Android
- 一个前端小白的苦恼！
- NLTK工具初次尝试时发现的一个小细节
- 我是小李子,一个前端小白!
- 一个前端刚入门的小白的独白
- 一个前端小白的面试之路
- 一个前端小白的渐进之路
- 一个前端小白的渐进之路
- 一个前端小白的渐进之路
- 一个前端小白的渐进之路
- 一个前端小白的蜕变之路
- 前端测试的探索
- 一个准大四小程序猿的暑期实习总结
- 一个优雅地探索相关性的新可视化方法
- 深入剖析ConcurrentHashMap(1)
- SetWindowLong 用法
- 在QTableWidget的列头增加Checkbox
- 符咒AA4属性转移模块
- ORACLE简单的存储过程
- 一个新进前端小白实习僧的初次探索
- java应用技术 3(5)
- 冯诺依曼体系结构与哈弗体系结构的区别
- 【存储程序】UDFs信息存储在哪里
- 深入剖析ConcurrentHashMap(2)
- 模拟器快捷键操作
- java应用技术 3(6)
- sql server 树状结构表中,获取指定节点的所有父节点路径
- Struts2-paramsPrepareParamsStack 拦截器栈
