亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 48
粉絲 0
評(píng)論 0
訪問(wèn)量 44729
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
JS的案列簡(jiǎn)單演示（0821）
丶久而舊之丶
原創(chuàng)
1688人瀏覽過(guò)

案列

使用jQuery實(shí)現(xiàn)功能

一鍵換膚

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>換膚</title>
  8.     <style>
  9.         .container {
  10.             width: 100px;
  11.             display: flex;
  12.             box-sizing: border-box;
  13.         }
  15.         .container>img {
  16.             width: 100%;
  17.             margin: 0 3px 0 0;
  18.             border: 3px solid white;
  19.             opacity: 0.6;
  20.         }
  22.         .container>img:hover {
  23.             opacity: 1;
  24.             cursor: pointer;
  25.             width: 110%;
  26.         }
  28.         html,
  29.         body {
  30.             height: 100%;
  31.         }
  33.         body {
  34.             background-image: url("imgs/03.jpg");
  35.             background-repeat: no-repeat;
  36.             background-size: 100% 100%;
  37.         }
  38.     </style>
  39. </head>
  41. <body>
  42.     <div class="container">
  43.         <img src="imgs/03.jpg" alt="">
  44.         <img src="imgs/06.jpg" alt="">
  45.         <img src="imgs/07.jpg" alt="">
  46.     </div>
  47. </body>
  48. <script src="../lib/jquery-3.5.1.js"></script>
  49. <script>
  50.     $("div").click(function (ev) {
  51.         $("body").css("background-image", "url(" + ev.target.src + ")");
  52.     })
  53. </script>
  55. </html>

