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));

更多相关文章

  1. Android深入浅出系列课程---Lesson6 AAF110503_Activity状态保存
  2. 完善课堂的案例,将右侧布局实现
  3. Android多功能课程表项目实现（完整版）
  4. 简单实例：图文列表、表格（课程表）
  5. 图文列表和课程表
  6. 仿PHP中文网右侧部分
  7. 仿PHP中文网首页
  8. 仿php中文网右侧内容
  9. php中文网布局实战

随机推荐

  1. 为什么HttpUrlConnection在移动数据连接
  2. Thrift项目Server端开发流程
  3. Akka ZeroMQExtension使用一个zeromq套接
  4. 关键词final的用途是什么?
  5. .Net JAVA JS 加密（三方互通）
  6. 增强的for循环中局部变量的范围
  7. javaScript函数中执行C#代码中的函数
  8. thinking in java逍遥游记 之 夜的第四章
  9. Maven编译提示：软件包不存在
  10. java 使用jdbc连接Greenplum数据库和Post