search

博客列表 >原生javascript实例(一键换肤、js更改背景样式、全选不全选、购物车)

原生javascript实例(一键换肤、js更改背景样式、全选不全选、购物车)

零龙
零龙原创
2020年09月03日 04:02:091142浏览

一键换肤

  • 需要更改背景的图片
  • 前端index.html
  • css样式文件
  • js触发文件

实例：

  • 1.index.html
  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.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8. </head>
  9. <link rel="stylesheet" href="static/css/style.css">
  10. <body>
  11.    <div class="container">
  12.        <img src="static/image/1.jfif" alt="">
  13.        <img src="static/image/2.jfif" alt="">
  14.        <img src="static/image/3.jfif" alt="">
  15.    </div>
  16.   <script src="static/js/yjhf.js"></script>
  17. </body>
  18. </html>
  • css 样式文件
  1. .container
  2. {
  3.     width: 300px;
  4.     display: grid;
  5.     grid-template-columns: repeat(3,1fr);
  6.     column-gap: 10px;
  7. }
  8. .container > img
  9. {
  10.     width: 100%;
  11.     border: 3px solid #fff;
  12.     opacity: 0.5;
  14. }
  15. .container >img:hover
  16. {
  17.     opacity: 1;
  18.     cursor: pointer;
  19.     width: 105%;
  20. }
  21. body
  22. {
  23.     background-image: url("../image/1.jfif");
  24.     background-repeat: no-repeat ;
  25. }
  • js触发文件
  2. document.querySelector(".container").addEventListener("click",setSkin,false);
  3. //添加div的点击事件->调用setSkin函数
  4. function setSkin(ev)
  5. {
  6.     document.body.style.backgroundImage = "url("+ ev.target.src +")";
  7.     //将点击的图片设置给body的背景图片
  8. }

更改鼠标移动和移出的tr的样式

  • index.html 前端文件
  • style.css 前端样式文件

  • js.js 触发js设置文件

  • index.html

  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.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>表格隔行变色</title>
  8. <link rel="stylesheet" href="static/css/change-line-color.css">
  9. </head>
  11. <body>
  12.     <table>
  13.         <caption>
  14.           员工信息表
  15.         </caption>
  16.         <thead>
  17.           <tr>
  18.             <th>编号</th>
  19.             <th>姓名</th>
  20.             <th>年龄</th>
  21.             <th>性别</th>
  22.             <th>手机</th>
  23.             <th>邮箱</th>
  24.             <th>部门</th>
  25.             <th>职位</th>
  26.           </tr>
  27.         </thead>
  28.         <tbody>
  29.           <tr>
  30.             <td>1</td>
  31.             <td>杨过</td>
  32.             <td>28</td>
  33.             <td>男</td>
  34.             <td>1890***655</td>
  35.             <td>123@qq.com</td>
  36.             <td>市场部</td>
  37.             <td>销售员</td>
  38.           </tr>
  39.           <tr>
  40.             <td>2</td>
  41.             <td>小龙女</td>
  42.             <td>28</td>
  43.             <td>女</td>
  44.             <td>1390***755</td>
  45.             <td>13323@qq.com</td>
  46.             <td>开发部</td>
  47.             <td>鼓励师</td>
  48.           </tr>
  49.           <tr>
  50.             <td>3</td>
  51.             <td>李莫愁</td>
  52.             <td>38</td>
  53.             <td>女</td>
  54.             <td>1359***222</td>
  55.             <td>1909023@qq.com</td>
  56.             <td>市场部</td>
  57.             <td>部长</td>
  58.           </tr>
  59.           <tr>
  60.             <td>4</td>
  61.             <td>尹志平</td>
  62.             <td>24</td>
  63.             <td>男</td>
  64.             <td>1889***882</td>
  65.             <td>3898023@qq.com</td>
  66.             <td>总经办</td>
  67.             <td>保洁</td>
  68.           </tr>
  69.           <tr>
  70.             <td>5</td>
  71.             <td>欧阳克</td>
  72.             <td>39</td>
  73.             <td>男</td>
  74.             <td>1399***882</td>
  75.             <td>4678933@qq.com</td>
  76.             <td>开发部</td>
  77.             <td>部长</td>
  78.           </tr>
  79.         </tbody>
  80.       </table>
  81.       <script src="static/js/change-line-color.js"></script>
  82. </body>
  83. </html>
  • css文件
  1. table {
  2.   border: 1px solid #000;
  3.   border-collapse: collapse;
  4.   margin: 30px auto;
  5.   text-align: center;
  6.   width: 90%;
  7. }
  8. table caption {
  9.   font-size: 1.2rem;
  10.   margin-bottom: 15px;
  11. }
  12. th,
  13. td {
  14.   border: 1px solid #000;
  15.   padding: 5px;
  16. }
  17. table thead tr:first-of-type {
  18.   background-color: #ddd;
  19. }
  20. .active {
  21.   background-color: lightcyan;
  22. }
  24. /* 加点css也能实现 
  25. table tbody tr:hover {
  26.   background-color: rgb(95, 164, 255);
  27. }
  28. */
  • js文件
  1. var tbody = document.querySelector('tbody');
  3. tbody.addEventListener('mousemove',addBgColor,false);
  4. tbody.addEventListener('mouseout',removeBgColor),false;
  5. //点击Tbody的事件
  6. function addBgColor(ev)
  7. {
  8.      ev.target.parentNode.classList.add("active");
  9.      //点击td后添加tr的样式
  10. }
  11. function removeBgColor(ev)
  12. {
  13.     ev.target.parentNode.classList.remove("active");
  14.     //移出td后清除tr的样式
  15. }

