charset="UTF-8"/>http-equiv="X-UA-Compatible"content="IE=edge"/>name=,原生购物车" /> charset="UTF-8"/>http-equiv="X-UA-Compatible"content="IE=edge"/>name=,原生购物车" />
首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

原生购物车

作者：罗kowalske | 来源：互联网 | 2023-08-09 08:18
lang="en"> charset="UTF-8" /> http-equiv="X-UA-Compatible" content="IE=edge" /> name=

  2. lang="en">
  4. charset="UTF-8" />
  5. http-equiv="X-UA-Compatible" content="IE=edge" />
  6. name="viewport" content=" />
  7. rel="stylesheet" href="style.css" />
  31. class="amount">0
  40. class="amount">0
  49. class="amount">0
  58. class="amount">0
  67. class="amount">0
  72. colspan="5">总计

  78. 我的购物车

  80. type="checkbox" name="checkAll" id="checkAll" checked />
  81. for="checkAll">全选
    		83. 图片品名单位单价/元数量金额/元
  83. type="checkbox" name="item" class="item" checked />
  85. src="images/p1.png" />
    		87. Javascript权威指南（第七版）本100
  87. type="number" class="num" min="1" value="1" />
  89. type="checkbox" name="item" class="item" checked />
  91. src="images/p2.png" />
    		93. Javascript权威指南（第七版）本200
  93. type="number" class="num" min="1" value="1" />
  95. type="checkbox" name="item" class="item" checked />
  97. src="images/p3.png" />
    		99. Javascript权威指南（第七版）本300
  99. type="number" class="num" min="1" value="1" />
  101. type="checkbox" name="item" class="item" checked />
  103. src="images/p4.png" />
    		105. Javascript权威指南（第七版）本400
  105. type="number" class="num" min="1" value="1" />
  107. type="checkbox" name="item" class="item" />
  109. src="images/p5.png" />
    		111. Javascript权威指南（第七版）本500
  111. type="number" class="num" min="1" value="1" />
    113. 00

  1. * {
  2. margin: 0;
  3. padding: 0;
  4. box-sizing: border-box;
  5. }
  7. html {
  8. font-size: 10px;
  9. }
  11. body {
  12. font-size: 1.6rem;
  13. }
  15. /* table样式 */
  17. /* 表格*/
  18. table {
  19. margin: 0 auto;
  20. border-collapse: collapse;
  21. }
  23. input,
  24. label:hover {
  25. cursor: pointer;
  26. }
  28. /* 隔行变色 */
  29. tr:nth-of-type(even) {
  30. background-color: gainsboro;
  31. }
  33. caption {
  34. margin: 1rem 0;
  35. }
  37. /* tbody样式 */
  38. thead {
  39. background-color: green;
  40. color: white;
  41. }
  43. tfoot {
  44. background-color: lightblue;
  45. }
  47. /* 设置边框线 */
  48. th,
  49. td {
  50. text-align: center;
  51. padding: 1rem;
  52. }
  53. /* 图片大小 */
  54. td > img {
  55. width: 3em;
  56. height: 3em;
  57. }

  1. /**
  2. * 当页面加载成功后计算选中商品的价格和数目
  3. * */
  4. window.onload = autoCalculate;
  6. //获取“全选"按钮元素
  7. let checkAllBtn = document.querySelector("#checkAll");
  8. //获取多选框元素
  9. let checkBoxArr = document.querySelectorAll("input[name='item']");
  11. /**
  12. * 全选与全不选
  13. */
  14. // checkAllBtn.Onclick= function (ev) {
  15. // checkBoxArr.forEach(function (item) {
  16. // item.checked = ev.target.checked;
  17. // });
  18. // };
  19. //上面注释的简化形式
  20. checkAllBtn.onclick = (ev) =>
  21. checkBoxArr.forEach((item) => (item.checked = ev.target.checked));
  22. //每次点击也要计算一次数据
  23. checkAllBtn.onchange = autoCalculate;
  25. /**
  26. * 只有一个没有选中，全选框就不选中
  27. */
  28. checkBoxArr.forEach(function (item) {
  29. item.onclick = function () {
  30. let res = [...checkBoxArr].every(function (ite) {
  31. return ite.checked;
  32. });
  33. checkAllBtn.checked = res;
  34. };
  35. //每次点击也要计算一次数据
  36. item.onchange = autoCalculate;
  37. });
  39. // 获取产品单价元素
  40. let tdPriceArr = document.querySelectorAll("tr >td:nth-of-type(5)");
  41. let priceArr = [...tdPriceArr].map(function (ev) {
  42. return ev.textContent * 1;
  43. });
  44. //当数量发生变化的时候获取数量
  45. let tdNumArr = document.querySelectorAll(".num");
  46. //当每一个数量框发生变化时调用方法autoCalculate
  47. tdNumArr.forEach(function (ev) {
  48. ev.onchange = autoCalculate;
  49. });
  51. function autoCalculate() {
  52. let numArr = [...tdNumArr].map(function (item) {
  53. return item.value * 1;
  54. });
  55. // let p = [numArr, priceArr].reduce(function (prev, curr) {
  56. // let a = prev.map(function (item, index) {
  57. // return item * curr[index];
  58. // });
  59. // return a;
  60. // });
  61. //上面注释的简化
  62. // 计算每种商品的消耗的总金额，数量*单价
  63. let o = [numArr, priceArr].reduce((prev, curr) =>
  64. prev.map((item, index) => item * curr[index])
  65. );
  66. // 将价格放到每款产品后面
  67. let price = document.querySelectorAll(".amount");
  68. price.forEach(function (items, index) {
  69. items.textContent = o[index];
  70. });
  71. /**
  72. * 给总计赋值
  73. * 获取选中的tr,如果没有选中的tr则默认总计的地方都为0
  74. */
  75. let totleNum = document.querySelector("tfoot > tr > td:nth-of-type(2)");
  76. let totlePrice = document.querySelector("tfoot > tr > td:nth-of-type(3)");
  77. let checkArr = document.querySelectorAll("input[name='item']:checked");
  78. // console.log(checkArr.length);
  79. if (checkArr.length > 0) {
  80. // 获取选中的tr里面的价格
  81. let pricecarr = [...checkArr].map(function (ev) {
  82. return (
  83. ev.parentNode.parentNode.querySelector("td:nth-of-type(5)")
  84. .textContent * 1
  85. );
  86. });
  87. // 获取选中的tr里面的数量
  88. let numcarr = [...checkArr].map(function (ev) {
  89. return ev.parentNode.parentNode.querySelector(".num").value * 1;
  90. });
  91. let c = [numcarr, pricecarr].reduce((prev, curr) =>
  92. prev.map((item, index) => item * curr[index])
  93. );
  94. //总计里面的数据只计算选中的，不选中的不计算
  95. totleNum.textContent = numcarr.reduce(function (prev, curr) {
  96. return prev + curr;
  97. });
  98. totlePrice.textContent = c.reduce(function (prev, curr) {
  99. return prev + curr;
  100. });
  101. } else {
  102. totleNum.textContent = 0;
  103. totlePrice.textContent = 0;
  104. }
  105. }

