ASCII码 ASCII码

1. 购物车vue改写 2. 仿 php中文网 app 首页

发布于:2022-04-19 16:57:38  栏目:技术文档

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. }
  13. .list > li {
  14. height: 1.6em;
  15. background-color: #efefef;
  16. display: grid;
  17. grid-template-columns: repeat(5, 3em);
  18. gap: 1em;
  19. place-items: center right;
  20. border-bottom: 1px solid #ccc;
  21. }
  22. .list > li:first-of-type {
  23. background-color: lightseagreen;
  24. color: white;
  25. }
  26. .list > li:hover:not(:first-of-type) {
  27. cursor: pointer;
  28. background-color: lightcyan;
  29. }
  30. .list > li input[type="number"] {
  31. width: 3em;
  32. border: none;
  33. outline: none;
  34. text-align: center;
  35. font-size: 1em;
  36. background-color: transparent;
  37. }
  38. .list > li:last-of-type span.total-num,
  39. .list > li:last-of-type span.total-amount {
  40. grid-column: span 2;
  41. place-self: center right;
  42. color: lightseagreen;
  43. }
  44. .account {
  45. float: right;
  46. background-color: lightseagreen;
  47. color: white;
  48. border: none;
  49. outline: none;
  50. width: 4.5em;
  51. height: 1.8em;
  52. }
  53. .account:hover {
  54. background-color: coral;
  55. cursor: pointer;
  56. }
  57. </style>
  58. <script src="vue.global.js"></script>
  59. </head>
  60. <body>
  61. <div class="app">
  62. <div class="box">
  63. <div class="selectAll">
  64. <!-- checkAll(): 当全选按钮的状态发生变化化,触发该事件 change -->
  65. <input
  66. type="checkbox"
  67. class="check-all"
  68. name="check-all"
  69. :checked="checkStatus"
  70. @change="everyStatus($event)"
  71. />
  72. <label for="check-all">全选</label>
  73. </div>
  74. <ul class="list">
  75. <li>
  76. <span>选择</span><span>品名</span><span>数量</span><span>单价</span
  77. ><span>金额</span>
  78. </li>
  79. <li v-for="(item,index) of list" :key="index">
  80. <input
  81. type="checkbox"
  82. @change="oneStatus()"
  83. :checked
  84. v-model="item.flag"
  85. />
  86. <span class="content">{{item.goods_name}}</span>
  87. <input
  88. type="number"
  89. min="1"
  90. class="num"
  91. v-model="item.num"
  92. v-model="item.flag"
  93. />
  94. <span class="price">{{item.price}}</span>
  95. <span class="amount">{{item.num * item.price}}</span>
  96. </li>
  97. <li>
  98. <span>总计:</span>
  99. <span class="total-num">{{totalNum}}</span>
  100. <span class="total-amount">{{totalAmount}}</span>
  101. </li>
  102. </ul>
  103. <button class="account">结算</button>
  104. </div>
  105. </div>
  106. <script>
  107. const app = Vue.createApp({
  108. data() {
  109. return {
  110. checkStatus: true,
  111. checkgroup: [],
  112. list: [
  113. { goods_name: "手机", num: 1, price: 100, flag: true },
  114. { goods_name: "电脑", num: 1, price: 200, flag: true },
  115. { goods_name: "相机", num: 1, price: 300, flag: true },
  116. ],
  117. };
  118. },
  119. methods: {
  120. //全选
  121. everyStatus(ev) {
  122. let checkArr = document.querySelectorAll(
  123. '.list li input[type="checkbox"]'
  124. );
  125. let status = ev.target.checked;
  126. checkArr.forEach((item) => (item.checked = status));
  127. this.list.forEach((item) => (item.flag = status));
  128. },
  129. //单选
  130. oneStatus() {
  131. let checkArr = document.querySelectorAll(
  132. '.list li input[type="checkbox"]'
  133. );
  134. this.checkStatus = [...checkArr].every(
  135. (item, index) => item.checked === true
  136. );
  137. },
  138. },
  139. computed: {
  140. //总数
  141. totalNum() {
  142. let numArr = [...this.list].filter((item) => {
  143. return item.flag === true;
  144. });
  145. let numArr1 = numArr.map((item) => item.num);
  146. if (numArr1.length == 0) {
  147. return 0;
  148. } else {
  149. return numArr1.reduce((acc, cur) => acc + cur);
  150. }
  151. },
  152. //总金额
  153. totalAmount() {
  154. let priceArr = [...this.list].filter((item) => {
  155. return item.flag === true;
  156. });
  157. let priceArr1 = priceArr.map(
  158. (item) => parseInt(item.num) * parseInt(item.price)
  159. );
  160. if (priceArr1.length == 0) {
  161. return 0;
  162. } else {
  163. return priceArr1.reduce((acc, cur) => acc + cur);
  164. }
  165. },
  166. },
  167. }).mount(".app");
  168. </script>
  169. </body>
  170. </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>
  27. <div class="logo">
  28. <i class="iconfont icon-lingdang"></i>
  29. </div>
  30. </div>
  31. <div class="search">
  32. <div class="content">
  33. <i class="iconfont icon-fangdajing"></i>
  34. <span>搜索课程和关键词</span>
  35. </div>
  36. </div>
  37. <div class="slider">
  38. <div class="imgs">
  39. <img src="images/1.jpg" alt="" data-index="0" class="active" />
  40. <img src="images/2.jpg" alt="" data-index="1" />
  41. <img src="images/3.jpg" alt="" data-index="2" />
  42. <img src="images/4.jpg" alt="" data-index="3" />
  43. <img src="images/5.jpg" alt="" data-index="4" />
  44. </div>
  45. <div class="btns">
  46. <span data-index="0" class="active" onclick="setActive()"></span>
  47. <span data-index="1" onclick="setActive()"></span>
  48. <span data-index="2" onclick="setActive()"></span>
  49. <span data-index="3" onclick="setActive()"></span>
  50. <span data-index="4" onclick="setActive()"></span>
  51. </div>
  52. </div>
  53. <div class="notice">
  54. <i class="iconfont icon-lingdang"></i>
  55. <span>【最新】PHP小白到大牛直播班 今晚20:00开课!</span>
  56. </div>
  57. <div class="meun">
  58. <div class="content">
  59. <div class="iconfont icon-kecheng"></div>
  60. <div class="span">找课程</div>
  61. </div>
  62. <div class="content">
  63. <div class="iconfont icon-kecheng"></div>
  64. <div class="span">找课程</div>
  65. </div>
  66. <div class="content">
  67. <div class="iconfont icon-kecheng"></div>
  68. <div class="span">找课程</div>
  69. </div>
  70. <div class="content">
  71. <div class="iconfont icon-kecheng"></div>
  72. <div class="span">找课程</div>
  73. </div>
  74. <div class="content">
  75. <div class="iconfont icon-kecheng"></div>
  76. <div class="span">找课程</div>
  77. </div>
  78. <div class="content">
  79. <div class="iconfont icon-kecheng"></div>
  80. <div class="span">找课程</div>
  81. </div>
  82. <div class="content">
  83. <div class="iconfont icon-kecheng"></div>
  84. <div class="span">找课程</div>
  85. </div>
  86. <div class="content">
  87. <div class="iconfont icon-kecheng"></div>
  88. <div class="span">找课程</div>
  89. </div>
  90. </div>
  91. </header>
  92. <!-- 内容 -->
  93. <main>
  94. <div class="title">
  95. <span>直播列表</span>
  96. <a href="#">更多<i class="iconfont icon-xiayige"></i></a>
  97. </div>
  98. <div class="list">
  99. <div class="item">
  100. <div class="img"><img src="images/banner1.jpg" alt="" /></div>
  101. <div class="content">
  102. <span>第二期_大前端线上班</span>
  103. <span>直播班</span>
  104. <span><i class="iconfont icon-wode"></i>360人感兴趣</span>
  105. </div>
  106. </div>
  107. <div class="item">
  108. <div class="img"><img src="images/banner1.jpg" alt="" /></div>
  109. <div class="content">
  110. <span>第二期_大前端线上班</span>
  111. <span>直播班</span>
  112. <span><i class="iconfont icon-wode"></i>360人感兴趣</span>
  113. </div>
  114. </div>
  115. <div class="item">
  116. <div class="img"><img src="images/banner1.jpg" alt="" /></div>
  117. <div class="content">
  118. <span>第二期_大前端线上班</span>
  119. <span>直播班</span>
  120. <span><i class="iconfont icon-wode"></i>360人感兴趣</span>
  121. </div>
  122. </div>
  123. </div>
  124. </main>
  125. <!-- 尾部 -->
  126. <footer>
  127. <div class="item active">
  128. <i class="iconfont icon-shouye"></i>
  129. <span>首页</span>
  130. </div>
  131. <div class="item">
  132. <i class="iconfont icon-fenlei"></i>
  133. <span>分类</span>
  134. </div>
  135. <div class="item">
  136. <i class="iconfont icon-biaoqianA01_zhibo-63"></i>
  137. <span>直播</span>
  138. </div>
  139. <div class="item">
  140. <i class="iconfont icon-xuexi-"></i>
  141. <span>学习</span>
  142. </div>
  143. <div class="item">
  144. <i class="iconfont icon-wode"></i>
  145. <span>我的</span>
  146. </div>
  147. </footer>
  148. <script src="js/lunbo.js"></script>
  149. <script>
  150. // const app = Vue.createApp({
  151. // data() {
  152. // return {
  153. // username: "Hello world",
  154. // citys: ["合肥", "北京", "哈尔滨"],
  155. // commot: null,
  156. // };
  157. // },
  158. // }).mount(".app");
  159. </script>
  160. </body>
  161. </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. }
  14. //添加样式:翻页、自动播放、点击btn按钮
  15. function setActive1(iNow) {
  16. //调用清空class自定义函数
  17. claerClass();
  18. //if判断iNow !== undefined :翻页、自动播放;else:点击btn按钮
  19. if (iNow !== undefined) {
  20. [...imgs].filter((img, index) => {
  21. if (iNow === index) {
  22. img.classList.add("active");
  23. }
  24. });
  25. [...btns].filter((btn, index) => {
  26. if (iNow === index) {
  27. btn.classList.add("active");
  28. }
  29. });
  30. }
  31. }
  32. //自动播放函数
  33. function setInteCanshu() {
  34. iNow++;
  35. if (iNow == btns.length) iNow = 0;
  36. setActive1(iNow);
  37. }
  38. //间隔2秒执行一次自动函数
  39. let setInte = setInterval(setInteCanshu, 2000);
  40. //获取整个div
  41. let slider = document.querySelector(".slider");
  42. //鼠标悬停时自动停止播放
  43. slider.onmouseover = () => clearInterval(setInte);
  44. //离开时又自动播放
  45. slider.onmouseout = () => (setInte = setInterval(setInteCanshu, 2000));
相关推荐
阅读 +