search

博客列表 >双色球、购物车js实战

双色球、购物车js实战

P粉317509817
P粉317509817原创
2022年04月11日 15:40:03374浏览

双色球

代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>双色球</title>
  8.     <style>
  9.         .winning-box{
  10.             height: 80px;
  11.             display: none;
  12.             grid-template-columns: repeat(7,50px);
  13.             gap:20px;
  14.             margin-top: 20px;
  15.             place-content: center;
  16.             place-items: center;
  17.         }
  18.         .winning-box .redNum{
  19.             width: 50px;
  20.             height: 50px;
  21.             border-radius: 50%;
  22.             display: grid;
  23.             place-items: center;
  24.             background-color: #DC1E0F;
  25.             padding: auto;
  26.             box-shadow: 3px 3px 2px gray;
  27.         }
  28.         .winning-box .blueNum{
  29.             width: 50px;
  30.             height: 50px;
  31.             border-radius: 50%;
  32.             display: grid;
  33.             place-items: center;
  34.             background-color: #2C8EFF;
  35.             padding: auto;
  36.             box-shadow: 3px 3px 2px gray;
  37.         }
  38.         .winning-box .redNum:hover,
  39.         .winning-box .blueNum:hover{
  40.             cursor: pointer;
  41.             width: 60px;
  42.             height: 60px;
  43.             transition: 0.5s;
  44.         }
  45.         .form{
  46.             display: flex;
  47.             gap: 20px;
  48.             place-content: center;
  49.         }
  50.         .form>li{
  51.             list-style: none;
  52.         }
  53.         span{
  54.             display: flex;
  55.             margin-top: 20px;
  56.             place-content: center   ;
  57.         }
  58.     </style>
  59. </head>
  60. <body>
  61.     <div>
  62.         <div class="winning-box">
  63.         </div> 
  64.     </div>
  65.     <span class="s">请输入您要选的号码</span>
  66.     <ul class="form">
  67.         <li><input type="number" name="" id="" class="number" max="33" min="0"></li>
  68.         <li><input type="number" name="" id="" class="number" max="33" min="0"></li>
  69.         <li><input type="number" name="" id="" class="number" max="33" min="0"></li>
  70.         <li><input type="number" name="" id="" class="number" max="33" min="0"></li>
  71.         <li><input type="number" name="" id="" class="number" max="33" min="0"></li>
  72.         <li><input type="number" name="" id="" class="number" max="33" min="0"></li>
  73.         <li><input type="number" name="" id="" class="number" max="16" min="0"></li>
  74.         <button onclick="getDate()">Submit</button>
  75.     </ul>
  77.     <script>
  78.         // 红球数组
  79.         let red = [];
  80.         // 蓝球数组
  81.         let blue = [];
  82.         // 中奖数组
  83.         let Award_Winning = [];
  84.         // 生成1-33的红球数组
  85.         for(let a=1;a<=33;a++){
  86.             red.push(a);
  88.         }
  89.         // console.log(red);
  91.         // 生成1-16的蓝球数组
  92.         for(let a = 1;a<=16;a++){
  93.                 blue.push(a);
  94.             }
  95.         // console.log(blue);
  96.         // 随机取红球
  97.         for (let a = 0;a < 6;a++){
  98.             let index = Math.floor(Math.random()*red.length);
  99.             Award_Winning.push(red[index]);
  100.             red.splice(index,1);
  101.         }
  102.         Award_Winning.sort((a,b)=> a-b);
  103.         let index = Math.floor(Math.random()*blue.length);
  104.         Award_Winning.push(blue[index]);
  105.         console.log(Award_Winning);
  106.         const winning = document.querySelector('.winning-box');
  107.         Award_Winning.forEach((item,index)=>{
  108.             if(index<=5){
  109.                 let div = document.createElement('div');
  110.                 div.className='redNum';
  111.                 div.textContent=Award_Winning[index];
  112.                 winning.append(div);
  113.             }else {
  114.                 let div = document.createElement('div');
  115.                 div.className='blueNum';
  116.                 div.textContent=Award_Winning[index];
  117.                 winning.append(div);
  118.             } 
  119.         });
  120.         const ul =document.querySelector('.form');
  121.         const box = document.querySelector('.winning-box');
  122.             function getDate(){
  123.             // 用户数组
  124.             let arr = [];
  125.             const li =document.querySelectorAll('.number');
  126.             li.forEach(a=>arr.push(parseInt(a.value)));
  127.             // console.log(arr)
  128.             // 对比中将数组输出是否中奖
  129.             let flag=0;
  130.             for (let i = 0;i<7;i++){
  131.                 for(let j=0;j<7;j++){
  132.                     if(arr[i]===Award_Winning[j]){
  133.                         flag++;
  134.                         break;
  135.                         // console.log(flag);
  136.                     }
  137.                 }
  138.             }
  139.             if(flag===7){
  140.                     let span=document.createElement('span');
  141.                     span.className='conguratulate';
  142.                     span.textContent='恭喜中奖';
  143.                     ul.insertAdjacentElement('afterend',span);
  144.                     box.style.display='grid';
  146.                 }
  147.                 else if(flag===0){
  148.                     let span=document.createElement('span');
  149.                     span.className='conguratulate';
  150.                     span.textContent=`很遗憾没有中奖！
  151.                     本期中奖号码如上`;
  152.                     ul.insertAdjacentElement('afterend',span);
  153.                     box.style.display='grid';
  154.                 }
  155.             }
  158. </script>
  159. </body>
  160. </html>

效果：

