实现简单购物车功能

最新推荐文章于 2023-04-06 12:18:27 发布
最新推荐文章于 2023-04-06 12:18:27 发布
阅读量391 收藏 3
点赞数
分类专栏： js动态效果 文章标签： 函数 js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yanner_/article/details/78319150
版权

说明：选择需要购买的物品，计算总价。

<!DOCTYPE html>
<html>
<head></body>
<link href="sohudiv.css" rel="stylesheet" type="text/css"/>
<script language="javascript" type="text/javascript">
function gouwu(obj){
    var fruits= document.getElementsByName("fruit");    
    var totalPrice=0;
    //遍历所有的checkbox，计算新的总价
    for(var i=0;i<fruits.length;i++){
        //判断是否选择
        if(fruits[i].checked){
            totalPrice+=parseFloat(fruits[i].value);
        }
    }
    myspan.innerText=totalPrice+"元";    
}

function selectCheck(obj){
    var fruits=document.getElementsByName("fruit");
    if(obj.innerText=='全选'){
        for(i=0;i<fruits.length;i++){
            fruits[i].checked=true;
        }
    }else{
        for(i=0;i<fruits.length;i++){
            fruits[i].checked=false;
        }
    }   
}

//响应复选框
function selectCheck2(){
    var fruits=document.getElementsByName("fruit");
    if(myselect.checked){
        for(i=0;i<fruits.length;i++){
            fruits[i].checked=true;
        }       
    }else{
        for(i=0;i<fruits.length;i++){
        fruits[i].checked=false;
        }
    }
}
</script>
<body>
<h1>我的购物车</h1>
<input type="checkbox" name="fruit" onclick="gouwu(this)" value="10"/>苹果10元<br/>
<input type="checkbox" name="fruit" onclick="gouwu(this)" value="20"/>香蕉20元<br/>
<input type="checkbox" name="fruit" onclick="gouwu(this)" value="30"/>西瓜30元<br/>
<input type="checkbox" name="fruit" onclick="gouwu(this)" value="40"/>栗子40元<br/>
<input type="checkbox" name="fruit" onclick="gouwu(this)" value="50"/>哈密瓜50元<br/>
<p>总价格是<span id="myspan">0元</span></p>
<a href="#" onclick="selectCheck(this)">全选</a>
<a href="#" onclick="selectCheck(this)">取消</a><br/>
<input type="checkbox" id="myselect" onclick="selectCheck2()"/>是否全选
</body>
</html>
yanner_
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
简单实现购物车
lxsynl_的博客
08-24 373
iew物车首页布局   &lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" ...
简易购物车的实现
Wendy
09-09 7634
网上关于购物车实现的代码非常多，今天看了一些知识点，决定自己动手写写，于是写了一个简易购物车，接下来讲解一下具体的实现。 1、用html实现内容； 2、用css修饰外观； 3、用js(jq)设计动效。   第一步：首先是进行html页面的设计，我用一个大的div将所有商品包含，然后用不同的div将不同的商品进行封装，商品列表中我用了ul li实现，具体实现代码如下（代码中设计到都是网上随
前端实现购物车功能
cyj0919的博客
04-06 687
【代码】前端实现购物车功能。
javascript实现简单购物车功能（有图）
热门推荐
Of_the的博客
08-09 3万+
Js实现淘宝购物车类似功能： 主要有添加商品 增加和减少商品数量 根据增加、减少或选择的商品获取金额 实现商品价格的计算 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;购物车&lt;/title&
购物车的简单实现
Key_p的博客
10-22 478
下面是购物车MVP效果的简单实现 首先是布局 这是Activity_main布局 这个是Activity_goods布局 这是Activity_car布局 这是rv_item_car布局 这是rv_item_goods布局 接下来就是各个类的代码 MainActivity类 import android.conten
Android实现简单购物车功能
01-06
本文实例为大家分享了Android实现购物车功能的具体代码，供大家参考，具体内容如下 MainActivity布局： <?xml version=1.0 encoding=utf-8?> android:layout_width=match_parent android:layout_height=...
JSP+Servlet实现简易购物车功能
11-14
本项目“JSP+Servlet实现简易购物车功能”就是一个典型的示例，它展示了如何利用这两者来创建一个基本的在线购物系统。以下是关于这个项目及其涉及的技术点的详细解释： 1. **JSP（JavaServer Pages）**：JSP是一种...
Android Studio实现简单购物车功能
08-27
Android Studio实现简单购物车功能 Android Studio是一个功能强大的集成开发环境（Integrated Development Environment，IDE），广泛应用于Android应用开发。今天，我们将介绍如何使用Android Studio实现简单的...
vue.js实现简单购物车功能
11-20
在本示例中，我们将探讨如何使用Vue.js来实现一个简单的购物车功能。Vue.js是一个流行的前端JavaScript框架，它提供了一种声明式的数据绑定和组件化的方法，使得构建用户界面更加简便。在这个小项目中，我们将实现...
JS+HTML5实现的前端购物车功能插件实例【附demo源码下载】
10-21
主要介绍了JS+HTML5实现的前端购物车功能插件,结合完整实例形式分析了JS结合HTML5的storage特性存储数据实现购物车功能的相关操作技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
简单的购物车
本人学习java的笔记
08-18 479
超简单的购物车，JQuery 版本为jquery-1.9.1.js 框架为老师给的，购物车的商品总数和总价 根据是否选中而变化 jq和html代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>我的购物车-京东商城</title> &...
购物车简单的物品“删除”“加减”------（-）
网站开发初中级代码参考-转载
11-02 284
Carlist.php &lt;?php session_start(); //识别用户身份 //记录不同页面跳转后的商品情况 ?&gt; &lt;!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&g...
js 购物车基本功能的实现
我的博客
08-14 9593
先上一个效果图 步骤： ① 用js语句画页面（for循环创建四个元素） ② 实现全选功能：当全选的checked为true时，所有元素被选中（包括checked为true和被背景变为粉色）。当全选的checked为flase时，所有元素不被选中。当点击全选按钮时，反选按钮取消选中 ③ 实现反选功能：当反选按钮被选中时，选中点击前未被选中的元素，并且全选按钮取消选中 ④ 实现单选功能：当有一个元...
利用JSP与JS实现简易购物车
七进制的博客
12-20 1万+
自己编写的一个简易购物网站示例： 示例代码运行的结果：carts.jsp文件<%@ page contentType="text/html;charset=GBK" %> <%@ page import="java.util.*,java.sql.*" %> <% Class.forName("sun.jdbc.odbc.JdbcOdbcDriver"); String
简易的购物车功能实现 --- 19/03/20
HimeYui的博客
03-20 529
本次使用的JS包为JQuery2.0版本 简单的实现界面： 以下为实现代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ ...
JS实现购物车功能
bafangcio的博客
05-29 5719
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;操作当当购物车页面&lt;/title&gt; &lt;link type="text/css" rel="sty
Session简单实现购物车功能
Widsom的博客
03-01 1万+
Session简单实现购物车功能这个小程序主要就3个页面，一个商品列表页面(HomeServlet)，一个是提示加入购物车页面(AddCartTipServlet)，一个是显示购物车清单页面(ShowCartServlet)。HomeServlet页面：@WebServlet({ "/HomeServlet", "/home" }) public class HomeServlet extends
Android Studio 实现简单购物车功能
最新发布
06-01
要实现简单的购物车功能，你需要完成以下几个步骤： 1. 创建一个购物车界面，用于展示用户已选的商品和总价。 2. 创建一个商品列表界面，用于展示所有商品的信息和价格。 3. 在商品列表中添加“加入购物车”按钮，用户点击该按钮时，将对应的商品信息添加到购物车中。 4. 在购物车界面中展示用户已选的商品信息和总价，并提供“删除”或“修改数量”等操作。 5. 最后，实现结算功能，将用户的购物车信息传递到支付页面。 下面是一个简单的实现过程： 1. 创建购物车界面 - 在 XML 中创建一个 RecyclerView，用于展示用户已选的商品信息。 - 在 Adapter 中实现购物车列表的逻辑，包括展示商品信息和价格，以及提供删除或修改数量等操作。 - 在 XML 中添加一个 TextView，用于展示购物车总价。 2. 创建商品列表界面 - 在 XML 中创建一个 RecyclerView，用于展示所有商品的信息和价格。 - 在 Adapter 中实现商品列表的逻辑，包括展示商品信息和价格，以及添加“加入购物车”按钮的逻辑。 - 在点击“加入购物车”按钮时，将对应的商品信息添加到购物车中。 3. 实现购物车逻辑 - 创建一个单例类 ShoppingCart，用于存储用户已选的商品信息和总价。 - 在点击“加入购物车”按钮时，将对应的商品信息添加到 ShoppingCart 中。 - 在购物车界面中展示用户已选的商品信息和总价，并提供删除或修改数量等操作。 4. 实现结算功能 - 创建一个支付页面，用于展示用户的购物车信息和总价。 - 在购物车界面中添加一个“结算”按钮，点击该按钮时，将用户的购物车信息传递到支付页面。 - 在支付页面中展示用户的购物车信息和总价，并提供支付功能。 以上是一个简单的购物车功能实现过程，你可以根据自己的需求进行适当的修改和优化。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值