推荐阅读
  • text

    MySQL显示SQL语句执行时间的实例详解

    本文详细介绍了如何使用MySQL来显示SQL语句的执行时间，并通过MySQL Query Profiler获取CPU和内存使用量以及系统锁和表锁的时间。同时介绍了效能分析的三种方法：瓶颈分析、工作负载分析和基于比率的分析。 ... [详细]
  • foreach

    关于Linq to sql 实现 模糊查询 string数组

    前景：当UI一个查询条件为多项选择，或录入多个条件的时候，比如查询所有名称里面包含以下动态条件，需要模糊查询里面每一项时比如是这样一个数组条件：newstring[]{兴业银行, ... [详细]
  • foreach

    Smarty / views / templates中的数据库调用 - Database calls in Smarty/views/templates

    Todayatworksomeonetriedtoconvincemethat:今天在工作中有人试图说服我:{$obj->getTableInfo()}isfine ... [详细]
  • foreach

    php缓存ri,浅析ThinkPHP缓存之快速缓存(F方法)和动态缓存(S方法)(日常整理)

    php缓存ri,浅析ThinkPHP缓存之快速缓存(F方法)和动态缓存(S方法)(日常整理)
    thinkPHP的F方法只能用于缓存简单数据类型，不支持有效期和缓存对象。S()缓存方法支持有效期，又称动态缓存方法。本文是小编日常整理有关thinkp ... [详细]
  • foreach

    如何按页码访问OpenXML内容？

    本文介绍了如何使用OpenXML按页码访问文档内容，以及在处理分页符和XML元素时的一些挑战。同时，还讨论了基于页面的引用框架的局限性和超越基于页面的引用框架的方法。最后，给出了一个使用C#的示例代码来按页码访问OpenXML内容的方法。 ... [详细]
  • select

    SQL日志收缩及截断方法详解

    本文详细介绍了SQL日志收缩的方法，包括截断日志和删除不需要的旧日志记录。通过备份日志和使用DBCC SHRINKFILE命令可以实现日志的收缩。同时，还介绍了截断日志的原理和注意事项，包括不能截断事务日志的活动部分和MinLSN的确定方法。通过本文的方法，可以有效减小逻辑日志的大小，提高数据库的性能。 ... [详细]
  • text

    如何限制php数据库链接数和连接超时时间？

    本文介绍了如何使用php限制数据库插入的条数并显示每次插入数据库之间的数据数目，以及避免重复提交的方法。同时还介绍了如何限制某一个数据库用户的并发连接数，以及设置数据库的连接数和连接超时时间的方法。最后提供了一些关于浏览器在线用户数和数据库连接数量比例的参考值。 ... [详细]
  • foreach

    PHP实现断点续传乱序合并文件的方法和源码

    本文介绍了使用PHP实现断点续传乱序合并文件的方法和源码。由于网络原因，文件需要分割成多个部分发送，因此无法按顺序接收。文章中提供了merge2.php的源码，通过使用shuffle函数打乱文件读取顺序，实现了乱序合并文件的功能。同时，还介绍了filesize、glob、unlink、fopen等相关函数的使用。阅读本文可以了解如何使用PHP实现断点续传乱序合并文件的具体步骤。 ... [详细]
  • text

    Voicewo在线语音识别转换jQuery插件的特点和示例

    Voicewo在线语音识别转换jQuery插件的特点和示例
    本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件，该插件具有快速、架构、风格、扩展和兼容等特点，适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]
  • text

    PHP中的单例模式与静态变量的区别及使用方法

    PHP中的单例模式与静态变量的区别及使用方法
    本文介绍了PHP中的单例模式与静态变量的区别及使用方法。在PHP中，静态变量的存活周期仅仅是每次PHP的会话周期，与Java、C++不同。静态变量在PHP中的作用域仅限于当前文件内，在函数或类中可以传递变量。本文还通过示例代码解释了静态变量在函数和类中的使用方法，并说明了静态变量的生命周期与结构体的生命周期相关联。同时，本文还介绍了静态变量在类中的使用方法，并通过示例代码展示了如何在类中使用静态变量。 ... [详细]
  • text

    南邮ctf-web的writeup

    本文介绍了南邮ctf-web的writeup，包括签到题和md5 collision。在CTF比赛和渗透测试中，可以通过查看源代码、代码注释、页面隐藏元素、超链接和HTTP响应头部来寻找flag或提示信息。利用PHP弱类型，可以发现md5('QNKCDZO')='0e830400451993494058024219903391'和md5('240610708')='0e462097431906509019562988736854'。 ... [详细]
  • text

    深入理解CSS中的margin属性及其应用场景

    深入理解CSS中的margin属性及其应用场景
    本文主要介绍了CSS中的margin属性及其应用场景，包括垂直外边距合并、padding的使用时机、行内替换元素与费替换元素的区别、margin的基线、盒子的物理大小、显示大小、逻辑大小等知识点。通过深入理解这些概念，读者可以更好地掌握margin的用法和原理。同时，文中提供了一些相关的文档和规范供读者参考。 ... [详细]
  • text

    单击时动态创建
  • 元素 - Dynamically create
  • element on click

    • Ihavethefollowingonhtml我在html上有以下内容<html><head><scriptsrc..3003_Tes ... [详细]
  • foreach

    php二维数组排序后获取最大值

    本文介绍了如何对PHP二维数组进行排序以及如何获取最大值。同时还提到了在数据分析系统中使用排序的实例，以及如何统计角色等级和创建角色总数。 ... [详细]
  • foreach

    php tokenizer获取所有类,PHP Tokenizer 学习笔记

    简述在某个项目中需要分析PHP代码，分离出对应的函数调用(以及源代码对应的位置)。虽然这使用正则也可以实现，但无论从效率还是代码复杂度方面考虑ÿ ... [详细]
author-avatar
罗kowalske
这个家伙很懒，什么也没留下！
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有