PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

博客列表 > 双色球与购物车的基础学习

双色球与购物车的基础学习

阿杰
阿杰 原创
2022年04月10日 16:23:28 411浏览

一、双色球

  • css部分
  1. .bt{
  2. width: 13vw;
  3. line-height: 4vh;
  4. background: coral;
  5. text-align: center;
  6. border-radius: 10px;
  7. color: #fff;
  8. margin-bottom: 2vh;
  9. }
  10. .box {
  11. display: grid;
  12. grid-template-columns: repeat(auto-fill, 30px);
  13. grid-auto-rows: 30px;
  14. gap: 5px;
  15. }
  16. .box>div {
  17. border-radius: 50%;
  18. display: grid;
  19. place-items: center;
  20. background-color: red;
  21. color: white;
  22. box-shadow: 2px 2px 2px #666;
  23. }
  24. .box>div:last-of-type {
  25. background-color: blue;
  26. }
  • html 部分
  1. <div class="bt" onclick="play()">开奖</div>
  2. <div class="box"></div>
  • js部分
  1. function play(){
  2. // 临时数组: 放红球
  3. let arr = [];
  4. // 中奖数组,6个红球,1个蓝球
  5. let res = [];
  6. // 1. 生成1-33个红球
  7. for (let i = 1; i <= 33; i++) {
  8. arr.push(i);
  9. }
  10. // 2、在33个红球中随机不重复取出6个数
  11. for (let i = 0; i < 6; i++) {
  12. // 原理:取到一个,原数组就删掉对应的数
  13. let index = Math.floor(Math.random() * arr.length);
  14. res.push(arr[index]);
  15. arr.splice(index,1);
  16. }
  17. // 将取出的6个红球进行排序
  18. res.sort((a, b) => a - b);
  19. // 3、在1-16中随机取出一个蓝球
  20. let blue = Math.floor(Math.random() * 16) + 1;
  21. res.push(blue);
  22. // 4、显示双色球数组
  23. const box = document.querySelector('.box');
  24. res.forEach(item=>{
  25. const ball = document.createElement('div');
  26. ball.textContent = item;
  27. box.append(ball);
  28. });
  29. }

