一、检测数据类型的四种方法

1、typeof

2、instanceof

检测某个实例是不是隶属某个类
**

  1. var ary=[1,2,3];
  2. ary instanceof Array;//true
  3. ary instanceof Object;//true

3、constructor

constructor可以手动改变 （或者手动更改原型指向的话，检测就不准确了）
**

  1. function fn () {}
  2. undefined  // 返回值
  3. fn.constructor = 1
  4. 1  // 返回值
  5. fn.constructor;
  6. 1  // 打印值
  8. var a = 1;
  9. undefined
  10. a.constructor;
  11. ƒ Number() { [native code] }


4、Object.prototype.toString.call();

  1. Object.prototype.toString.call(1);
  2. "[object Number]"
  3. Object.prototype.toString.call(false);
  4. "[object Boolean]"
  5. Object.prototype.toString.call("");
  6. "[object String]"
  7. Object.prototype.toString.call(null);
  8. "[object Null]"
  9. Object.prototype.toString.call(undefined);
  10. "[object Undefined]"
  11. Object.prototype.toString.call(function () {});
  12. "[object Function]"
  13. Object.prototype.toString.call({});
  14. "[object Object]"
  1. var obj = {};
  2. undefined
  3. obj.toString.call(123);
  4. "[object Number]"
  5. window.toString.call(undefined);
  6. "[object Undefined]"
  7. toString.call(null);
  8. "[object Null]"

