双色球

动画：

双色球

相关代码：

  1.  <div class="box"></div>
  2.     <button onclick="shuaxin()" style="margin-top: 10px">抽奖</button>
  4.     <script>
  5.       function shuaxin() {
  6.         //放红球
  7.         let arr = [];
  8.         //放全部
  9.         let res = [];
  10.         for (let i = 1; i <= 33; i++) {
  11.           arr.push(i);
  12.         }
  14.         for (let i = 0; i < 6; i++) {
  15.           let index = Math.floor(Math.random() * arr.length);
  17.           res.push(arr[index]);
  18.           arr.splice(index, 1);
  19.         }
  21.         //排序
  22.         res.sort((a, b) => a - b);
  23.         //生成蓝色球随机数
  24.         let blue = Math.floor(Math.random() * 16) + 1;
  25.         res.push(blue);
  26.         let box = document.querySelector(".box");
  28.         let box_content = box.children.length;
  30.         if (box_content !== 0) {
  31.           box.innerHTML = "";
  32.         }
  34.         res.forEach((item) => {
  35.           let ball = document.createElement("div");
  36.           ball.textContent = item;
  37.           box.append(ball);
  38.         });
  39.       }
  40.       window.onload = shuaxin;
  41.     </script>

选项卡

动画：

选项卡

相关代码：

  1.  <script>
  2.       function show() {
  3.         let ul = event.currentTarget;
  4.         let li = event.target;
  5.         [...ul.children].forEach((item) => item.classList.remove("active"));
  6.         li.classList.add("active");
  8.         let content = document.querySelectorAll(".content");
  9.         content.forEach((item) => item.classList.remove("active"));
  11.         [...content]
  12.           .find((item) => item.dataset.index === li.dataset.index)
  13.           .classList.add("active");
  14.       }
  15.     </script>

购物车

动画：

购物车

相关代码：

  1. <script>
  2.       function checkAll() {
  3.         //全选按钮状态
  4.         let status = event.target.checked;
  5.         //子商品状态
  6.         document
  7.           .querySelectorAll(".list li input[type='checkbox']")
  8.           .forEach((item) => (item.checked = status));
  9.         autoCalculate();
  10.       }
  11.       function checkItems() {
  12.         //全部商品
  13.         let items = document.querySelectorAll(
  14.           ".list li input[type='checkbox']"
  15.         );
  16.         //判断状态
  17.         let status = [...items].every((item) => item.checked === true);
  18.         document.querySelector(".check-all").checked = status;
  19.         autoCalculate();
  20.       }
  22.       const nums = document.querySelectorAll(".num");
  24.       //商品是否被选中
  25.       function goodStatus(numArr) {
  26.         let items = document.querySelectorAll(
  27.           ".list li input[type='checkbox']"
  28.         );
  30.         return numArr.map((num, index) => {
  31.           if (items[index].checked === false) {
  32.             return (num = 0);
  33.           } else {
  34.             return num;
  35.           }
  36.         });
  37.       }
  38.       //计算总数量
  39.       function getTotalNum(numArr) {
  40.         numArr = goodStatus(numArr);
  41.         return numArr.reduce((acc, cur) => acc + cur);
  42.       }
  43.       //计算每个商品金额
  44.       function getAmount(numArr, priceArr) {
  45.         return numArr.map((num, index) => num * priceArr[index]);
  46.       }
  47.       //总金额
  48.       function getTotalAmount(amountArr) {
  49.         amountArr = goodStatus(amountArr);
  50.         return amountArr.reduce((acc, cur) => acc + cur);
  51.       }
  52.       //自动计算
  53.       function autoCalculate() {
  54.         //数量数组
  55.         const numArr = [...nums].map((num) => parseInt(num.value));
  56.         //单价数组
  57.         const prices = document.querySelectorAll(".price");
  58.         const pricesArr = [...prices].map((price) =>
  59.           parseInt(price.textContent)
  60.         );
  61.         //金额数组
  62.         const amountArr = getAmount(numArr, pricesArr);
  63.         document.querySelector(".total-num").textContent = getTotalNum(numArr);
  64.         document.querySelector(".total-amount").textContent =
  65.           getTotalAmount(amountArr);
  66.         //为每个商品填充金额
  67.         document
  68.           .querySelectorAll(".amount")
  69.           .forEach((amount, index) => (amount.textContent = amountArr[index]));
  70.       }
  71.       //自动加载
  72.       window.onload = autoCalculate();
  73.       //数量变化自动计算
  74.       [...nums].forEach((num) => (num.onchange = autoCalculate));
  75.     </script>

更多相关文章

  1. 创建android逐帧动画的两种方式 布局和java代码
  2. android java.net.ConnectException: Connection 127.0.0.1:8080
  3. android中访问时的localhost问题
  4. Android(安卓)ListView详解
  5. Android(安卓)Activity界面切换添加动画特效
  6. Android(安卓)studio 下的svn配置使用
  7. android 音频系统java部分代码阅读
  8. Android(安卓)Java和JavaScript代码相互调用
  9. Android动画效果

随机推荐

  1. JSON-lib框架，转换JSON、XML不再困难
  2. android pull 解析xml方式
  3. XML解析之JAXP案例详解
  4. Apache Commons Configuration读取xml配
  5. Dom4j修改xml文档引入
  6. android sax创建xml文件
  7. java操作properties配置文件
  8. 根据Schema写出XML文档四部曲
  9. android sax解析 xml方式
  10. android XPath 解析xml