1.双色球
<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>
2.选项卡
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'); }
3.购物车
<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.every let 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>
