javascript选项卡,轮播图与购物车的实现

程序员文章站 2022-03-13 12:39:23

...

选项卡实现


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
          width: 28em;
          display: grid;
          grid-template-columns: 3em 1fr;
        }
        .box ul {
          margin: 0;
          padding: 0;
        }
        .box li {
          list-style: none;
          /* height: 2em; */
        }
        .box li a {
          text-decoration: none;
        }
        .box li:hover {
          cursor: pointer;
        }
        .box .content {
          background-color: lightgreen;
          display: none;
          place-self: center start;
        }
        .box .content.active {
          display: block;
        }
        .box .menu li.active {
          background-color: lightgreen;
        }
      </style>
</head>


<body>
    <div class="box">
         <ul class="menu" onclick="show()">
            <li data-index="1" class="active">本省</li>
            <li data-index="2" >全国</li>
            <li data-index="3" >防疫</lifang>
         </ul>

         <div class="content active" data-index="1">
            <li><a href="">刚刚通报!2021安徽GDP预计破4万亿元!</a></li>
            <li><a href="">刚刚通报!2021安徽GDP预计破4万亿元!</a></li>
            <li><a href="">刚刚通报!2021安徽GDP预计破4万亿元!</a></li>
            <li><a href="">刚刚通报!2021安徽GDP预计破4万亿元!</a></li>
            <li><a href="">刚刚通报!2021安徽GDP预计破4万亿元!</a></li>
         </div>

         <div class="content" data-index="2">
            <li><a href="">总书记关心北京冬奥会,冬残奥会筹办纪实</a></li>
            <li><a href="">总书记关心北京冬奥会,冬残奥会筹办纪实</a></li>
            <li><a href="">总书记关心北京冬奥会,冬残奥会筹办纪实</a></li>
            <li><a href="">总书记关心北京冬奥会,冬残奥会筹办纪实</a></li>
            <li><a href="">总书记关心北京冬奥会,冬残奥会筹办纪实</a></li>

         </div>

         <div class="content" data-index="3">
            <li><a href="">坚持“动态清零”不动摇(人民论坛)</a></li>
            <li><a href="">坚持“动态清零”不动摇(人民论坛)</a></li>
            <li><a href="">坚持“动态清零”不动摇(人民论坛)</a></li>
            <li><a href="">坚持“动态清零”不动摇(人民论坛)</a></li>
            <li><a href="">坚持“动态清零”不动摇(人民论坛)</a></li>
         </div>

    </div>

    <script>
            function show(){
                console.log(event);
                let target=event.target;
                console.log(target);

                let menu=document.querySelectorAll(".menu li");
                let content=document.querySelectorAll(".content");
                console.log(menu);
                console.log(content);

                menuarray=[...menu];
                contentarray=[...content];
                console.log(menuarray);

                menuarray.forEach(li => {
                    li.classList.remove("active");                    
                });

                contentarray.forEach(ele => ele.classList.remove("active"));

                target.classList.add("active");
                contentarray.forEach((li,index)=>{
                    if (li.dataset.index===target.dataset.index)
                    {
                        li.classList.add("active");

                    }
                })





            }
    </script>


</body>
</html>

轮播图实现


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* ! 3. 轮播图 */
        .slider {
          max-width: 750px;
          min-width: 320px;
          margin: auto;

          padding: 0 10px;
        }

        .slider .imgs {
          /* 图片容器必须要有高度,否则下面图片不能正常显示 */
          height: 150px;
        }

        .slider .imgs img {
          /* 图片完全充满父级空间显示 */
          height: 100%;
          width: 100%;
          /* 图片带有圆角 */
          border-radius: 10px;
          /* 默认图片全部隐藏,只有有active的图片才显示 */
          display: none;
        }

        /* 默认显示第一张 */
        .slider .imgs img.active {
          display: block;
        }
        /* 轮播图按钮组 */
        .slider .btns {
          /* 按钮水平一排显示,用flex,且水平居中 */
          display: flex;
          place-content: center;
        }
        .slider .btns span {
          /* 按钮宽高相同,确定显示成一个正圆 */
          width: 8px;
          height: 8px;
          /* 加上红色背景和数字是为了布局时可以看到,一会更去掉 */

          background-color: rgba(255, 255, 255, 0.4);
          /* 50%可确保显示为正圆 */
          border-radius: 50%;
          /* 按钮上外边距负值,可将它上移,可移动到图片中下方 */
          margin: -12px 3px 5px;
        }
        .slider .btns span.active {
          background-color: #fff;
        }
      </style>