购物车

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <title>购物车</title>
  9.     <style>
  10.         .box {
  11.             width: 22em;
  12.             height: 2em;
  13.         }
  15.         .list>li {
  16.             height: 1.6em;
  17.             background-color: #efefef;
  18.             display: grid;
  19.             grid-template-columns: repeat(5, 3em);
  20.             gap: 1em;
  21.             place-items: center right;
  22.             border-bottom: 1px solid #ccc;
  23.         }
  25.         .list>li:first-of-type {
  26.             background-color: lightseagreen;
  27.             color: white;
  28.         }
  30.         .list>li:hover:not(:first-of-type) {
  31.             cursor: pointer;
  32.             background-color: lightcyan;
  33.         }
  35.         .list>li input[type='number'] {
  36.             width: 3em;
  37.             border: none;
  38.             outline: none;
  39.             text-align: center;
  40.             font-size: 1em;
  41.             background-color: transparent;
  42.         }
  44.         .list>li:last-of-type span.total-num,
  45.         .list>li:last-of-type span.total-amount {
  46.             grid-column: span 2;
  47.             place-self: center right;
  48.             color: lightseagreen;
  49.         }
  51.         .account {
  52.             float: right;
  53.             background-color: lightseagreen;
  54.             color: white;
  55.             border: none;
  56.             outline: none;
  57.             width: 4.5em;
  58.             height: 1.8em;
  59.         }
  61.         .account:hover {
  62.             background-color: coral;
  63.             cursor: pointer;
  64.         }
  65.     </style>
  66. </head>
  68. <body>
  69.     <div class="box">
  70.         <div class="selectAll">
  71.             <!-- checkAll(): 当全选按钮的状态发生变化化,触发该事件 change  -->
  72.             <input type="checkbox" class="check-all" name="check-all" onchange="checkAll()" checked />
  73.             <label for="check-all">全选</label>
  74.         </div>
  75.         <ul class="list">
  76.             <li><span>选择</span><span>品名</span><span>数量</span><span>单价</span><span>金额</span></li>
  77.             <li>
  78.                 <input type="checkbox" onchange="checkItems()" checked />
  79.                 <span class="content">手机</span>
  80.                 <input type="number" value="1" min="1" class="num" />
  81.                 <span class="price">100</span>
  82.                 <span class="amount">0</span>
  83.             </li>
  84.             <li>
  85.                 <input type="checkbox" onchange="checkItems()" checked />
  86.                 <span class="content">电脑</span>
  87.                 <input type="number" value="2" min="1" class="num" />
  88.                 <span class="price">200</span><span class="amount">0</span>
  89.             </li>
  90.             <li>
  91.                 <input type="checkbox" onchange="checkItems()" checked />
  92.                 <span class="content">相机</span>
  93.                 <input type="number" value="3" min="1" class="num" />
  94.                 <span class="price">300</span>
  95.                 <span class="amount">0</span>
  96.             </li>
  97.             <li>
  98.                 <span>总计:</span>
  99.                 <span class="total-num">0</span>
  100.                 <span class="total-amount">0</span>
  101.             </li>
  102.         </ul>
  103.         <button class="account">结算</button>
  104.     </div>
  106.     <script>
  107.         function checkAll() {
  108.           //全选按钮状态
  109.           let status = event.target.checked;
  110.           //子商品状态
  111.           document
  112.             .querySelectorAll(".list li input[type='checkbox']")
  113.             .forEach((item) => (item.checked = status));
  114.           autoCalculate();
  115.         }
  116.         function checkItems() {
  117.           //全部商品
  118.           let items = document.querySelectorAll(
  119.             ".list li input[type='checkbox']"
  120.           );
  121.           //判断状态
  122.           let status = [...items].every((item) => item.checked === true);
  123.           document.querySelector(".check-all").checked = status;
  124.           autoCalculate();
  125.         }
  126.         const nums = document.querySelectorAll(".num");
  127.         //商品是否被选中
  128.         function goodStatus(numArr) {
  129.           let items = document.querySelectorAll(
  130.             ".list li input[type='checkbox']"
  131.           );
  132.           return numArr.map((num, index) => {
  133.             if (items[index].checked === false) {
  134.               return (num = 0);
  135.             } else {
  136.               return num;
  137.             }
  138.           });
  139.         }
  140.         //计算总数量
  141.         function getTotalNum(numArr) {
  142.           numArr = goodStatus(numArr);
  143.           return numArr.reduce((acc, cur) => acc + cur);
  144.         }
  145.         //计算每个商品金额
  146.         function getAmount(numArr, priceArr) {
  147.           return numArr.map((num, index) => num * priceArr[index]);
  148.         }
  149.         //总金额
  150.         function getTotalAmount(amountArr) {
  151.           amountArr = goodStatus(amountArr);
  152.           return amountArr.reduce((acc, cur) => acc + cur);
  153.         }
  154.         //自动计算
  155.         function autoCalculate() {
  156.           //数量数组
  157.           const numArr = [...nums].map((num) => parseInt(num.value));
  158.           //单价数组
  159.           const prices = document.querySelectorAll(".price");
  160.           const pricesArr = [...prices].map((price) =>
  161.             parseInt(price.textContent)
  162.           );
  163.           //金额数组
  164.           const amountArr = getAmount(numArr, pricesArr);
  165.           document.querySelector(".total-num").textContent = getTotalNum(numArr);
  166.           document.querySelector(".total-amount").textContent =
  167.             getTotalAmount(amountArr);
  168.           //为每个商品填充金额
  169.           document
  170.             .querySelectorAll(".amount")
  171.             .forEach((amount, index) => (amount.textContent = amountArr[index]));
  172.         }
  173.         //自动加载
  174.         window.onload = autoCalculate();
  175.         //数量变化自动计算
  176.         [...nums].forEach((num) => (num.onchange = autoCalculate));
  177.       </script>
  178. </body>
  180. </html>

效果

上一条：Docker学习笔记下一条：字符串和数组api操作
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议