1. 购物车vue改写

图片：

购物车

代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>VUE改购物车</title>
  8.     <style>
  9.       .box {
  10.         width: 22em;
  11.         height: 2em;
  12.       }
  14.       .list > li {
  15.         height: 1.6em;
  16.         background-color: #efefef;
  17.         display: grid;
  18.         grid-template-columns: repeat(5, 3em);
  19.         gap: 1em;
  20.         place-items: center right;
  21.         border-bottom: 1px solid #ccc;
  22.       }
  24.       .list > li:first-of-type {
  25.         background-color: lightseagreen;
  26.         color: white;
  27.       }
  29.       .list > li:hover:not(:first-of-type) {
  30.         cursor: pointer;
  31.         background-color: lightcyan;
  32.       }
  34.       .list > li input[type="number"] {
  35.         width: 3em;
  36.         border: none;
  37.         outline: none;
  38.         text-align: center;
  39.         font-size: 1em;
  40.         background-color: transparent;
  41.       }
  43.       .list > li:last-of-type span.total-num,
  44.       .list > li:last-of-type span.total-amount {
  45.         grid-column: span 2;
  46.         place-self: center right;
  47.         color: lightseagreen;
  48.       }
  50.       .account {
  51.         float: right;
  52.         background-color: lightseagreen;
  53.         color: white;
  54.         border: none;
  55.         outline: none;
  56.         width: 4.5em;
  57.         height: 1.8em;
  58.       }
  60.       .account:hover {
  61.         background-color: coral;
  62.         cursor: pointer;
  63.       }
  64.     </style>
  65.     <script src="vue.global.js"></script>
  66.   </head>
  68.   <body>
  69.     <div class="app">
  70.       <div class="box">
  71.         <div class="selectAll">
  72.           <!-- checkAll(): 当全选按钮的状态发生变化化,触发该事件 change  -->
  73.           <input
  74.             type="checkbox"
  75.             class="check-all"
  76.             name="check-all"
  77.             :checked="checkStatus"
  78.             @change="everyStatus($event)"
  79.           />
  80.           <label for="check-all">全选</label>
  81.         </div>
  82.         <ul class="list">
  83.           <li>
  84.             <span>选择</span><span>品名</span><span>数量</span><span>单价</span
  85.             ><span>金额</span>
  86.           </li>
  87.           <li v-for="(item,index) of list" :key="index">
  88.             <input
  89.               type="checkbox"
  90.               @change="oneStatus()"
  91.               :checked
  92.               v-model="item.flag"
  93.             />
  94.             <span class="content">{{item.goods_name}}</span>
  95.             <input
  96.               type="number"
  97.               min="1"
  98.               class="num"
  99.               v-model="item.num"
  100.               v-model="item.flag"
  101.             />
  102.             <span class="price">{{item.price}}</span>
  103.             <span class="amount">{{item.num * item.price}}</span>
  104.           </li>
  106.           <li>
  107.             <span>总计:</span>
  108.             <span class="total-num">{{totalNum}}</span>
  109.             <span class="total-amount">{{totalAmount}}</span>
  110.           </li>
  111.         </ul>
  112.         <button class="account">结算</button>
  113.       </div>
  114.     </div>
  116.     <script>
  117.       const app = Vue.createApp({
  118.         data() {
  119.           return {
  120.             checkStatus: true,
  121.             checkgroup: [],
  122.             list: [
  123.               { goods_name: "手机", num: 1, price: 100, flag: true },
  124.               { goods_name: "电脑", num: 1, price: 200, flag: true },
  125.               { goods_name: "相机", num: 1, price: 300, flag: true },
  126.             ],
  127.           };
  128.         },
  129.         methods: {
  130.           //全选
  131.           everyStatus(ev) {
  132.             let checkArr = document.querySelectorAll(
  133.               '.list li input[type="checkbox"]'
  134.             );
  135.             let status = ev.target.checked;
  136.             checkArr.forEach((item) => (item.checked = status));
  137.             this.list.forEach((item) => (item.flag = status));
  138.           },
  139.           //单选
  140.           oneStatus() {
  141.             let checkArr = document.querySelectorAll(
  142.               '.list li input[type="checkbox"]'
  143.             );
  144.             this.checkStatus = [...checkArr].every(
  145.               (item, index) => item.checked === true
  146.             );
  147.           },
  148.         },
  149.         computed: {
  150.           //总数
  151.           totalNum() {
  152.             let numArr = [...this.list].filter((item) => {
  153.               return item.flag === true;
  154.             });
  155.             let numArr1 = numArr.map((item) => item.num);
  157.             if (numArr1.length == 0) {
  158.               return 0;
  159.             } else {
  160.               return numArr1.reduce((acc, cur) => acc + cur);
  161.             }
  162.           },
  163.           //总金额
  164.           totalAmount() {
  165.             let priceArr = [...this.list].filter((item) => {
  166.               return item.flag === true;
  167.             });
  168.             let priceArr1 = priceArr.map(
  169.               (item) => parseInt(item.num) * parseInt(item.price)
  170.             );
  171.             if (priceArr1.length == 0) {
  172.               return 0;
  173.             } else {
  174.               return priceArr1.reduce((acc, cur) => acc + cur);
  175.             }
  176.           },
  177.         },
  178.       }).mount(".app");
  179.     </script>
  180.   </body>
  181. </html>

