search

博客列表 >JS的案列简单演示（0821）

JS的案列简单演示（0821）

丶久而旧之丶
丶久而旧之丶原创
2020年10月06日 20:22:441028浏览

案列

使用jQuery实现功能

一键换肤

  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>

全选和自动计算金额

  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.         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>购物车</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>单价/元</td>
  57.                 <td>数量</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>台</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手机</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移动硬盘</td>
  99.                 <td>个</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">总计</td>
  119.                 <td id="totalNum"></td>
  120.                 <td id="totalPrice"></td>
  121.             </tr>
  122.         </tbody>
  123.     </table>
  124.     <div>
  125.         <button>结算</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.              // 获取商品数量
  139.             Counts = getCounts(numbers);
  140.             // 获取商品单价
  141.             Prices = getPrices(Price);
  142.             // 获取商品金额
  143.             Amouts = getAmouts(Counts, Prices);
  144.             // 获取商品总数量
  145.             totalNum = num(Counts);
  146.             // 获取商品总金额
  147.             totalPrice = toPrice(Amouts);
  148.             // 渲染商品金额到页面中
  149.             $("tbody>tr>td:last-of-type").each(function (key, value) {
  150.                 $(value).html(Amouts[key]);
  151.             });
  152.             // 渲染商品总数量到页面中
  153.             $("#totalNum").html(totalNum);
  154.             // 渲染商品总金额到页面中
  155.             $("#totalPrice").html(totalPrice);
  156.         }
  157.         $("input[name='itemID']").change(function (ev) {
  158.             var count = 0;
  159.             // 循环按钮选中状态的个数
  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.             // 根据个数判断全选按钮是否要选ziyu
  169.             $("#itemAll").prop("checked", (count === $("input[name='itemID']").length));
  170.             // 获取商品数量
  171.             Counts = getCounts(numbers);
  172.             // 获取商品单价
  173.             Prices = getPrices(Price);
  174.             // 获取商品金额
  175.             Amouts = getAmouts(Counts, Prices);
  176.             // 获取商品总数量
  177.             totalNum = num(Counts);
  178.             // 获取商品总金额
  179.             totalPrice = toPrice(Amouts);
  180.             // 渲染商品金额到页面中
  181.             $("tbody>tr>td:last-of-type").each(function (key, value) {
  182.                 $(value).html(Amouts[key]);
  183.             });
  184.             // 渲染商品总数量到页面中
  185.             $("#totalNum").html(totalNum);
  186.             // 渲染商品总金额到页面中
  187.             $("#totalPrice").html(totalPrice);
  188.         });
  189.         // 商品数量
  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.         // 商品单价
  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.         // 计算商品金额
  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.         // 把数据渲染到页面中
  222.         $("tbody>tr>td:last-of-type").each(function (key, value) {
  223.             $(value).html(Amouts[key]);
  224.         });
  225.         // 获取总数量
  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.         // 渲染到页面中
  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.         // 渲染到页面中
  246.         $("#totalPrice").html(totalPrice);
  247.         // 绑定事件
  248.         numbers.on("change", autoCalculate);
  249.         function autoCalculate(ev) {
  250.          // 获取商品数量
  251.             Counts = getCounts(numbers);
  252.             // 获取商品单价
  253.             Prices = getPrices(Price);
  254.             // 获取商品金额
  255.             Amouts = getAmouts(Counts, Prices);
  256.             // 获取商品总数量
  257.             totalNum = num(Counts);
  258.             // 获取商品总金额
  259.             totalPrice = toPrice(Amouts);
  260.             // 渲染商品金额到页面中
  261.             $("tbody>tr>td:last-of-type").each(function (key, value) {
  262.                 $(value).html(Amouts[key]);
  263.             });
  264.             // 渲染商品总数量到页面中
  265.             $("#totalNum").html(totalNum);
  266.             // 渲染商品总金额到页面中
  267.             $("#totalPrice").html(totalPrice);
  268.         }
  269.     </script>
  270. </body>
  272. </html>

总结

1.对于换肤图片案列，明白了一件事一开始一直以为body的高度就是页面的高度，一直想着为什么图片的自适应实现不了，查看控制器才发现body的高度没设置的话是靠其子元素的高度撑开的，不是页面的高度。
2.自动计算案列在获取数量或者单价数组时，用jQuery的map()方法得到的值用parseInt()方法后得到的是jQuery的对象而不是数组，用了get()方法后才是数组，我的想法是parseInt()转为数值，那么应该直接成数组不是吗，这里有点不明白

上一条：PHP变量和常量下一条：李伟忠-0930-作业:会员注册表单
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多