ASCII码 ASCII码

js-基础（七）双色球、选项卡、购物车

发布于：2022-04-27 16:58:13  栏目：技术文档

1.双色球

  1. <body>
  2.     <div class="box"></div>
  3.     <script>
  4.         let redarr = [];
  5.         let resultarr = [];
  6.         //1.生成1-33个红球
  7.         for(let i = 1;i <= 33;i++){
  8.             redarr.push(i);
  9.         }
  10.         console.log(redarr);
  11.         // 2.从33个红球中取出6个
  12.         for(let i = 0;i < 6; i++){
  13.             let index = Math.floor(Math.random() * redarr.length);
  14.             resultarr.push(redarr[index]);
  15.             // 会出现重复
  16.             redarr.splice(index,1);
  17.         }
  18.         resultarr.sort((a,b)=>a-b);
  19.         console.log(resultarr);
  20.         //3. 生成一个蓝球, 并追加到中奖数组中
  21.         let blue = Math.floor(Math.random() * 16)+1;
  22.         console.log(blue);
  23.         resultarr.push(blue);
  24.         console.log(resultarr);
  25.         // 4. 将中奖号码显示到页面中
  26.         const box = document.querySelector(".box");
  27.         resultarr.forEach(item=>{
  28.             const ball = document.createElement('div');
  29.             ball.textContent = item;
  30.             box.append(ball);
  31.         });
  33.     </script>
  34.     <style>
  35.         .box {
  36.             display: grid;
  37.             grid-template-columns: repeat(auto-fill, 30px);
  38.             grid-auto-rows: 30px;
  39.             gap: 5px;
  40.         }
  42.         .box>div {
  43.             border-radius: 50%;
  44.             display: grid;
  45.             place-items: center;
  46.             background-color: red;
  47.             color: white;
  48.             box-shadow: 2px 2px 2px #666;
  49.         }
  51.         .box>div:last-of-type {
  52.             background-color: blue;
  53.         }
  54.     </style>
  55. </body>

2.选项卡

  1. function show(){
  2.             // 事件绑定者
  3.             //console.log(event.currentTarget);
  4.             //事件主体
  5.             //console.log(event.target);
  6.             const ul = event.currentTarget;
  7.             const li = event.target;
  8.             // 1. 将原高亮的标签去掉active,并把当前的标签设置为active
  9.             [...ul.children].forEach(li=>
  10.             li.classList.remove('active'));
  11.             li.classList.add('active');
  12.             // 2. 根据标签的data-index进行查询,获取与它对应的列表
  13.             const content = document.querySelectorAll('.content');
  14.             content.forEach(li=>li.classList.remove('active'));
  15.             [...content].find(ul=>ul.dataset.index === li.dataset.index ).classList.add('active');
  16.         }

3.购物车

相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行