博客列表 >JavaScript做一个简易购物车和JSON的理解

JavaScript做一个简易购物车和JSON的理解

Pharaoh
Pharaoh原创
2022年08月01日 11:19:39491浏览

购物车

思路:利用单选按钮的事件进行判断,如果单选按钮事件属性返回false,就用动态渲染的总价减去单品的总价,反之就相加

  1. function selectall() {
  2. // 选择当前单选框的状态
  3. let stauts = event.target.checked;
  4. // 根据单选框的状态,给所有产品添加状态
  5. document
  6. .querySelectorAll('.product input[type="checkbox"]')
  7. .forEach((ele) => (ele.checked = stauts));
  8. }
  9. function selectsome() {
  10. // 选中所有产品单选框
  11. let sums = document.querySelectorAll('.product input[type="checkbox"]');
  12. // 通过every()方法遍历接收判断:所有产品的单选框都为真就返回真,否则返回假
  13. let stauts = [...sums].every((ele) => ele.checked === true);
  14. // 把状态给全选框
  15. document.querySelector(".all").checked = stauts;
  16. // 丑陋,冗余的代码,肯定有更好的思路修改
  17. // 监听单选框,如果没选择中某个单选框
  18. if (event.target.checked === false) {
  19. // 选中它父级下的单品总价,用总价减去单品总价
  20. document.querySelector(".allvalue").textContent =
  21. parseInt(document.querySelector(".allvalue").textContent) -
  22. parseInt(
  23. event.target.parentElement.querySelector("span:last-of-type")
  24. .textContent
  25. );
  26. } else {
  27. document.querySelector(".allvalue").textContent =
  28. parseInt(document.querySelector(".allvalue").textContent) +
  29. parseInt(
  30. event.target.parentElement.querySelector("span:last-of-type")
  31. .textContent
  32. );
  33. }
  34. }
  35. // 计算总数
  36. function productsum(arr) {
  37. // 传进所有数量的数组,用reduce()方法返回计算后物品总数量
  38. return arr.reduce((sum1, sum2) => sum1 + sum2);
  39. }
  40. // 计算单个物品总价
  41. function productprice(sum, price) {
  42. // 传进数量数组和单价数组,利用map()方法遍历单价数组里的每个单价
  43. // 返回每个单价乘以数量数组的相同索引位置的数量
  44. return price.map((ele, index) => ele * sum[index]);
  45. }
  46. // 计算总价
  47. function allprice(pricearr) {
  48. // 传入单个物品总价的数组,计算所有产品的总价
  49. return pricearr.reduce((num1, num2) => num1 + num2);
  50. }
  51. // 动态渲染页面,把计算后数据放在各自的位置
  52. function go() {
  53. // 产品数量
  54. let sums = document.querySelectorAll('input[type="number"]');
  55. // 利用map()方法遍历类数组,返回纯数字元素的数组
  56. let sumsarr = [...sums].map((ele) => parseInt(ele.value));
  57. // 产品单价
  58. let price = document.querySelectorAll(".product > span:nth-of-type(2)");
  59. // 利用map()方法遍历类数组,返回纯数字元素的数组
  60. let parr = [...price].map((ele) => parseInt(ele.textContent));
  61. // 产品总价
  62. // 1. 先算出单品的总数
  63. let numarr = productsum(sumsarr);
  64. // 2. 先算出单品的总价
  65. let pricearr = productprice(sumsarr, parr);
  66. // 渲染单品总价数据
  67. document
  68. .querySelectorAll(".product > span:last-of-type")
  69. .forEach((ele, index) => (ele.textContent = pricearr[index]));
  70. // 3. 算数所有产品的总价
  71. let amount = allprice(pricearr);
  72. // 渲染产品总价
  73. document.querySelector(".allvalue").textContent = amount;
  74. }
  75. window.onload = go;
  76. document
  77. .querySelectorAll('input[type="number"]')
  78. .forEach((ele) => (ele.onchange = go));
  79. // 总价只计算单选框选中的价格,怎么实现?
  80. // 算总价时,如果单选框状态为true,则总价加上单品总价,如果状态为false则减
  81. // 单个产品的总价怎么拿?
  82. // 直接选择动态渲染的单品总价,再利用单选框的事件触发判断

JSON

个人理解JSON是数据的一种格式,它用于传递数据,是轻量级的

WEB请求通信过程

1.浏览器通过DNS服务器将域名解析成IP地址,建立浏览器与web服务器的连接 (这里涉及到 DNS 域名解析技术)
2.浏览器根据源目ip地址等信息封装HTTP请求包发送给目标web服务器(这里涉及到 HTTP/HTTPS通信协议)
3.目标web服务器收到HTTP请求并解析,根据请求调用数据库并返回资源(这里涉及到 Web 后端开发 / 数据库 / 容器 / 框架/ 操作系统等技术)
4.网站资源包括网页,文档,视频,音频,图片等,封装为HTTP响应包传输给浏览器这里涉及到 HTTP/HTTPS通信协议)
5.web服务器关闭连接

总结

DNS解析-建立TCP连接-发送请求数据包-返回响应数据包-关闭TCP连接-浏览器渲染响应页面

实例

  • JSON.stringify() 编码,返回包含 JSON 文本的字符串
  • JSON.parse() 解码,返回JS对象

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议