-可以使用css简单修改，注释的css代码可以实现此功能。

购物车自动计算

  • index.html 前端
  • check-all.js 处理的js
  • check.all.css 前端的css
  • index.html
  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.     <link rel="stylesheet" href="static/css/check-all.css" />
  8.   </head>
  9.   <body>
  10.     <table>
  11.       <caption>
  12.         购物车
  13.       </caption>
  14.       <thead>
  15.         <tr>
  16.           <th>
  17.             <input
  18.               type="checkbox"
  19.               name="checkAll"
  20.               id="check-all"
  21.               checked
  22.             /><label for="check-all">全选</label>
  23.           </th>
  24.           <th>ID</th>
  25.           <th>品名</th>
  26.           <th>单位</th>
  27.           <th>单价/元</th>
  28.           <th>数量</th>
  29.           <th>金额/元</th>
  30.         </tr>
  31.       </thead>
  32.       <tbody>
  33.         <tr>
  34.           <td>
  35.             <input type="checkbox" name="itemId" value="SN-1020" checked />
  36.           </td>
  37.           <td>SN-1010</td>
  38.           <td>MacBook Pro电脑</td>
  39.           <td>台</td>
  40.           <td>18999</td>
  41.           <td>1</td>
  42.           <td>18999</td>
  43.         </tr>
  44.         <tr>
  45.           <td>
  46.             <input type="checkbox" name="itemId" value="SN-1020" checked />
  47.           </td>
  48.           <td>SN-1020</td>
  49.           <td>iPhone手机</td>
  50.           <td>部</td>
  51.           <td>4999</td>
  52.           <td>2</td>
  53.           <td>9998</td>
  54.         </tr>
  55.         <tr>
  56.           <td>
  57.             <input type="checkbox" name="itemId" value="SN-1030" checked />
  58.           </td>
  59.           <td>SN-1030</td>
  60.           <td>智能AI音箱</td>
  61.           <td>只</td>
  62.           <td>399</td>
  63.           <td>5</td>
  64.           <td>1995</td>
  65.         </tr>
  66.         <tr>
  67.           <td>
  68.             <input type="checkbox" name="itemId" value="SN-1040" checked />
  69.           </td>
  70.           <td>SN-1040</td>
  71.           <td>SSD移动硬盘</td>
  72.           <td>个</td>
  73.           <td>888</td>
  74.           <td>2</td>
  75.           <td>1776</td>
  76.         </tr>
  77.         <tr>
  78.           <td>
  79.             <input type="checkbox" name="itemId" value="SN-1050" checked />
  80.           </td>
  81.           <td>SN-1050</td>
  82.           <td>黄山毛峰</td>
  83.           <td>斤</td>
  84.           <td>999</td>
  85.           <td>3</td>
  86.           <td>2997</td>
  87.         </tr>
  88.       </tbody>
  89.       <tfoot>
  90.         <tr>
  91.           <td colspan="5">总计:</td>
  92.           <td>13</td>
  93.           <td>35765</td>
  94.         </tr>
  95.       </tfoot>
  96.     </table>
  97.     <div style="width: 90%; margin: 10px auto;">
  98.       <button style="float: right; width: 100px;">结算</button>
  99.     </div>
  100.     <script src="static/js/check-all.js""></script>
  101.   </body>
  102. </html>
  • check-all.js
  2. // 商品数量: 数组
  3. var counts = [];
  4. // 商品金额: 数组
  5. var amounts = [];
  6. // 商品单价: 数组
  7. var unitPrices = [];
  8. // 商品总数量
  9. var totalNum = 0;
  10. // 商品总金额
  11. var totalAmount = 0;
  13. // 获取商品数量控件<input:number>
  14. var numbers = document.querySelectorAll("input[type=number]");
  16. // 获取所有商品单价
  17. var prices = document.querySelectorAll("tbody > tr > td:nth-of-type(5)");
  19. // 1. 生成商品数量: 数组
  20. counts = getCounts(numbers);
  21. function getCounts(numbers) {
  22.   // Array.from(numbers): 将类数组,转为真正数组
  23.   // map()与forEach()功能相同, 只不过他返回一个新数组
  24.   return Array.from(numbers).map(function (item) {
  25.     return parseInt(item.value);
  26.   });
  27. }
  28. console.log(counts);
  30. // 2. 商品单价: 数组
  31. unitPrices = getUnitPrices(prices);
  32. function getUnitPrices(prices) {
  33.   return Array.from(prices).map(function (item) {
  34.     return parseInt(item.innerText);
  35.   });
  36. }
  37. console.log(unitPrices);
  39. // 3. 计算每个商品的金额
  40. amounts = getEveryAmount(counts, unitPrices);
  42. function getEveryAmount(counts, unitPrices) {
  43.   var result = [];
  44.   for (var i = 0; i < unitPrices.length; i++) {
  45.     // 金额 = 单价 * 数量
  46.     amount = unitPrices[i] * counts[i];
  47.     // 将这个商品金额添加到金额数组中
  48.     result.push(amount);
  49.   }
  50.   return result;
  51. }
  52. console.log(amounts);
  53. // 将每个商品金额渲染到页面中
  54. var subtotal = document.querySelectorAll("tbody > tr > td:last-of-type");
  55. // forEach(function (value,[ key, array]))
  56. subtotal.forEach(function (sub, index) {
  57.   sub.innerHTML = amounts[index];
  58. });
  60. // 4. 计算数量总和
  61. totalNum = numTotal(counts);
  62. // reduce()归并,最终将所有数组元素累加成一个值返回
  63. function numTotal(counts) {
  64.   return counts.reduce(function (prev, next) {
  65.     return (prev += next);
  66.   }, 0);
  67. }
  68. console.log(totalNum);
  69. // 将数量之和添加到页面中
  70. document.getElementById("total-num").innerText = totalNum;
  72. // 5 计算所有商品总额
  73. totalAmount = getTotalAmount(amounts);
  74. function getTotalAmount(amounts) {
  75.   return amounts.reduce(function (prev, next) {
  76.     return (prev += next);
  77.   }, 0);
  78. }
  79. console.log(totalAmount);
  80. // 将总金额添加到页面中
  81. document.getElementById("total-amount").innerText = totalAmount;
  83. // 6. 给每个数量控件添加change事件
  84. numbers.forEach(function (item) {
  85.   item.addEventListener("change", autoCalculate, false);
  86. });
  88. function autoCalculate(ev) {
  89.   // 更新总数量
  90.   counts = getCounts(numbers);
  91.   totalNum = numTotal(counts);
  92.   document.getElementById("total-num").innerText = totalNum;
  94.   // 更新每件商品的金额
  95.   var subtotal = document.querySelectorAll("tbody > tr > td:last-of-type");
  96.   subtotal.forEach(function (sub, index) {
  97.     sub.innerHTML = amounts[index];
  98.   });
  99.   amounts = getEveryAmount(counts, unitPrices);
  101.   // 更新总金额
  102.   totalAmount = getTotalAmount(amounts);
  103.   document.getElementById("total-amount").innerText = totalAmount;
  104. }
  • check.css
  1. table {
  2.     border-collapse: collapse;
  3.     width: 90%;
  4.     text-align: center;
  5.     margin: auto;
  6.   }
  8.   table caption {
  9.     margin-bottom: 15px;
  10.     font-size: 1.5rem;
  11.   }
  13.   table th,
  14.   table td {
  15.     border: 1px solid;
  16.     padding: 5px;
  17.   }
  19.   table thead tr:first-of-type {
  20.     background-color: lightblue;
  21.   }
  23.   /* 隔行变色: 偶数行 */
  24.   table tbody tr:nth-of-type(even) {
  25.     background-color: lightcyan;
  26.   }
  28.   table input[type="checkbox"] {
  29.     width: 20px;
  30.     height: 20px;
  31.   }
  33.   button {
  34.     width: 150px;
  35.     height: 30px;
  36.     outline: none;
  37.     border: none;
  38.     background-color: seagreen;
  39.     color: white;
  40.     letter-spacing: 5px;
  41.   }
  42.   button:hover {
  43.     background-color: coral;
  44.     cursor: pointer;
  45.   }

总结：大体的能理解，如果不照做老师的抄写，自己是写不出的。还要加强学习。练习。由于都是抄写课堂上的实例，就不上图了

上一条：let ,const功能与应用场景对象解析与数组解构下一条：PHP大牛成长之路：ES6的模板自变量及模板标签
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多