![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
PHPzCorrection status：qualified
Teacher's comments：
Collection
Collection
<body><div class="box"></div><script>let redarr = [];let resultarr = [];//1.生成1-33个红球for(let i = 1;i <= 33;i++){redarr.push(i);}console.log(redarr);// 2.从33个红球中取出6个for(let i = 0;i < 6; i++){let index = Math.floor(Math.random() * redarr.length);resultarr.push(redarr[index]);// 会出现重复redarr.splice(index,1);}resultarr.sort((a,b)=>a-b);console.log(resultarr);//3. 生成一个蓝球, 并追加到中奖数组中let blue = Math.floor(Math.random() * 16)+1;console.log(blue);resultarr.push(blue);console.log(resultarr);// 4. 将中奖号码显示到页面中const box = document.querySelector(".box");resultarr.forEach(item=>{const ball = document.createElement('div');ball.textContent = item;box.append(ball);});</script><style>.box {display: grid;grid-template-columns: repeat(auto-fill, 30px);grid-auto-rows: 30px;gap: 5px;}.box>div {border-radius: 50%;display: grid;place-items: center;background-color: red;color: white;box-shadow: 2px 2px 2px #666;}.box>div:last-of-type {background-color: blue;}</style></body>
function show(){// 事件绑定者//console.log(event.currentTarget);//事件主体//console.log(event.target);const ul = event.currentTarget;const li = event.target;// 1. 将原高亮的标签去掉active,并把当前的标签设置为active[...ul.children].forEach(li=>li.classList.remove('active'));li.classList.add('active');// 2. 根据标签的data-index进行查询,获取与它对应的列表const content = document.querySelectorAll('.content');content.forEach(li=>li.classList.remove('active'));[...content].find(ul=>ul.dataset.index === li.dataset.index ).classList.add('active');}
<script>// 一. 全选function checkAll(){//1.全选按钮状态let status = document.querySelector('.check-all').checked;console.log(status);// 2. 根据状态动态设置所有商品的状态let items = document.querySelectorAll('.list li input[type="checkbox"]');console.log(items);items.forEach(item=>(item.checked=status));autoCalculate();}// 二. 根据用户选择来动态设置全选状态function checkItems(){// 1. 拿到全部商品let items = document.querySelectorAll('.list li input[type="checkbox"]');// 2. 判断状态,只有全部被选择,才需要设置全选为true, array.everylet status = [...items].every(item=>item.checked === true);console.log(status);// 3. 将这个新状态设置到全选按钮document.querySelector('.check-all').checked = status;autoCalculate();}//三、商品自动计算 所有计算都是基于商品数量的变化const nums = document.querySelectorAll('.num');console.log(nums);nums.forEach(item=>console.log(item.value));//1.判断选中function selectstatus(numArr){let items = document.querySelectorAll('.list li input[type="checkbox"]');console.log(items);return numArr.map((num, index) => {if(items[index].checked === false){return num = 0;}else{return num;}})}//2.计算总数量function getTotalNum(numArr){numArr = selectstatus(numArr);console.log(numArr);return numArr.reduce((acc,cur)=>acc+cur);}//3. 计算每个商品的金额function getAmount(numArr, priceArr){//金额=数量*单价return numArr.map((num,index)=>num*priceArr[index]);}//console.log(getTotalNum([1,2,3]));// console.log(getAmount([1, 2, 3], [100, 200, 300]));//4.计算总金额function getTatalAmount(amountArr){amountArr = selectstatus(amountArr);return amountArr.reduce((acc,cur)=>acc+cur);}//5.自动计算function autoCalculate(){//商品数量数组const numArr = [...nums].map(num=>parseInt(num.value));console.log(numArr);//单价数组const prices = document.querySelectorAll('.price');console.log(prices);const priceArr = [...prices].map(price=>parseInt(price.textContent));console.log(priceArr);//金额数组const amountArr = getAmount(numArr,priceArr);console.log(amountArr);//总数量console.log(getTotalNum(numArr));document.querySelector('.total-num').textContent = getTotalNum(numArr);//总金额document.querySelector('.total-amount').textContent = getTatalAmount(amountArr);//// 为每个商品填充金额document.querySelectorAll('.amount').forEach((amount,index)=>(amount.textContent = amountArr[index]));}//6.当页面加载的时候自动计算window.onload = autoCalculate;//7.当数量更新时，自动计算所有数据nums.forEach(num=>(num.onchange = autoCalculate));</script>