2. 仿 php中文网 app 首页

图片：

仿php.cn

代码：

html:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>php.cn移动端首页</title>
  8.     <link rel="stylesheet" href="css/reset.css" />
  9.     <link rel="stylesheet" href="css/header.css" />
  10.     <link rel="stylesheet" href="css/footer.css" />
  11.     <link rel="stylesheet" href="css/main.css" />
  12.     <link
  13.       rel="stylesheet"
  14.       href="//at.alicdn.com/t/font_3280335_q4pmz8itzzo.css"
  15.     />
  16.     <!-- <script src="vue.global.js"></script> -->
  17.   </head>
  18.   <body>
  19.     <!-- 头部 -->
  20.     <header>
  21.       <div class="top">
  22.         <ul class="list">
  23.           <li class="active">推荐</li>
  24.           <li>训练营</li>
  25.           <li>会员</li>
  26.         </ul>
  28.         <div class="logo">
  29.           <i class="iconfont icon-lingdang"></i>
  30.         </div>
  31.       </div>
  32.       <div class="search">
  33.         <div class="content">
  34.           <i class="iconfont icon-fangdajing"></i>
  35.           <span>搜索课程和关键词</span>
  36.         </div>
  37.       </div>
  38.       <div class="slider">
  39.         <div class="imgs">
  40.           <img src="images/1.jpg" alt="" data-index="0" class="active" />
  41.           <img src="images/2.jpg" alt="" data-index="1" />
  42.           <img src="images/3.jpg" alt="" data-index="2" />
  43.           <img src="images/4.jpg" alt="" data-index="3" />
  44.           <img src="images/5.jpg" alt="" data-index="4" />
  45.         </div>
  46.         <div class="btns">
  47.           <span data-index="0" class="active" onclick="setActive()"></span>
  48.           <span data-index="1" onclick="setActive()"></span>
  49.           <span data-index="2" onclick="setActive()"></span>
  50.           <span data-index="3" onclick="setActive()"></span>
  51.           <span data-index="4" onclick="setActive()"></span>
  52.         </div>
  53.       </div>
  54.       <div class="notice">
  55.         <i class="iconfont icon-lingdang"></i>
  56.         <span>【最新】PHP小白到大牛直播班 今晚20：00开课！</span>
  57.       </div>
  58.       <div class="meun">
  59.         <div class="content">
  60.           <div class="iconfont icon-kecheng"></div>
  61.           <div class="span">找课程</div>
  62.         </div>
  63.         <div class="content">
  64.           <div class="iconfont icon-kecheng"></div>
  65.           <div class="span">找课程</div>
  66.         </div>
  67.         <div class="content">
  68.           <div class="iconfont icon-kecheng"></div>
  69.           <div class="span">找课程</div>
  70.         </div>
  71.         <div class="content">
  72.           <div class="iconfont icon-kecheng"></div>
  73.           <div class="span">找课程</div>
  74.         </div>
  75.         <div class="content">
  76.           <div class="iconfont icon-kecheng"></div>
  77.           <div class="span">找课程</div>
  78.         </div>
  79.         <div class="content">
  80.           <div class="iconfont icon-kecheng"></div>
  81.           <div class="span">找课程</div>
  82.         </div>
  83.         <div class="content">
  84.           <div class="iconfont icon-kecheng"></div>
  85.           <div class="span">找课程</div>
  86.         </div>
  87.         <div class="content">
  88.           <div class="iconfont icon-kecheng"></div>
  89.           <div class="span">找课程</div>
  90.         </div>
  91.       </div>
  92.     </header>
  93.     <!-- 内容 -->
  94.     <main>
  95.       <div class="title">
  96.         <span>直播列表</span>
  97.         <a href="#">更多<i class="iconfont icon-xiayige"></i></a>
  98.       </div>
  99.       <div class="list">
  100.         <div class="item">
  101.           <div class="img"><img src="images/banner1.jpg" alt="" /></div>
  102.           <div class="content">
  103.             <span>第二期_大前端线上班</span>
  104.             <span>直播班</span>
  105.             <span><i class="iconfont icon-wode"></i>360人感兴趣</span>
  106.           </div>
  107.         </div>
  108.         <div class="item">
  109.           <div class="img"><img src="images/banner1.jpg" alt="" /></div>
  110.           <div class="content">
  111.             <span>第二期_大前端线上班</span>
  112.             <span>直播班</span>
  113.             <span><i class="iconfont icon-wode"></i>360人感兴趣</span>
  114.           </div>
  115.         </div>
  116.         <div class="item">
  117.           <div class="img"><img src="images/banner1.jpg" alt="" /></div>
  118.           <div class="content">
  119.             <span>第二期_大前端线上班</span>
  120.             <span>直播班</span>
  121.             <span><i class="iconfont icon-wode"></i>360人感兴趣</span>
  122.           </div>
  123.         </div>
  124.       </div>
  125.     </main>
  126.     <!-- 尾部 -->
  127.     <footer>
  128.       <div class="item active">
  129.         <i class="iconfont icon-shouye"></i>
  130.         <span>首页</span>
  131.       </div>
  132.       <div class="item">
  133.         <i class="iconfont icon-fenlei"></i>
  134.         <span>分类</span>
  135.       </div>
  136.       <div class="item">
  137.         <i class="iconfont icon-biaoqianA01_zhibo-63"></i>
  138.         <span>直播</span>
  139.       </div>
  140.       <div class="item">
  141.         <i class="iconfont icon-xuexi-"></i>
  142.         <span>学习</span>
  143.       </div>
  144.       <div class="item">
  145.         <i class="iconfont icon-wode"></i>
  146.         <span>我的</span>
  147.       </div>
  148.     </footer>
  150.     <script src="js/lunbo.js"></script>
  151.     <script>
  152.       // const app = Vue.createApp({
  153.       //   data() {
  154.       //     return {
  155.       //       username: "Hello world",
  156.       //       citys: ["合肥", "北京", "哈尔滨"],
  157.       //       commot: null,
  158.       //     };
  159.       //   },
  160.       // }).mount(".app");
  161.     </script>
  162.   </body>
  163. </html>

