Seko AI短剧一键生成成片 立刻MV 低成本歌曲 MV、视频生成 剧云 中文短剧剧本制作平台 Laper 剧本策划到成片协作

实现购物车商品数量加减及小计商... 登录

下一节课程: 统计购物车所有勾选商品的总价 (1365次播放)

5 秒后自动播放下一节
  重新观看
介绍 >

前端实战原生布局—(小米商城)

难度:初级 共25节 38959次学习

新课:PHP零基础(CMS开发)教学!

立即报名
章节 评论 笔记 课件
第1章 小米商城首页布局分解

前端布局实战介绍

05分钟49秒

首页布局分解(1)

12分钟12秒

首页布局分解(2)

14分钟31秒

首页布局分解(3)

18分钟05秒

首页布局分解(4)

24分钟00秒

商城底部布局(1)

23分钟57秒

商城底部布局(2)

16分钟26秒
第2章 小米商城首页导航分解

商城导航分解(顶部导航)

19分钟46秒

商城导航分解(下拉菜单1)

29分钟23秒

商城导航分解(下拉菜单2)

23分钟52秒

商城导航分解(侧边栏竖导航)

26分钟32秒

页面小导航

21分钟21秒
第3章 小米商城首页主体内容部分布局详解

商城主体内容布局详解(1)

22分钟53秒

商城主体内容布局详解(2)

20分钟35秒

商城主体内容布局详解(3)

12分钟27秒
第4章 小米商城登录页面布局详解

小米商城登录页面布局(1)

26分钟38秒

小米商城登录页面布局(2)

23分钟58秒

小米商城登录页面(js实现切换效果)

09分钟44秒
第5章 商品详情页布局及js效果

商品详情页面布局(1)

26分钟37秒

商品详情页面布局(2)

42分钟37秒

商品详情页面(jQuery效果)

39分钟07秒
第6章 购物车页面jQuery功能块

实现购物车商品全选

21分钟59秒

实现购物车商品数量加减及小计商品总价

16分钟43秒

统计购物车所有勾选商品的总价

19分钟52秒
第7章 总结

小米商城布局总结

06分钟20秒

全部评论我要评论

暂无评论~

全部笔记发布笔记

  • 过儿

    过儿7年前

    $(function(){ //鼠标移上变色 $('.fa-check-square').mouseover(function(){ if($(this).attr('class')!='fa fa-check-square checked'){ $(this).css('color','#ff6700'); } }) $('.fa-check-square').mouseleave(function(){ $(this).css('color','#fff'); }) //单选中效果 $('.fa-check-square').click(function(){ var cla=$(this).attr('class'); if(cla!='fa fa-check-square checked'){ $(this).attr('class','fa fa-check-square checked'); }else{ $(this).attr('class','fa fa-check-square'); } checkAll(); }) //全选效果 $('#select_all').click(function(){ var cla=$(this).attr('class'); if(cla!='fa fa-check-square checked'){ $('.fa-check-square').attr('class','fa fa-check-square checked'); }else{ $('.fa-check-square').attr('class','fa fa-check-square'); } }) //检查是否全选 function checkAll(){ var allitem=$('.list_item span[class*="fa-check-square"]').length; var checkeditem=$('.list_item span[class$="checked"]').length; if(allitem!=checkeditem){ $('#select_all').attr('class','fa fa-check-square'); }else{ $('#select_all').attr('class','fa fa-check-square checked'); } } //实现加法 $('.add').click(function(){ var nowvalue=$(this).siblings('input').val(); var nowvalue=parseInt(nowvalue); var currentvalue=0; var currentvalue=nowvalue+1; $(this).siblings('input').val(currentvalue); var per_price=$(this).parents('.cal_num').siblings('.per_price').children('p').html(); var per_price=parseFloat(per_price); var total_price=per_price*currentvalue; $(this).parents('.cal_num').siblings('.total_price').children('p').html(total_price+'元'); }) //实现剪法 $('.sub').click(function(){ var nowvalue=$(this).siblings('input').val(); var nowvalue=parseInt(nowvalue); var currentvalue=nowvalue; if(currentvalue>1){ currentvalue=nowvalue-1; }else{ currentvalue=1; } $(this).siblings('input').val(currentvalue); var per_price=$(this).parents('.cal_num').siblings('.per_price').children('p').html(); var per_price=parseFloat(per_price); var total_price=per_price*currentvalue; $(this).parents('.cal_num').siblings('.total_price').children('p').html(total_price+'元'); }) })

    0

  • hiki1987

    hiki19877年前

    //加减按钮 // siblings('input').val() 用于匹配input框里的val属性 $('.plus').click(function(){ var nowvalue=$(this).siblings('input').val() var nowvalue=parseInt(nowvalue) //把input框里的文本类型转换成整数parseInt // var currentvalue=0 //做下清零,加号这里可以不用,减号那里必须有 var currentvalue=nowvalue+1 $(this).siblings('input').val(currentvalue) // 前台单价的里面是3199元,有个中文,用parseFloat()方法只取数字 /*parents() 获得当前匹配元素集合中每个元素的祖先元素,这里是获取good-num的 祖先元素下的good-price里的html值*/ var danjia=parseFloat($(this).parents('.good-num').siblings('.good-price').html()) var xiaoji=danjia*currentvalue //在页面中输出 $(this).parents('.good-num').siblings('.good-total-price').html(xiaoji+'元') }) $('.minus').click(function(){ var nowvalue=$(this).siblings('input').val() var nowvalue=parseInt(nowvalue) //把input框里的文本类型转换成整数parseInt var currentvalue=0 //做下清零,加号这里可以不用,减号那里必须有 /*三元运算符(nowvalue<=1?)小于等于1就设置为1(?currentvalue=1) 否则:currentvalue=nowvalue-1 (nowvalue可以减-1)*/ nowvalue<=1?currentvalue=1:currentvalue=nowvalue-1 $(this).siblings('input').val(currentvalue) var danjia=parseFloat($(this).parents('.good-num').siblings('.good-price').html()) var xiaoji=danjia*currentvalue //在页面中输出 $(this).parents('.good-num').siblings('.good-total-price').html(xiaoji+'元') })

    1

  • 取消 回复 发送
  • 取消 发布笔记 发送