全選和自動(dòng)計(jì)算金額

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>自動(dòng)計(jì)算價(jià)格</title>
  8.     <style>
  9.         table {
  10.             border: 1px solid;
  11.             border-collapse: collapse;
  12.             margin: 20px auto;
  13.             width: 500px;
  14.             text-align: center;
  15.         }
  17.         tr td {
  18.             border: 1px solid;
  19.         }
  21.         caption {
  22.             margin-bottom: 10px;
  23.         }
  25.         div {
  26.             width: 500px;
  27.             margin: auto;
  28.         }
  30.         thead {
  31.             background-color: aquamarine;
  32.         }
  34.         button {
  35.             float: right;
  36.             width: 80px;
  37.         }
  39.         .tain {
  40.             box-sizing: border-box;
  41.             width: 50px;
  42.             text-align: center;
  43.         }
  44.     </style>
  45. </head>
  47. <body>
  48.     <table>
  49.         <caption>購(gòu)物車</caption>
  50.         <thead>
  51.             <tr>
  52.                 <td><input type="checkbox" name="itemAll" id="itemAll" checked>全選</td>
  53.                 <td>ID</td>
  54.                 <td>品名</td>
  55.                 <td>單位</td>
  56.                 <td>單價(jià)/元</td>
  57.                 <td>數(shù)量</td>
  58.                 <td>金額/元</td>
  59.             </tr>
  60.         </thead>
  61.         <tbody>
  62.             <tr>
  63.                 <td><input type="checkbox" name="itemID" id="itemID" value="SN-1010" checked></td>
  64.                 <td>SN-1010</td>
  65.                 <td>MacBook Pro電腦</td>
  66.                 <td>臺(tái)</td>
  67.                 <td>18999</td>
  68.                 <td>
  69.                     <input type="number" class="tain" name="counter" value="1" min="0" step="1" id="">
  70.                 </td>
  71.                 <td></td>
  72.             </tr>
  73.             <tr>
  74.                 <td><input type="checkbox" name="itemID" id="itemID" value="SN-1020" checked></td>
  75.                 <td>SN-1020</td>
  76.                 <td>iPhone手機(jī)</td>
  77.                 <td>部</td>
  78.                 <td>4999</td>
  79.                 <td>
  80.                     <input type="number" class="tain" name="counter" value="1" min="0" step="1" id="">
  81.                 </td>
  82.                 <td></td>
  83.             </tr>
  84.             <tr>
  85.                 <td><input type="checkbox" name="itemID" id="itemID" value="SN-1030" checked></td>
  86.                 <td>SN-1030</td>
  87.                 <td>智能Ai音箱</td>
  88.                 <td>只</td>
  89.                 <td>399</td>
  90.                 <td>
  91.                     <input type="number" class="tain" name="counter" value="1" min="0" step="1" id="">
  92.                 </td>
  93.                 <td></td>
  94.             </tr>
  95.             <tr>
  96.                 <td><input type="checkbox" name="itemID" id="itemID" value="SN-1040" checked></td>
  97.                 <td>SN-1040</td>
  98.                 <td>SSD移動(dòng)硬盤(pán)</td>
  99.                 <td>個(gè)</td>
  100.                 <td>888</td>
  101.                 <td>
  102.                     <input type="number" class="tain" name="counter" value="1" min="0" step="1" id="">
  103.                 </td>
  104.                 <td></td>
  105.             </tr>
  106.             <tr>
  107.                 <td><input type="checkbox" name="itemID" id="itemID" value="SN-1050" checked></td>
  108.                 <td>SN-1050</td>
  109.                 <td>黃山毛峰</td>
  110.                 <td>斤</td>
  111.                 <td>999</td>
  112.                 <td>
  113.                     <input type="number" class="tain" name="counter" value="1" min="0" step="1" id="">
  114.                 </td>
  115.                 <td></td>
  116.             </tr>
  117.             <tr>
  118.                 <td colspan="5">總計(jì)</td>
  119.                 <td id="totalNum"></td>
  120.                 <td id="totalPrice"></td>
  121.             </tr>
  122.         </tbody>
  123.     </table>
  124.     <div>
  125.         <button>結(jié)算</button>
  126.     </div>
  127.     <script src="../lib/jquery-3.5.1.js"></script>
  128.     <script>
  129.         $("#itemAll").on("change", chend);
  130.         function chend(ev) {
  131.             $("input[name='itemID']").prop("checked", ev.target.checked);
  132.             if ((ev.target.checked)) {
  133.                 $("input[type='number']").prop("value", 1);
  134.             } else {
  135.                 $("input[type='number']").prop("value", 0);
  137.             }
  138.              // 獲取商品數(shù)量
  139.             Counts = getCounts(numbers);
  140.             // 獲取商品單價(jià)
  141.             Prices = getPrices(Price);
  142.             // 獲取商品金額
  143.             Amouts = getAmouts(Counts, Prices);
  144.             // 獲取商品總數(shù)量
  145.             totalNum = num(Counts);
  146.             // 獲取商品總金額
  147.             totalPrice = toPrice(Amouts);
  148.             // 渲染商品金額到頁(yè)面中
  149.             $("tbody>tr>td:last-of-type").each(function (key, value) {
  150.                 $(value).html(Amouts[key]);
  151.             });
  152.             // 渲染商品總數(shù)量到頁(yè)面中
  153.             $("#totalNum").html(totalNum);
  154.             // 渲染商品總金額到頁(yè)面中
  155.             $("#totalPrice").html(totalPrice);
  156.         }
  157.         $("input[name='itemID']").change(function (ev) {
  158.             var count = 0;
  159.             // 循環(huán)按鈕選中狀態(tài)的個(gè)數(shù)
  160.             $("input[name='itemID']").each(function (key, value) {
  161.                 if (value.checked) count++;
  162.             });
  163.             if (ev.target.checked) {
  164.                 $(ev.target).parent().siblings().eq(4).children().prop("value", 1);
  165.             } else {
  166.                 $(ev.target).parent().siblings().eq(4).children().prop("value", 0);
  167.             }
  168.             // 根據(jù)個(gè)數(shù)判斷全選按鈕是否要選ziyu
  169.             $("#itemAll").prop("checked", (count === $("input[name='itemID']").length));
  170.             // 獲取商品數(shù)量
  171.             Counts = getCounts(numbers);
  172.             // 獲取商品單價(jià)
  173.             Prices = getPrices(Price);
  174.             // 獲取商品金額
  175.             Amouts = getAmouts(Counts, Prices);
  176.             // 獲取商品總數(shù)量
  177.             totalNum = num(Counts);
  178.             // 獲取商品總金額
  179.             totalPrice = toPrice(Amouts);
  180.             // 渲染商品金額到頁(yè)面中
  181.             $("tbody>tr>td:last-of-type").each(function (key, value) {
  182.                 $(value).html(Amouts[key]);
  183.             });
  184.             // 渲染商品總數(shù)量到頁(yè)面中
  185.             $("#totalNum").html(totalNum);
  186.             // 渲染商品總金額到頁(yè)面中
  187.             $("#totalPrice").html(totalPrice);
  188.         });
  189.         // 商品數(shù)量
  190.         var Counts = [];
  191.         var numbers = $("input[type='number']");
  192.         Counts = getCounts(numbers);
  193.         function getCounts(numbers) {
  194.             return numbers.map(function (key, item) {
  195.                 return parseInt(numbers.get(key).value);
  196.             }).get();
  197.         };
  198.         console.log(Counts);
  199.         // 商品單價(jià)
  200.         var Prices = [];
  201.         var Price = $("tbody>tr>td:nth-of-type(5)");
  202.         Prices = getPrices(Price);
  203.         function getPrices(Price) {
  204.             return Price.map(function (key, value) {
  205.                 return parseInt($(value).html());
  206.             }).get();
  207.         };
  208.         console.log(Prices);
  209.         // 計(jì)算商品金額
  210.         var Amouts = [];
  211.         Amouts = getAmouts(Counts, Prices);
  212.         function getAmouts(Counts, Prices) {
  213.             var amount = [];
  214.             for (var i = 0; i < Counts.length; i++) {
  215.                 am = Counts[i] * Prices[i];
  216.                 amount.push(am);
  217.             };
  218.             return amount;
  219.         }
  220.         console.log(Amouts);
  221.         // 把數(shù)據(jù)渲染到頁(yè)面中
  222.         $("tbody>tr>td:last-of-type").each(function (key, value) {
  223.             $(value).html(Amouts[key]);
  224.         });
  225.         // 獲取總數(shù)量
  226.         var totalNum = 0;
  227.         totalNum = num(Counts);
  228.         function num(Counts) {
  229.             return Counts.reduce(function (prev, next) {
  230.                 return prev += next;
  231.             });
  232.         };
  233.         console.log(totalNum);
  234.         // 渲染到頁(yè)面中
  235.         $("#totalNum").html(totalNum);
  236.         // 獲取總金額
  237.         var totalPrice = 0;
  238.         totalPrice = toPrice(Amouts);
  239.         function toPrice(Amouts) {
  240.             return Amouts.reduce(function (prev, next) {
  241.                 return prev += next;
  242.             });
  243.         };
  244.         console.log(totalPrice);
  245.         // 渲染到頁(yè)面中
  246.         $("#totalPrice").html(totalPrice);
  247.         // 綁定事件
  248.         numbers.on("change", autoCalculate);
  249.         function autoCalculate(ev) {
  250.          // 獲取商品數(shù)量
  251.             Counts = getCounts(numbers);
  252.             // 獲取商品單價(jià)
  253.             Prices = getPrices(Price);
  254.             // 獲取商品金額
  255.             Amouts = getAmouts(Counts, Prices);
  256.             // 獲取商品總數(shù)量
  257.             totalNum = num(Counts);
  258.             // 獲取商品總金額
  259.             totalPrice = toPrice(Amouts);
  260.             // 渲染商品金額到頁(yè)面中
  261.             $("tbody>tr>td:last-of-type").each(function (key, value) {
  262.                 $(value).html(Amouts[key]);
  263.             });
  264.             // 渲染商品總數(shù)量到頁(yè)面中
  265.             $("#totalNum").html(totalNum);
  266.             // 渲染商品總金額到頁(yè)面中
  267.             $("#totalPrice").html(totalPrice);
  268.         }
  269.     </script>
  270. </body>
  272. </html>