二、购物车

  • 基本布局
  1. <style>
  2. .box {
  3. width: 22em;
  4. height: 2em;
  5. }
  6. .list>li {
  7. height: 1.6em;
  8. background-color: #efefef;
  9. display: grid;
  10. grid-template-columns: repeat(5, 3em);
  11. gap: 1em;
  12. place-items: center right;
  13. border-bottom: 1px solid #ccc;
  14. }
  15. .list>li:first-of-type {
  16. background-color: lightseagreen;
  17. color: white;
  18. }
  19. .list>li:hover:not(:first-of-type) {
  20. cursor: pointer;
  21. background-color: lightcyan;
  22. }
  23. .list>li input[type='number'] {
  24. width: 3em;
  25. border: none;
  26. outline: none;
  27. text-align: center;
  28. font-size: 1em;
  29. background-color: transparent;
  30. }
  31. .list>li:last-of-type span.total-num,
  32. .list>li:last-of-type span.total-amount {
  33. grid-column: span 2;
  34. place-self: center right;
  35. color: lightseagreen;
  36. }
  37. .account {
  38. float: right;
  39. background-color: lightseagreen;
  40. color: white;
  41. border: none;
  42. outline: none;
  43. width: 4.5em;
  44. height: 1.8em;
  45. }
  46. .account:hover {
  47. background-color: coral;
  48. cursor: pointer;
  49. }
  50. </style>
  51. <div class="box">
  52. <div class="selectAll">
  53. <!-- checkAll(): 当全选按钮的状态发生变化化,触发该事件 change -->
  54. <input type="checkbox" class="check-all" name="check-all" onchange="checkAll()" checked />
  55. <label for="check-all">全选</label>
  56. </div>
  57. <ul class="list">
  58. <li><span>选择</span><span>品名</span><span>数量</span><span>单价</span><span>金额</span></li>
  59. <li>
  60. <input type="checkbox" onchange="checkItems()" checked />
  61. <span class="content">手机</span>
  62. <input type="number" value="1" min="1" class="num" />
  63. <span class="price">100</span>
  64. <span class="amount">0</span>
  65. </li>
  66. <li>
  67. <input type="checkbox" onchange="checkItems()" checked />
  68. <span class="content">电脑</span>
  69. <input type="number" value="2" min="1" class="num" />
  70. <span class="price">200</span><span class="amount">0</span>
  71. </li>
  72. <li>
  73. <input type="checkbox" onchange="checkItems()" checked />
  74. <span class="content">相机</span>
  75. <input type="number" value="3" min="1" class="num" />
  76. <span class="price">300</span>
  77. <span class="amount">0</span>
  78. </li>
  79. <li>
  80. <span>总计:</span>
  81. <span class="total-num">0</span>
  82. <span class="total-amount">0</span>
  83. </li>
  84. </ul>
  85. <button class="account">结算</button>
  86. </div>
  87. <script>
  88. // 1. 全选
  89. function checkAll() {
  90. // 1. 全选按钮状态
  91. let status = event.target.checked;
  92. // console.log(status);
  93. // 2. 根据状态动态设置所有商品的状态
  94. let items = document.querySelectorAll('.list li input[type="checkbox"]');
  95. items.forEach(item => (item.checked = status));
  96. // document
  97. // .querySelectorAll('.list li input[type="checkbox"]')
  98. // .forEach(item => (item.checked = event.target.checked));
  99. }
  100. // 2. 根据用户选择来动态设置全选状态
  101. function checkItems() {
  102. // 1. 拿到全部商品
  103. let items = document.querySelectorAll('.list li input[type="checkbox"]');
  104. // 2. 判断状态,只有全部被选择,才需要设置全选为true, array.every
  105. let status = [...items].every(item => item.checked === true);
  106. // console.log(status);
  107. // 3. 将这个新状态设置到全选按钮
  108. document.querySelector('.check-all').checked = status;
  109. // document.querySelector('.check-all').checked = [
  110. // ...document.querySelectorAll('.list li input[type="checkbox"]'),
  111. // ].every(item => item.checked === true);
  112. }
  113. // 商品自动计算
  114. // 所有计算都是基于商品数量的变化
  115. const nums = document.querySelectorAll('.num');
  116. console.log(nums);
  117. // nums.forEach(item => console.log(item.value));
  118. // 1. 计算总数量
  119. function getTotalNum(numArr) {
  120. return numArr.reduce((acc, cur) => acc + cur);
  121. }
  122. // 2. 计算每个商品的金额
  123. function getAmount(numArr, priceArr) {
  124. // 金额 = 数量 * 单价
  125. return numArr.map((num, index) => num * priceArr[index]);
  126. }
  127. // console.log(getAmount([1, 2, 3], [100, 200, 300]));
  128. // 3. 计算总金额
  129. function getTotalAmount(amountArr) {
  130. return amountArr.reduce((acc, cur) => acc + cur);
  131. }
  132. // 4. 自动计算
  133. function autoCalculate() {
  134. // 商品数量数组
  135. const numArr = [...nums].map(num => parseInt(num.value));
  136. console.log(numArr);
  137. // 单价数组
  138. const prices = document.querySelectorAll('.price');
  139. const priceArr = [...prices].map(price => parseInt(price.textContent));
  140. console.log(priceArr);
  141. // 金额数组
  142. const amountArr = getAmount(numArr, priceArr);
  143. console.log(amountArr);
  144. // 总数量
  145. console.log(getTotalNum(numArr));
  146. document.querySelector('.total-num').textContent = getTotalNum(numArr);
  147. // 总金额
  148. document.querySelector('.total-amount').textContent = getTotalAmount(amountArr);
  149. // 为每个商品填充金额
  150. document.querySelectorAll('.amount').forEach((amount, index) => (amount.textContent = amountArr[index]));
  151. }
  152. // 当页面加载的时候自动计算
  153. window.onload = autoCalculate;
  154. // 当数量更新时,自动计算所有数据
  155. nums.forEach(num => (num.onchange = autoCalculate));
  • 效果如下

  • 只计算选中商品,并同时更新相关数据
  1. // 商品数量数组
  2. const numArr = [...nums].map(num => {
  3. if(num.parentNode.children[0].checked){
  4. return parseInt(num.value)
  5. }else{
  6. return 0;
  7. }
  8. });
  • 效果如下

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