</head>

<body>
    <div class="slider">
        <!-- 图片容器 -->
        <div class="imgs">
          <!-- 轮播图默认从第一张开始显示 -->
          <a href=""><img src="./images/banner1.jpg" alt="" data-index="1" class="active" /></a>
          <a href=""><img src="./images/banner2.jpg" alt="" data-index="2" /></a>
          <a href=""><img src="./images/banner3.png" alt="" data-index="3" /></a>
        </div>
        <!-- 切换按钮数量与图片数量必须一致 -->
        <div class="btns" >
          <span data-index="1" class="active" onclick="setActive()"></span>
          <span data-index="2" onclick="setActive()"></span>
          <span data-index="3" onclick="setActive()"></span>
        </div>
      </div>

      <script>
        let btns=document.querySelectorAll(".btns span");
        let imgs=document.querySelectorAll(".imgs a img");

          function setActive(){

            console.log(event.target);


            console.log(btns);
            console.log(imgs);

            let btnsarray=[...btns];
            let imgsarray=[...imgs];

            btnsarray.forEach(element => {
                element.classList.remove("active");
            });
            imgsarray.forEach(ele=>ele.classList.remove("active"));

            event.target.classList.add("active");

            imgsarray.forEach(ele=>{
                if (ele.dataset.index===event.target.dataset.index)
                {
                    ele.classList.add("active");
                }
            });




          }

           // setInterval支持第3个参数,就是传给回调的参数
           console.log(btns);
        console.log(Object.keys(btns));
      setInterval(
        function (arr) {
          // 使这个数组首尾相接实现无限循环效果
          let i = arr.shift();
          console.log(i);
          btns[i].dispatchEvent(new Event("click"));
          arr.push(i);
        },
        2000,
        Object.keys(btns)
      );




      </script>


</body>
</html>

购物车实现