二、模拟购物车的案例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>计算机</title>
  7.     <style>
  8.         * {
  9.             margin: 0;
  10.             padding: 0;
  11.         }
  12.         ul,ol {
  13.             list-style: none;
  14.         }
  15.         .main {
  16.             width: 500px;
  17.             height: 600px;
  18.             background-image: url(../day16/img-cmp/bg1.png);
  19.             background-size: cover;
  20.             color: cyan;
  21.             padding: 20px;
  22.             box-sizing: border-box;
  23.             margin: 10px auto;
  24.         }
  25.         .main .head {
  26.             height: 150px;
  27.         }
  28.         .main ul {
  29.             height: 300px;
  30.         }
  31.         .main li {
  32.             display: flex;
  33.             justify-content: center;
  34.             align-items: center;
  35.             margin: 10px;
  36.             box-sizing: border-box;
  37.         }
  38.         .main button {
  39.             width: 52px;
  40.             height: 44px;
  41.             border: none;
  42.             background: #000;
  43.         }
  44.         .main .sub {
  45.             background-image: url(../day16/img-cmp/sub.png);
  46.             background-size: cover;
  47.         }
  48.         .main .num {
  49.             display: inline-block;
  50.             width: 52px;
  51.             height: 44px;
  52.             line-height: 44px;
  53.             background-color: #fff;
  54.             border-radius: 5px;
  55.             text-align: center;
  56.             color: maroon;
  57.         }
  58.         .main .add {
  59.             background-image: url(../day16/img-cmp/add.png);
  60.             background-size: cover;
  61.         }
  62.         .shopInfo .big {
  63.             display: none;
  64.         }
  65.     </style>
  66. </head>
  67. <body>
  68.     <div class="main">
  69.         <div class="head"></div>
  70.         <ul>
  71.             <li>
  72.                 <button class="sub" flag = "1"></button>
  73.                 <b class="num">0</b>
  74.                 <button class="add" flag = "0"></button>
  75.                 <span class="info">
  76.                     单价：<b class="itemPrice">1</b> 小计：<b class="xjMoney">0</b>元
  77.                 </span>
  78.             </li>
  79.             <li>
  80.                 <button class="sub" flag = "1"></button>
  81.                 <b class="num">0</b>
  82.                 <button class="add" flag = "0"></button>
  83.                 <span class="info">
  84.                     单价：<b class="itemPrice">3</b> 小计：<b class="xjMoney">0</b>元
  85.                 </span>
  86.             </li>
  87.             <li>
  88.                 <button class="sub" flag = "1"></button>
  89.                 <b class="num">0</b>
  90.                 <button class="add" flag = "0"></button>
  91.                 <span class="info">
  92.                     单价：<b class="itemPrice">5</b> 小计：<b class="xjMoney">0</b>元
  93.                 </span>
  94.             </li>
  95.             <li>
  96.                 <button class="sub" flag = "1"></button>
  97.                 <b class="num">0</b>
  98.                 <button class="add" flag = "0"></button>
  99.                 <span class="info">
  100.                     单价：<b class="itemPrice">7</b> 小计：<b class="xjMoney">0</b>元
  101.                 </span>
  102.             </li>
  103.             <li>
  104.                 <button class="sub" flag = "1"></button>
  105.                 <b class="num">0</b>
  106.                 <button class="add" flag = "0"></button>
  107.                 <span class="info">
  108.                     单价：<b class="itemPrice">9</b> 小计：<b class="xjMoney">0</b>元
  109.                 </span>
  110.             </li>
  113.         </ul>
  114.         <div class="shopInfo">
  115.             <p>商品共<span class="totalNum">0</span>jian</p>
  116.             <p>商品共花费<span class="totalPrice">0</span>yuan</p>
  117.             <p class="big">最贵商品价格<span class="bigPrice">0</span>yuan</p>
  118.         </div>
  119.     </div>
  120.     <script src="./3计算机2.js"></script>
  121. </body>
  122. </html>
  1. var buttons = document.querySelectorAll(".main button");
  2. var numArray = document.querySelectorAll(".num");
  3. var priceArray = document.querySelectorAll(".xjMoney");
  4. var lis = document.querySelectorAll(".main li");
  5. var bigPrice = document.querySelector(".bigPrice");
  6. var big = document.querySelector(".big");
  8. for (var i = 0; i < buttons.length; i++) {
  9.     buttons[i].onclick = function () {
  10.         big.style.display = "block";
  11.         var flag = this.getAttribute("flag");
  12.         var parentEle = this.parentNode;
  13.         var itemPrice = Number(parentEle.querySelector(".itemPrice").innerText);
  14.         var xjMoney = parentEle.querySelector(".xjMoney");
  16.         var num = parentEle.querySelector(".num");
  17.         var oldNum = Number(num.innerText);
  18.         var nowNum = 0;
  19.         // 总个数
  20.         var tNum = 0;
  21.         var totalNum = document.querySelector(".totalNum");
  22.         // 总价格
  23.         var tPrice = 0;
  24.         var totalPrice = document.querySelector(".totalPrice");
  26.         var maxPrice = 0;
  27.         var newAry = [];
  29.         if (flag == 0) {
  30.             nowNum = oldNum + 1;
  31.         } else {
  32.             if (oldNum - 1 < 0) {
  33.                 nowNum = 0;
  34.                 return;
  35.             }
  36.             nowNum = oldNum - 1;
  37.         }
  38.         num.innerText = nowNum;
  39.         xjMoney.innerText = itemPrice * nowNum;
  41.         // 计算总商品个数、总价格
  42.         for (var i = 0; i < numArray.length; i++) {
  43.             tNum += Number(numArray[i].innerText);
  44.             // console.log(numArray[i]); 
  45.             tPrice += Number(priceArray[i].innerText);
  46.         }
  47.         totalNum.innerText = tNum;
  48.         totalPrice.innerText = tPrice;
  50.         // 找出最大商品单价
  52.         for (var i = 0; i < lis.length; i++) {
  53.             if (lis[i].querySelector(".num").innerText > 0) {
  54.                 newAry.push(lis[i].querySelector(".itemPrice").innerText);
  55.             }
  56.         }
  58.         if (newAry.length < 1) {
  59.             maxPrice = "-----";
  60.         } else {
  61.             var bigAry = newAry.sort(function (a, b) {
  62.                 return a - b;
  63.             });
  64.             maxPrice = bigAry[bigAry.length - 1];
  65.             // console.log(maxPrice);  
  66.         }
  67.         bigPrice.innerText = maxPrice;
  68.     }
  69. }