lunbo.js代码：

  1. const imgs = document.querySelectorAll("header .slider .imgs img");
  2. const btns = document.querySelectorAll("header .slider .btns span");
  3. let iNow = 0;
  4. // 清空class
  5. function claerClass() {
  6.   imgs.forEach((img) => img.classList.remove("active"));
  7.   btns.forEach((btn) => btn.classList.remove("active"));
  8. }
  9. //添加样式：翻页、自动播放、点击btn按钮
  10. function setActive() {
  11.   iNow = parseInt(event.target.dataset.index);
  12.   setActive1(iNow);
  13. }
  15. //添加样式：翻页、自动播放、点击btn按钮
  16. function setActive1(iNow) {
  17.   //调用清空class自定义函数
  18.   claerClass();
  19.   //if判断iNow !== undefined ：翻页、自动播放；else：点击btn按钮
  20.   if (iNow !== undefined) {
  21.     [...imgs].filter((img, index) => {
  22.       if (iNow === index) {
  23.         img.classList.add("active");
  24.       }
  25.     });
  26.     [...btns].filter((btn, index) => {
  27.       if (iNow === index) {
  28.         btn.classList.add("active");
  29.       }
  30.     });
  31.   }
  32. }
  33. //自动播放函数
  34. function setInteCanshu() {
  35.   iNow++;
  36.   if (iNow == btns.length) iNow = 0;
  37.   setActive1(iNow);
  38. }
  39. //间隔2秒执行一次自动函数
  40. let setInte = setInterval(setInteCanshu, 2000);
  41. //获取整个div
  42. let slider = document.querySelector(".slider");
  43. //鼠标悬停时自动停止播放
  44. slider.onmouseover = () => clearInterval(setInte);
  45. //离开时又自动播放
  46. slider.onmouseout = () => (setInte = setInterval(setInteCanshu, 2000));