利用js實作一個簡單的購物車功能-js教程-PHP中文網

首頁

web前端

js教程

利用js實作一個簡單的購物車功能

零下一度

Jun 19, 2017 am 09:25 AM

javascript使用實現簡單購物車

這篇文章主要為大家分享了js簡易版的購物車，具有一定的參考價值，有興趣的小伙伴們可以參考一下

本文實例為大家分享了js購物車功能的具體程式碼，供大家參考，具體內容如下

<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      li {
        list-style: none;
      }

      li {
        float: left;
        width: 200px;
        border: 1px #000 solid;
        margin: 10px;
      }

      li img {
        width: 200px;
      }

      p {
        height: 20px;
        border-bottom: 1px #333 dashed;
      }

      #bus {
        width: 600px;
        border: 1px #000 solid;
        height: 300px;
        clear: both;
      }

      .box1 {
        float: left;
        width: 200px;
      }

      .box2 {
        float: left;
        width: 200px;
      }

      .box3 {
        float: left;
        width: 200px;
      }

      #allMoney {
        float: right;
      }
    </style>
    <script>
      window.onload = function() {
        var oList = document.getElementById(&#39;list&#39;);
        var aLi = oList.getElementsByTagName(&#39;li&#39;);
        var oBus = document.getElementById(&#39;bus&#39;);

        var obj = {};
        var iNum = 0;
        var allMoney = 0;

        for (var i = 0; i < aLi.length; i++) {
          aLi[i].ondragstart = function(ev) {
            //点击拖拽元素的时候，就设置数据，以后放到购物车的时候数据就可以传过去了
            var ev = ev || window.event;
            var aP = this.getElementsByTagName(&#39;p&#39;);
            ev.dataTransfer.setData(&#39;title&#39;, aP[0].innerHTML);
            ev.dataTransfer.setData(&#39;price&#39;, aP[1].innerHTML);
            ev.dataTransfer.setDragImage(this, 0, 0);
          }
        }

        oBus.ondragover = function(ev) {
          //阻止鼠标默认事件
          var ev = ev || event;
          ev.preventDefault();
        };
        oBus.ondrop = function(ev) {
          var ev = ev || event;
          var title = ev.dataTransfer.getData(&#39;title&#39;);
          var price = ev.dataTransfer.getData(&#39;price&#39;);  

          if(!obj[title]){

            var oP = document.createElement(&#39;p&#39;);
            var oSpan = document.createElement(&#39;span&#39;);
            oSpan.className = &#39;box1&#39;;
            oSpan.innerHTML = 1;
            oP.appendChild(oSpan);

            var oSpan = document.createElement(&#39;span&#39;);
            oSpan.className = &#39;box2&#39;;
            oSpan.innerHTML = title;
            oP.appendChild(oSpan);

            var oSpan = document.createElement(&#39;span&#39;);
            oSpan.className = &#39;box3&#39;;
            oSpan.innerHTML = price;
            oP.appendChild(oSpan);

            oBus.appendChild(oP);

            obj[title] = 1;
          }else{
            var box1 = document.getElementsByClassName(&#39;box1&#39;);
            var box2 = document.getElementsByClassName(&#39;box2&#39;);
            for(var i=0;i<box2.length;i++){
              if(box2[i].innerHTML == title){
                box1[i].innerHTML = parseInt(box1[i].innerHTML) + 1;
              };
            };

          };
          //总价
          if(!allMoney){
            allMoney = document.createElement(&#39;p&#39;);
            allMoney.id = &#39;allMoney&#39;;
          }
          iNum += parseInt(price);
          allMoney.innerHTML = &#39;￥&#39;+iNum;
          oBus.appendChild(allMoney);
        };
      };
    </script>
  </head>

  <body>
    <ul id="list">
      <li draggable="true">
        <img  src="/static/imghwm/default1.png"  data-src="img/img1.jpg"  class="lazy"   / alt="利用js實作一個簡單的購物車功能" >
        <p>javascript语言精粹</p>
        <p>40￥</p>
      </li>
      <li draggable="true">
        <img  src="/static/imghwm/default1.png"  data-src="img/img2.jpg"  class="lazy"   / alt="利用js實作一個簡單的購物車功能" >
        <p>javascript权威指南</p>
        <p>120￥</p>
      </li>
      <li draggable="true">
        <img  src="/static/imghwm/default1.png"  data-src="img/img3.jpg"  class="lazy"   / alt="利用js實作一個簡單的購物車功能" >
        <p>精通javascript</p>
        <p>35￥</p>
      </li>
      <li draggable="true">
        <img  src="/static/imghwm/default1.png"  data-src="img/img4.jpg"  class="lazy"   / alt="利用js實作一個簡單的購物車功能" >
        <p>DOM编程艺术</p>
        <p>45￥</p>
    </ul>
    <p id="bus"></p>
  </body>

</html>

以上是利用js實作一個簡單的購物車功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

JavaScript的演變：當前的趨勢和未來前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

神秘的JavaScript：它的作用以及為什麼重要Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。