<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>实战2: 购物车</title>
    <style>
      .box {
        width: 22em;
        height: 2em;
      }
      .list > li {
        height: 1.6em;
        background-color: #efefef;

        display: grid;
        grid-template-columns: repeat(5, 3em);
        gap: 1em;
        place-items: center right;
        border-bottom: 1px solid #ccc;
      }
      .list > li:first-of-type {
        background-color: lightseagreen;
        color: white;
      }
      .list > li:hover:not(:first-of-type) {
        cursor: pointer;
        background-color: lightcyan;
      }
      .list > li input[type="number"] {
        width: 3em;
        border: none;
        outline: none;
        text-align: center;
        font-size: 1em;
        background-color: transparent;
      }

      .list > li:last-of-type span.total-num,
      .list > li:last-of-type span.total-amount {
        grid-column: span 2;
        place-self: center right;
        color: lightseagreen;
      }
      .account {
        float: right;
        background-color: lightseagreen;
        color: white;
        border: none;
        outline: none;
        width: 4.5em;
        height: 1.8em;
      }
      .account:hover {
        background-color: coral;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="selectAll">
        <input type="checkbox" class="check-all" name="check-all" onchange="checkAll()" checked />
        <label for="check-all">全选</label>
      </div>
      <ul class="list">
        <li><span>选择</span><span>品名</span><span>数量</span><span>单价</span><span>金额</span></li>
        <li>
          <input data-index="1" type="checkbox" onchange="checkItems()" checked />
          <span class="content">手机</span>
          <input data-index="1" type="number" value="1" min="1" class="num" />
          <span data-index="1" class="price">100</span>
          <span data-index="1" class="amount">0</span>
        </li>
        <li>
          <input data-index="2" type="checkbox" onchange="checkItems()" checked />
          <span class="content">电脑</span>
          <input data-index="2" type="number" value="2" min="1" class="num" />
          <span data-index="2" class="price">200</span><span data-index="2" class="amount">0</span>
        </li>
        <li>
          <input data-index="3" type="checkbox" onchange="checkItems()" checked />
          <span class="content">相机</span>
          <input data-index="3" type="number" value="3" min="1" class="num" />
          <span data-index="3" class="price">300</span>
          <span data-index="3" class="amount">0</span>
        </li>
        <li>
          <span>总计:</span>
          <span class="total-num">0</span>
          <span class="total-amount">0</span>
        </li>
      </ul>
      <button class="account">结算</button>
    </div>

    <script>
      // 1. 全选
      function checkAll() {
        // 1. 获取当前全选框的状态
        let status = event.target.checked;

        // 2. 根据这个状态,来动态的设置所有商品的状态
        const items = document.querySelectorAll(".list li input[type=checkbox]");
        items.forEach(item => (item.checked = status));
      }

      // 2. 根据用户选择的每个商品状态来动态设置全选状态
      function checkItems() {
        // 1. 获取全部的商品
        const items = document.querySelectorAll(".list li input[type=checkbox]");

        // 2. 判断状态,只有全部为true,才返回true, array.every
        let status = [...items].every(item => item.checked === true);

        // 3. 将这个状态添加到全选上
        document.querySelector(".check-all").checked = status;
      }

      // ------------  商品的自动计算  -------------------

      // 购物车所有的数据计算的依据是:  基于商品的"数量"的变化
      const nums = document.querySelectorAll(".num");
      const checkbox=document.querySelectorAll(".list li input[type=checkbox]");
      // 1. 计算总数量
      function getTotalNum(numArr) {
        return numArr.reduce((acc, cur) => acc + cur);
      }

      // 2. 计算每个商品的金额
      function getAmount(numArr, priceArr) {
        // 金额 = 数量 * 单价
        return numArr.map((num, index) => num * priceArr[index]);
      }

      // 3. 计算总金额
      function getTotalAmount(amountArr) {
        return amountArr.reduce((acc, cur) => acc + cur);
      }

      // 4. 自动计算
      function autoCalculate() {


        const numArr = [...nums].map(num => parseInt(num.value));

        console.log(numArr);
        // 单价数组
        const prices = document.querySelectorAll(".price");
        const priceArr = [...prices].map(price => parseInt(price.textContent));

        // 金额数组
        const amountArr = getAmount(numArr, priceArr);
        console.log(amountArr);

        // 1. 总数量
        let allnum,allmoney;
        allnum=getTotalNum(numArr);

        allmoney= getTotalAmount(amountArr);
         // 数量数组
         checkboxarray=[...checkbox];
         console.log(checkboxarray);
         console.log("开始遍历"); 
         checkboxarray.map(
             function (ele){
               console.log(ele.checked); 
                 if (ele.checked==false)
                 {
                    [...nums].forEach(function (num){
                        if (num.dataset.index==ele.dataset.index)
                        {
                            allnum=allnum-num.value;
                            allmoney=allmoney-amountArr[parseInt(num.dataset.index)-1];
                            console.log("所有数量:"+allnum+"当前减去:"+num.value+"当前总价格:"+allmoney);
                        }

                    });



                 }
             }
         )
         //   arr.filter(item => item >= 3)[0] -> find


        document.querySelectorAll(".amount").forEach((amount, index) => (amount.textContent = amountArr[index]));


        document.querySelector(".total-num").textContent = allnum;


        document.querySelector(".total-amount").textContent = allmoney;



      }

      // 当购物车加载时,初始化,要自动计算
      window.onload = autoCalculate;

      // 当数量更新时,触发自动计算
      nums.forEach(num => (num.onchange = autoCalculate));
      checkbox.forEach(ele=>(ele.onchange=autoCalculate));
    </script>

  </body>
</html>

上述代码实现了简易的购物车:只计算选中的商品, 未选中商品的数量和金额自动从总计中减去

上一篇： javascript简单商品管理器实现,node包的删除,安装与更新

下一篇： PHP注册、登录、退出实战小案例

javascript选项卡,轮播图与购物车的实现

选项卡实现

轮播图实现

购物车实现

详解JavaScript实现动态的轮播图效果

基于JavaScript实现简单的轮播图

使用原生的javascript来实现轮播图

JavaScript实现带有子菜单和控件的slider轮播图效果

关于JavaScript轮播图的实现

JavaScript实现焦点图轮播效果的代码案例介绍（图）

js实现简单选项卡与自动切换效果的方法_javascript技巧

详解JavaScript实现动态的轮播图效果

javascript实现自动左滑的轮播图（代码示例）

JavaScript||最简单的轮播图实现