编程练习，用JS实现购物车特效教程-慕课网

第3章编程挑战
编程：3-1 编程挑战

编程练习

小伙伴们，根据所学知识，实现计算选项功能，当用户点击按钮时，计算出已选的总数，并显示结果，如果未选择，则隐藏结果。

效果图:

任务

一、监听确定按钮点击事件，计算选项中的已选数目，并根据数目来更新结果。

提示:
  1. 遍历所有的勾选框，计算出已选总数,存放在变量checked。
  2. 根据checked值更新结果，如果大于0，则更新结果的节点的innerHTML为已选数目并显示，反之，清空其innerHTML并隐藏。

说明: 任务在21和29行。

?不会了怎么办: 可参考下面代码或者在右下角"课件下载"区下载参考代码。

index.html

1
2
<!DOCTYPE html>
<html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

提交

自动运行

重置代码

全屏

请验证，完成请求

由于请求次数过多，请先验证，完成再次请求

问答
评论
笔记
资料下载
代码

全部精华我要发布

ok?

+ 我来回答回答最高可+2积分

3 回答 1069 浏览

2022-07-20

demo

+ 我来回答回答最高可+2积分

3 回答 892 浏览

2022-07-29

kjkgghjmfh

+ 我来回答回答最高可+2积分

1 回答 856 浏览

2022-06-03

// 遍历所有的勾选框，计算出已选总数,存放在变量checked
while(i < len) {
    if(inputs[i].checked) {
        checked++;
    }   
    i++;
}

//根据checked值更新结果
if(checked){
    ret.textContent = checked;
    ret.style.display = "block";
}else{
    ret.textContent = "";
    ret.style.display = "none";
}

+ 我来回答回答最高可+2积分

3 回答 1611 浏览

2022-08-08

mark

+ 我来回答回答最高可+2积分

15 回答 1092 浏览

2022-08-08

根据参考课件我觉得中间是不需要用while循环，可以用for代替的

+ 我来回答回答最高可+2积分

6 回答 1258 浏览

2022-09-10

全部我要发布

最热最新

只看我的

2-6 编程练习（参考代码）立即下载
2-8 编程练习（参考代码）立即下载
2-11 编程练习（参考代码）立即下载
2-13 编程练习（参考代码）立即下载
购物车（源代码）立即下载

2-6 编程练习

编程练习

任务

提问题

其他问答

写笔记

您还未绑定服务号

收藏课程后，能更快找到我哦～

ok?

demo

kjkgghjmfh

// 遍历所有的勾选框，计算出已选总数,存放在变量checked while(i < len) { if(inputs[i].checked) { checked++; } i++; } //根据checked值更新结果 if(checked){ ret.textContent = checked; ret.style.display = "block"; }else{ ret.textContent = ""; ret.style.display = "none"; }

mark

根据参考课件我觉得中间是不需要用while循环，可以用for代替的

推荐课程

推荐路线系统化学习，打造阶梯学习模式

手记推荐

2-6 编程练习

热搜

最近搜索清空

编程练习

任务

提问题

其他问答

写笔记

您还未绑定服务号

收藏课程后，能更快找到我哦～

ok?

demo

kjkgghjmfh

// 遍历所有的勾选框，计算出已选总数,存放在变量checked while(i < len) { if(inputs[i].checked) { checked++; } i++; } //根据checked值更新结果 if(checked){ ret.textContent = checked; ret.style.display = "block"; }else{ ret.textContent = ""; ret.style.display = "none"; }

mark

根据参考课件我觉得中间是不需要用while循环，可以用for代替的

推荐课程

推荐路线系统化学习，打造阶梯学习模式

相关课程

手记推荐

账号登录 验证码登录

账号登录验证码登录