總結(jié)

1.對(duì)于換膚圖片案列，明白了一件事一開(kāi)始一直以為body的高度就是頁(yè)面的高度，一直想著為什么圖片的自適應(yīng)實(shí)現(xiàn)不了，查看控制器才發(fā)現(xiàn)body的高度沒(méi)設(shè)置的話是靠其子元素的高度撐開(kāi)的，不是頁(yè)面的高度。
2.自動(dòng)計(jì)算案列在獲取數(shù)量或者單價(jià)數(shù)組時(shí)，用jQuery的map()方法得到的值用parseInt()方法后得到的是jQuery的對(duì)象而不是數(shù)組，用了get()方法后才是數(shù)組，我的想法是parseInt()轉(zhuǎn)為數(shù)值，那么應(yīng)該直接成數(shù)組不是嗎，這里有點(diǎn)不明白

批改老師：天蓬老師天蓬老師

批改狀態(tài)：合格

老師批語(yǔ)：jQuery中, 要注意當(dāng)前是jQ對(duì)象,還是js對(duì)象, 這個(gè)很重要
本博文版權(quán)歸博主所有，轉(zhuǎn)載請(qǐng)注明地址！如有侵權(quán)、違法，請(qǐng)聯(lián)系admin@php.cn舉報(bào)處理！
全部評(píng)論 文明上網(wǎng)理性發(fā)言，請(qǐng)遵守新聞評(píng)論服務(wù)協(xié)議
0條評(píng)論
作者最新博文
關(guān)于我們 免責(zé)申明 意見(jiàn)反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長(zhǎng)！
關(guān)注服務(wù)號(hào) 技術(shù)交流群
PHP中文網(wǎng)訂閱號(hào)
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時(shí)隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號(hào)
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學(xué)習(xí)！
    全站2000+教程免費(fèi)學(xué)