Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 1. 购物车vue改写 2. 仿 php中文网 app 首页
Blogger Information
Blog 43
fans 0
comment 3
visits 26849
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
1. 购物车vue改写 2. 仿 php中文网 app 首页
Time
Original
496 people have browsed it

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));
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post