devbox
Cpp五条
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

第十四届蓝桥杯web第三次模拟_web蓝桥杯 模拟 下载

作者：Cpp五条 | 2024-06-12 02:56:58

赞

踩

web蓝桥杯 模拟 下载

网页ppt

  1. const sectionsCount = $("section").length;
  2. let activeIndex = 0;
  3.  
  4. // 监听用户按下空格和方向键的事件
  5. $(document).on("keydown", (e) => {
  6.   e.preventDefault();
  7.   if (e.key === " " || e.key === "ArrowRight") {
  8.     goRight();
  9.   }
  10.   if (e.key === "ArrowLeft") {
  11.     goLeft();
  12.   }
  13. });
  14.  
  15. // 监听按钮点击事件
  16. $(".btn.left").click(goLeft);
  17. $(".btn.right").click(goRight);
  18.  
  19. // 切换下一张的函数
  20. function goLeft() {
  21.   var list=document.querySelectorAll('section');
  22.   for(i=1;i<list.length;i++)
  23.   list[activeIndex].style.display="none";
  24.   if (activeIndex === 4) {
  25.     $(".btn.right").removeClass('disable')
  26.  
  27.   }
  28.   if (activeIndex === 0) {
  29.     return;
  30.   }
  31.   if (activeIndex === 1) {
  32.     $(".btn.left").addClass('disable',true)
  33.  
  34.   }
  35.   activeIndex -= 1;
  36.   switchPage();
  37. }
  38.  
  39. // 切换上一张的函数
  40. function goRight() {
  41.   var list=document.querySelectorAll('section');
  42.   for(i=1;i<list.length;i++)
  43.   list[activeIndex].style.display="none";
  44.   if (activeIndex === sectionsCount - 1) {
  45.     return;
  46.   }
  47.   $(".btn.left").removeClass('disable')
  48.   activeIndex += 1;
  49.   if(activeIndex==4){
  50.     $(".btn.right").addClass('disable',true)
  51.   }
  52.   switchPage();
  53.  
  54. }
  55.  
  56. function switchPage() {
  57.   
  58. // TODO: 请补充该函数，实现根据activeIndex切换页面的功能，并且在到达最后一页或第一页时给相应的按钮添加disable类
  59.  
  60.   var list=document.querySelectorAll('section');
  61. // console.log(list)
  62. // console.log(activeIndex)
  63.  
  64.  
  65.   list[activeIndex].style.display="block";
  66.   
  67.   
  68.  $(".page").html(activeIndex+1+"/"+5);
  69.  
  70.  
  71. }

西游记之西天取经

  1. body {
  2.     background: url(../images/background.webp) no-repeat;
  3.     background-size: cover;
  4.     overflow-y: hidden;
  5. }
  6. .playground {
  7.     width: 800px;
  8.     margin: 400px auto; 
  9.     overflow: hidden;
  10. }
  11. .actor { 
  12.     float: left;
  13. }
  14. .actor:first-child {
  15.     width: 200px;
  16.     height: 180px;
  17.     background: url(../images/west_01.png) no-repeat;
  18.     /* TODO 填空 */
  19.     animation: a1 0.8s steps(8) infinite;
  20. }
  21. .actor:nth-child(2) {
  22.     width: 200px;
  23.     height: 180px;
  24.     background: url(../images/west_02.png) no-repeat;
  25.     /* TODO 填空 */
  26.     animation: a2 0.8s steps(8) infinite;
  27. }
  28. .actor:nth-child(3) {
  29.     width: 170px;
  30.     height: 240px;
  31.     background: url(../images/west_03.png) no-repeat;
  32.     /* TODO 填空 */
  33.     animation: a3 0.8s steps(8) infinite; 
  34. }
  35. .actor:last-child {
  36.     width: 210px;
  37.     height: 200px;
  38.     background: url(../images/west_04.png) no-repeat;
  39.     /* TODO 填空 */
  40.     animation: a4 0.8s steps(8) infinite;
  41. }
  42. @keyframes a1{
  43.     from{
  44.         background-position-x: 0;
  45.     }
  46.     to{
  47.         background-position-x: -1600px;
  48.     }
  49. }
  50. @keyframes a2{
  51.     from{
  52.         background-position-x: 0;
  53.     }
  54.     to{
  55.         background-position-x: -1600px;
  56.     }
  57. }
  58. @keyframes a3{
  59.     from{
  60.         background-position-x: 0;
  61.     }
  62.     to{
  63.         background-position-x: -1360px;
  64.     }
  65. }
  66. @keyframes a4{
  67.     from{
  68.         background-position-x: 0;
  69.     }
  70.     to{
  71.         background-position-x: -1680px;
  72.     }
  73. }

商品销量和销售额实时展示看板

  1. // 指定图表的配置项和数据
  2. const charData = {
  3.     title: {
  4.         text: '云课课程销量和销售额看板',
  5.         width: 100,
  6.         height: 50,
  7.         textStyle: {
  8.             lineHeight: 50,
  9.         },
  10.         left: 'center',
  11.  
  12.     },
  13.     grid: {
  14.         top: 80,
  15.     },
  16.     tooltip:{
  17.         show: true,
  18.     },
  19.     xAxis: {
  20.         data: [],
  21.     },
  22.     // TODO：补全 `yAxis` 的设置，要求“销售额”（即，配置项 `name`）的位置（即，配置项 `position`）在图表的左侧，“销量”（即，配置项 `name`）的位置（即，配置项 `position`）在图表的右侧。
  23.     yAxis: [{
  24.         type: 'value',
  25.         name: '销售额',
  26.         position: 'left',
  27.     },
  28.     {
  29.         type: 'value',
  30.         name: '金额',
  31.         position: 'right',
  32.     }],
  33.     series: [
  34.         {
  35.             name: '销售额',
  36.             type: 'line',
  37.             data: [],
  38.             yAxisIndex: 0,
  39.             smooth: true
  40.         },
  41.         {
  42.             name: '销量',
  43.             type: 'bar',
  44.             data: [],
  45.             yAxisIndex: 1,
  46.             smooth: true
  47.         }
  48.     ]
  49. };
  50.  
  51. // 以下代码为模拟后端服务器返回数据
  52. let sale = 0;
  53. let count = 0;
  54. // 销售额
  55. const saleObj = {};
  56. // 销量
  57. const countObj = {};
  58. let index = 0;
  59. function Ajax() {
  60.     return new Promise((resolve, reject) => {
  61.         let randomNum = Math.random();
  62.         const randomSum = () => (randomNum * 500 + 900);
  63.         const randomCount = () => (randomNum * 50 + 80);
  64.         let i = index++ * 10
  65.         let key = `10:${i == 0 ? "00" : i}`;
  66.         if (index < 7) {
  67.             sale = randomSum();
  68.             Object.assign(saleObj, { [key]: sale.toFixed(2) })
  69.             count = randomCount();
  70.             Object.assign(countObj, { [key]: count.toFixed(2) })
  71.         }
  72.  
  73.         const respondBody = {
  74.             "code": 200,
  75.             "msg": "success",
  76.             "data": {
  77.                 saleObj,
  78.                 countObj
  79.             }
  80.         };
  81.         setTimeout(() => {
  82.             resolve(respondBody);
  83.         }, 1000)
  84.     })
  85. }
  86.  
  87. async function renderChart() {
  88.     const result = await Ajax();
  89.     document.querySelector("#result").innerText = JSON.stringify(result);
  90.     const myChart = echarts.init(document.getElementById('main'));
  91.     // TODO：补全代码，正确给 X 轴的时间，以及 Y 轴的商品的销售额 saleObj 和销量赋值 countObj。
  92.  
  93.     console.log( Object.values(saleObj))
  94.     charData.series[0].data=Object.values(saleObj)
  95.     charData.series[1].data=Object.values(countObj)
  96.     charData.xAxis.data= (Object.keys(saleObj))
  97.     console.log( charData.xAxis,"chartdata")
  98.     myChart.setOption(charData, true);
  99.     document.querySelector("#data").innerText = JSON.stringify(charData);
  100. }
  101. renderChart();
  102. let times = 0;
  103. let timer = setInterval(() => {
  104.     renderChart();
  105.     ++times == 6 && clearInterval(timer);
  106. }, 2000)

校园一卡通

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>蓝桥校园一卡通</title>
  8.     <link rel="stylesheet" href="./css/bootstrap.min.css">
  9.     <link rel="stylesheet" href="./css/index.css" />
  10. </head>
  11.  
  12. <body>
  13.     <div id="app">
  14.         <div class="form">
  15.             <div class="card" id="cardStyle">
  16.                 <div class="cardName">蓝桥校园一卡通</div>
  17.                 <div class="info">
  18.                     <div class="item"></div>
  19.                     <div class="item"></div>
  20.                     <div class="item"></div>
  21.                 </div>
  22.             </div>
  23.             <div class="content">
  24.                 <div class="form-group">
  25.                     <label for="studentName">姓名</label>
  26.                     <input type="text" class="form-control" id="studentName" placeholder="请输入姓名"
  27.                         aria-describedby="inputSuccess2Status">
  28.                     <span id="vail_name" style="display: none;" class="help-block"> 姓名是2-4个汉字，请您检查输入的内容</span>
  29.                 </div>
  30.                 <div class="form-group">
  31.                     <label for="studentId">学号</label>
  32.                     <input type="number" class="form-control" id="studentId" placeholder="请输入学号">
  33.                     <span id="vail_studentId" style="display: none;" class="help-block"> 学号是1-12位的数字，请您检查输入的内容</span>
  34.                 </div>
  35.                 <div class="form-group">
  36.                     <label for="college">学院</label>
  37.                     <select id="college" class="form-control">
  38.                         <option value="软件工程学院">软件工程学院</option>
  39.                         <option value="信息技术学院">信息技术学院</option>
  40.                         <option value="数字媒体学院">数字媒体学院</option>
  41.                         <option value="计算机科学学院">计算机科学学院</option>
  42.                     </select>
  43.                 </div>
  44.                 <button id="submit">制卡</button>
  45.             </div>
  46.         </div>
  47.     </div>
  48.     <script>
  49.         // 获取DOM元素对象
  50.         const studentName = document.getElementById("studentName"); // 姓名
  51.         const formgroup = document.getElementsByClassName("form-group"); // 姓名
  52.  
  53.         const studentId = document.getElementById("studentId");  // 学号
  54.         const college = document.getElementById("college"); // 学院
  55.         const submit = document.getElementById("submit");  // 制卡按钮
  56.         const cardStyle = document.getElementById("cardStyle"); // 卡片
  57.         const item = document.querySelectorAll(".item") // 卡片项
  58.  
  59.         submit.onclick = () => {
  60.             document.getElementById('vail_name').style.display = 'block'
  61.             // console.log(item.length)
  62.             // TODO 待补充代码
  63.             var nameReg = /^[\u4e00-\u9fa5]{2,4}$/; // 2-4位的汉字名字
  64.             console.log(studentName.value)
  65.             var naR = nameReg.test(studentName.value)
  66.             console.log(naR)
  67.  
  68.             var numberReg = /^\d{1,12}$/; // 2-4位的汉字名字
  69.             var nR = numberReg.test(studentId.value);
  70.             console.log(nR)
  71.             if (!naR) {
  72.                 formgroup[0].classList.add("has-error")
  73.                 document.getElementById('vail_name').style.display = 'block'
  74.  
  75.             }
  76.             if (!nR) {
  77.  
  78.                 formgroup[1].classList.add("has-error")
  79.                 document.getElementById('vail_studentId').style.display = 'block'
  80.  
  81.             }
  82.             if (naR && nR) {
  83.                 item[0].innerHTML = "姓名：" + studentName.value
  84.                 item[1].innerHTML = "学号：" + studentId.value
  85.                 item[2].innerHTML = "学院：" + college.value
  86.                 // 添加 showCard 类显示放大一卡通的动画，请勿删除
  87.                 cardStyle.classList.add('showCard')
  88.             }
  89.  
  90.         }
  91.  
  92.     </script>
  93. </body>
  94.  
  95. </html>

心愿便利贴

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>心愿便利贴</title>
  6.         <!-- 引入element-ui样式 --> 
  7.         <link rel="stylesheet" href="css/index.css">
  8.         <link rel="stylesheet" href="./css/wish.css">
  9.         <!-- 引入element-ui组件库 -->  
  10.         <script src="./js/vue.min.js"></script> 
  11.         <script src="./js/index.js"></script>
  12.     </head>
  13.     <body>
  14.         <div id="app">
  15.             <h1>心愿便利贴</h1>
  16.             <div class="container">
  17.                 <!-- TODO 待修改的代码 -->
  18.                 <div class="card" :class="item.css" v-for="(item,index) in wishList" :key="index">
  19.                     <div class="header">
  20.                         <img class="close" @click="closeCard(index)" src="./images/ding.png" alt="close">
  21.                     </div>
  22.                     <el-image
  23.                         v-if="item.pic"
  24.                         style="width: 100px; height: 100px"
  25.                         :src="item.pic" 
  26.                         :preview-src-list="picList">
  27.                       </el-image>
  28.                     <div class="content"> 
  29.                         {{item.content}}
  30.                     </div>
  31.                     <div class="name">{{item.name}}</div>
  32.                 </div>
  33.             </div>
  34.             <div class="form">
  35.                 <el-form ref="form" :rules="rules" label-position="left" :model="form" label-width="80px">
  36.                     <el-form-item label="姓名" prop="name">
  37.                         <el-input id="firstName" v-model="form.name" placeholder="请输入姓名"></el-input>
  38.                     </el-form-item>
  39.                     <el-form-item label="许愿内容" prop="content">
  40.                         <el-input type="textarea" id="content" placeholder="请输入内容" v-model="form.content" show-word-limit></el-input>
  41.                     </el-form-item>
  42.                     <el-form-item label="图片上传">
  43.                     <el-upload
  44.                       ref="uploadRef"
  45.                       action="#"
  46.                       :limit="1"
  47.                       list-type="picture-card" 
  48.                       :on-remove="handleRemove"
  49.                       :on-change="getPic"
  50.                       :auto-upload="false">
  51.                         <i slot="default" class="el-icon-plus"></i>
  52.                         <div slot="file" slot-scope="{file}">
  53.                           <img
  54.                             class="el-upload-list__item-thumbnail"
  55.                             :src="file.url" 
  56.                           >
  57.                           <span class="el-upload-list__item-actions">
  58.                             <span
  59.                               class="el-upload-list__item-preview"
  60.                               @click="handlePictureCardPreview(file)"
  61.                             >
  62.                               <i class="el-icon-zoom-in"></i>
  63.                             </span>  
  64.                             <span
  65.                                 v-if="!disabled"
  66.                                 class="el-upload-list__item-delete"
  67.                                 @click="handleRemove(file)">
  68.                             <i class="el-icon-delete"></i>
  69.                             </span>
  70.                           </span> 
  71.                         </div>
  72.                     </el-upload> 
  73.                     </el-form-item>
  74.                     <el-form-item>
  75.                         <el-button id="onSubmit" type="primary" @click="onSubmit">发布</el-button>
  76.                         <el-button @click="onRest">重置</el-button>
  77.                     </el-form-item>
  78.                 </el-form>
  79.                 <el-dialog :visible.sync="dialogVisible">
  80.                   <img width="100%" :src="form.pic" alt="">
  81.                 </el-dialog>
  82.             </div>
  83.         </div> 
  84.     </body>
  85.     <script>
  86.         const app = new Vue({
  87.             el: "#app",
  88.             data: { 
  89.                 wishList: [], 
  90.                 form: {
  91.                     name:'',
  92.                     content: '',
  93.                     pic: ''
  94.                 },
  95.                 rules: {
  96.                     // TODO 待补充验证的代码
  97.  
  98.             name: [
  99.             { required: true, message: '请输入活动名称', trigger: 'blur' },
  100.             { min: 2, max: 4, message: '长度在 3 到 5 个字符', trigger: 'blur' }
  101.           ],
  102.           content: [
  103.             { required: true, message: '请输入活动名称', trigger: 'blur' },
  104.             { min: 1, max: 30, message: '长度在 3 到 5 个字符', trigger: 'blur' }
  105.           ],
  106.  
  107.                      
  108.                 },
  109.                 num:1,
  110.                 picList: [],
  111.                 textarea: '', 
  112.                 dialogVisible: false,
  113.                 disabled: false
  114.             },
  115.             methods: { 
  116.                 // 提交方法
  117.               onSubmit() { 
  118.                   this.$refs['form'].validate((valid) => {
  119.                     if (valid) {
  120.                       let obj = this.form;
  121.                       obj.css = 'item' + this.num;
  122.                       this.num++;
  123.                       if(this.num > 4) {
  124.                         this.num = 1;
  125.                       }
  126.                       this.wishList.push(obj)
  127.                       this.form = {};
  128.                       this.$refs.uploadRef.uploadFiles.pop()  
  129.                       console.log(this.wishList);
  130.                     } else { 
  131.                       this.$message({
  132.                         message: '提交错误！请检查输入内容',
  133.                         type: 'warning'
  134.                       });
  135.                       return false;
  136.                     }
  137.                   }); 
  138.               },
  139.               // 关闭许愿卡
  140.               closeCard(index) { 
  141.                   this.wishList.splice(index,1)
  142.               },
  143.               // 重置表单
  144.               onRest() { 
  145.                   this.$refs['form'].resetFields();
  146.               },
  147.               // 图片删除
  148.               handleRemove(file) { 
  149.                   let index = this.$refs.uploadRef.uploadFiles.findIndex(e => e.uid === file.uid);
  150.                   this.$refs.uploadRef.uploadFiles.splice(index,1); 
  151.               },
  152.               // 模拟上传图片
  153.               getPic(e) { 
  154.                   this.form.pic = e.url;
  155.                   this.picList.push(e.url)
  156.               }, 
  157.               // 预览图片
  158.               handlePictureCardPreview(file, fileList) {
  159.                 this.form.pic = file.url;
  160.                 this.dialogVisible = true;
  161.               }
  162.             }
  163.         });
  164.     </script>
  165. </html>

消失的Token

  1. <!DOCTYPE html>
  2. <html lang="zn-CH">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <script src="./lib/vue.min.js"></script>
  9.     <script src="./lib/vuex.min.js"></script>
  10.     <script src="./store/BaseModule.js"></script>
  11.     <script src="./store/UserModule.js"></script>
  12.     <script src="./store/index.js"></script>
  13.     <link rel="stylesheet" href="./css/style.css">
  14. </head>
  15.  
  16. <body>
  17.     <div id="app">
  18.         <div class="wrapper" style="width: 900px;">
  19.  
  20.             <!-- 2. 登录成功后的欢迎界面 -->
  21.             <Panel v-if="token" :username="username">
  22.                 {{welcome}}
  23.             </Panel>
  24.  
  25.             <!-- 1. 登录界面 -->
  26.             <Login v-else @confirm="login">
  27.                 {{welcome}}
  28.             </Login>
  29.  
  30.         </div>
  31.     </div>
  32.  
  33.     <script src="./components/login.js"></script>
  34.     <script src="./components/panel.js"></script>
  35.     <script>
  36.        // TODO 修改下面错误代码
  37.  
  38.         var app = new Vue({
  39.             el: '#app',
  40.             data() { },
  41.             computed: {
  42.                 welcome() {
  43.                     return store.getters.welcome
  44.                 },
  45.                 username() {
  46.                     return store.getters['user/username']
  47.                 },
  48.                 token() {
  49.                     return store.getters['user/token']
  50.                 }
  51.             },
  52.             methods: {
  53.                 // 回车/点击确认的回调事件
  54.                 login(username) {
  55.                     username && store.commit('user/login', { username, token: 'sxgWKnLADfS8hUxbiMWyb' })
  56.                     username && store.commit('say', '登录成功，欢迎你回来！')
  57.                 }
  58.             }
  59.         })
  60.     </script>
  61. </body>
  62.  
  63. </html>

封装promise

  1. const fs = require('fs')
  2. const path = require('path')
  3. const textPath = path.join(__dirname, '/test.md')
  4.  
  5. // 读取示例文件
  6. fs.readFile(textPath, 'utf8', (err, contrast) => {
  7.   // 通过promisefy转化为链式调用
  8.   const readFileSync = promisefy(fs.readFile)
  9.   // console.log(JSON.stringify(readFileSync) )
  10.   readFileSync(textPath, 'utf8')
  11.     .then((res) => {
  12.       console.log(res === contrast) // 此处结果预期：true，即promise返回内容与前面读取内容一致
  13.     })
  14.     .catch((err) => {})
  15. })
  16.  
  17. const promisefy = (fn) => {
  18.   // TODO 此处完成该函数的封装
  19.   return function(path,type){
  20.     return new Promise((resolve,reject)=>{
  21.       fn(path,type,(err,res)=>{
  22.         if(err){
  23.           console.log(err)
  24.           reject(err)
  25.         }
  26.         console.log(res)
  27.  
  28.         resolve(res)
  29.       })
  30.     })
  31.   }
  32. }
  33.  
  34. module.exports = promisefy // 请勿删除该行代码

购物车

  1. //模拟赛三拖拽问题
  2.  
  3. <!-- TODO: 补充拖拽事件，请不要改动任何 id 属性 -->
  4. <template>
  5.   <div class="container">
  6.     <div class="good-list">
  7.       <div draggable="true" @dragstart="drag($event,good)" v-for="good in goods" :key="good.name" class="good">
  8.         <img :src="good.cover" />
  9.         <span>{{ good.name }}</span>
  10.         <span>￥{{ good.price }}</span>
  11.       </div>
  12.     </div>
  13.     <div id="trolley"  @dragover.prevent @drop="dragend($event)" class="trolley">
  14.       <span id="bought" class="bought" v-if="bought.length !== 0">{{
  15.         bought.length
  16.       }}</span>
  17.       <img src="./images/trolley.jpeg" />
  18.     </div>
  19.     <div class="result">
  20.       <div>
  21.         购物车商品：<span id="goods">{{ goodsDetail }}</span>
  22.       </div>
  23.       <div>
  24.         购物车商品总计：<span id="total">{{ totalPrice }}</span>
  25.       </div>
  26.     </div>
  27.   </div>
  28. </template>
  29.  
  30. module.exports = {
  31.   data() {
  32.     return {
  33.       goods: [
  34.         {
  35.           name: "畅销书",
  36.           price: 30,
  37.           cover: "./images/book.jpeg",
  38.         },
  39.         {
  40.           name: "收纳箱",
  41.           price: 60,
  42.           cover: "./images/box.jpeg",
  43.         },
  44.         {
  45.           name: "纸巾",
  46.           price: 20,
  47.           cover: "./images/paper.jpeg",
  48.         },
  49.         {
  50.           name: "电视",
  51.           price: 1000,
  52.           cover: "./images/tv.jpg",
  53.         },
  54.       ],
  55.       bought: [],
  56.     };
  57.   },
  58.   // TODO: 请补充实现代码
  59.   computed: {
  60.     totalPrice() {
  61.       console.log(this.bought);
  62.       let sum=0
  63.       for(let i=0;i<this.bought.length;i++){
  64. sum+=Number(this.bought[i].price)
  65.       }
  66.       return sum;
  67.     },
  68.     goodsDetail() {
  69.       let obj={
  70.         '畅销书':0,
  71.         '收纳箱':0,
  72.         '纸巾':0,
  73.         '电视':0
  74.       }
  75.       for(let it of this.bought){
  76.         if(it.name=='畅销书')obj['畅销书']++
  77.         if(it.name=='收纳箱')obj['收纳箱']++
  78.         if(it.name=='纸巾')obj['纸巾']++
  79.         if(it.name=='电视')obj['电视']++
  80.       }
  81.     let str=''
  82.     for(let it in obj){
  83.       if(obj[it]>0){
  84. str+=`${it}*${obj[it]} `
  85.       }
  86.     }
  87.       return str;
  88.     },
  89.   },
  90.   methods: {
  91.     drag(ev,good){
  92.  ev.dataTransfer.setData("name", good.name);
  93.  ev.dataTransfer.setData("price", good.price);
  94.     },
  95.     dragend(ev){
  96.   const name = ev.dataTransfer.getData("name");
  97.   const price = ev.dataTransfer.getData("price");
  98.   let obj={
  99.     name,
  100.     price
  101.   }
  102.   this.bought.push(obj)
  103.     }
  104.   }
  105. };

分页

  1. /**
  2.  * @description 得到分页数组 indexArr，如[1,2,3,4,10],[1,3,4,5,10],[1,7,8,9,10]
  3.  * @param {number} currentPage 当前页数,默认为第一页    
  4.  * @param {number} totalPages 总的页码数
  5.  * @param {number} pagerCount 设置最大页码按钮数。 页码按钮的数量，当总页数超过该值时会折叠
  6.  * @return {Array} 分页数组 indexArr
  7. */
  8. const createPaginationIndexArr = (currentPage, totalPages, pagerCount) => {
  9.     let indexArr = [];
  10.     // TODO：根据传参生成分页数组 indexArr
  11.     // console.log(currentPage, totalPages, pagerCount);//1,10,5
  12.     if(totalPages<=pagerCount){
  13.         for(let i=1;i<=totalPages;i++){
  14.             indexArr.push(i)
  15.         }
  16.     }
  17.     if(totalPages>pagerCount){
  18.         indexArr.push(1)
  19.         if(currentPage<=pagerCount-2){
  20.             for(let i=2;i<pagerCount;i++){
  21.             indexArr.push(i)
  22.             }
  23.         }else if(currentPage>totalPages-pagerCount+2){
  24.             for(let i=totalPages-(pagerCount-2);i<=totalPages-1;i++){
  25.             indexArr.push(i)
  26.             }
  27.         }else{
  28.             for(let i=currentPage+1-(pagerCount-2)+1;i<=currentPage+1;i++){
  29.             indexArr.push(i)
  30.             }
  31.         }   
  32.         indexArr.push(totalPages)
  33.     }
  34.     console.log(indexArr);
  35.     
  36.     
  37.     return indexArr;
  38. }
  39.  
  40. module.exports = {
  41.     createPaginationIndexArr
  42. }
  43.  
  44.  
  45.  
  46.  
  47.  
  48.  
  49.  
  50. /**
  51.  * @description ajax 请求，通过传递的 currentPage, pageSize 获取到当前页和总页数的数据
  52.  * @param {string} url 请求地址，必填
  53.  * @param {string} method 请求方式，可选参数，默认为 get
  54.  * @param {string} data 请求体数据，可选参数
  55.  * @param {number} currentPage 当前页数，必填
  56.  * @param {number} pageSize 每页显示条目个数，必填
  57.  * @return {object} {data,total} data为data.json中data数组的部分数据，total为data.json中total的值
  58.  * */
  59. async function ajax({ url, method = "get", data, query: { currentPage, pageSize } }) {
  60.     // TODO:根据函数参数 `query` 对象  `currentPage, pageSize` 获得当前页的数据
  61.     let result = {
  62.         data:[],
  63.         total:0
  64.     }
  65.     await axios({
  66.         methods:method,
  67.         url,
  68.         data,
  69.         /* params:{
  70.             currentPage, pageSize
  71.         } */
  72.     }).then(res=>{
  73.         console.log(res.data);
  74.         let arr=[]
  75.         for(let i=(currentPage-1)*10;i<pageSize+(currentPage-1)*10;i++){
  76.             arr.push(res.data.data[i])
  77.         }
  78.         result.data=arr
  79.         result.total=res.data.total
  80.     },
  81.     err=>{
  82.         console.log(err.message);
  83.     })
  84.     // console.log(result);//
  85.     return result;
  86. }
  87.  
  88. class Pagination {
  89.     /**
  90.      * @param {Element} root
  91.      * @param {number} pageSize 每页显示条目个数
  92.      * @param {number} total 总条目数
  93.      * @param {number} pagerCount 设置最大页码按钮数。 页码按钮的数量，当总页数超过该值时会折叠
  94.      * @param {number} currentPage 当前页数,默认为第一页    
  95.      * @param {function} currentChange current-page 改变时触发
  96.     */
  97.     constructor(root, { pageSize, total, pagerCount, currentPage }, { currentChange }) {
  98.         if (pagerCount % 2 == 0) {
  99.             pagerCount--;
  100.         }
  101.         this.root = root;
  102.         this.pageSize = pageSize || 10;
  103.         this.total = total;
  104.         this.pagerCount = pagerCount || 7;
  105.         this.currentPage = currentPage || 1;
  106.         this.currentChange = currentChange;
  107.  
  108.         this.totalPages = Math.ceil(total / pageSize);
  109.         this.initPagination();
  110.     }
  111.     /**
  112.      * @description 初始化分页组件，首次创建和 this.currentPage 改变时调用
  113.      * */
  114.     initPagination() {
  115.         const indexArr = createPaginationIndexArr(this.currentPage, this.totalPages, this.pagerCount);
  116.         document.querySelector("#index-arr").innerText = JSON.stringify(indexArr);
  117.         this.renderPagination(indexArr);
  118.         this.initEvents();
  119.         this.currentChange(this.currentPage);
  120.     }
  121.  
  122.     /**
  123.      * @description 根据序号数组生成分页组件的字符串模板通过 innerHTML 挂载在 root 元素内
  124.      * @param {Array} indexArr 分页数组 indexArr
  125.      * @return {String} 分页组件的字符串模板
  126.     */
  127.     renderPagination(indexArr) {
  128.         let template = '';
  129.         // TODO：根据 indexArr 数组生成分页组件的字符串模板 template
  130.         // console.log(indexArr);
  131.         let arr=[]
  132.         arr.push(indexArr[0])
  133.         
  134.         for(let i=1;i<this.pagerCount-1;i++){
  135.             if(indexArr[i-1]!==indexArr[i]-1){
  136.                 arr.push('...')
  137.                 arr.push(indexArr[i])
  138.             }
  139.             else if(indexArr[this.pagerCount-1]!==indexArr[this.pagerCount-2]+1&&i===this.pagerCount-2){
  140.                 arr.push(indexArr[i])
  141.                 arr.push('...')
  142.             }
  143.             else arr.push(indexArr[i])
  144.         }
  145.         arr.push(indexArr[indexArr.length-1])
  146.         console.log(arr);
  147.         console.log(this.currentPage);
  148.        for(let i=0;i<arr.length;i++){
  149.         if(this.currentPage===arr[i]){
  150.             template+= `<li class="number active">${arr[i]}</li>`   
  151.             // console.log('a');
  152.         }
  153.         else if(arr[i]==='...'){
  154.             template+=`<li class="number more">...</li>`
  155.             // console.log('b');
  156.         }
  157.         else{
  158.             template+=`<li class="number ">${arr[i]}</li>`
  159.             // console.log('c');
  160.         }
  161.        }
  162.  
  163.         this.root.innerHTML = `
  164.         <div class="pagination">
  165.             <div class="btn btn-left" id="btn-prev">&lt;</div>
  166.             <ul class="pager">${template} </ul>
  167.             <div class="btn btn-right" id="btn-next">&gt;</div>
  168.         </div>`;
  169.     }
  170.     /** 
  171.      * @description 事件绑定，改变 this.currentPage 的值,值在 1 到 this.totalPages 之间
  172.      **/
  173.     initEvents() {
  174.         this.root.querySelector("#btn-prev").addEventListener('click', () => {
  175.             // TODO:"<" 按钮的点击事件， 点击时 this.currentPage - 1
  176.             console.log('iii');
  177.             if(this.currentPage>1){
  178.                 this.currentPage--
  179.                 this.initPagination();
  180.                }
  181.         })
  182.         this.root.querySelector("#btn-next").addEventListener('click', () => {
  183.             // TODO:">" 按钮的点击事件， 点击时 this.currentPage + 1
  184.             if(this.currentPage<this.totalPages){
  185.                 this.currentPage++
  186.                 console.log(this.currentPage);
  187.                 this.initPagination();
  188.             }
  189.         })
  190.         this.root.querySelector(".pager").addEventListener('click', (e) => {
  191.             if (e.target.nodeName.toLowerCase() === 'li') {
  192.                 if (this.currentPage === e.target.innerText) return;
  193.                 if (e.target.classList.contains('more')) return;
  194.                 this.currentPage = Number(e.target.innerText)
  195.             }
  196.             this.initPagination();
  197.         });
  198.     }
  199. }
  200.  
  201. const paginationConfigObj = { pageSize: 10, total: 100, pagerCount: 5 };
  202. const root = document.querySelector(".pagination-container");
  203. async function renderContent(currentPage) {
  204.     document.querySelector("#current-page").innerText = currentPage;
  205.     const { data, total } = await ajax({ url: "./js/data.json", method: "get", query: { currentPage, ...paginationConfigObj } });
  206.     document.querySelector("#ajax-data").innerText = JSON.stringify(data);
  207.     document.querySelector("#ajax-total").innerText = JSON.stringify(total);
  208.     const contentEle = document.querySelector('.content');
  209.     let template = data.reduce((prev, cur) =>
  210.         prev + `                
  211.         <li class="item" data-index="${cur.id}">
  212.             <h4 class="title">${cur.title}</h4>
  213.             <div class="item-right">
  214.                 评论数：<span class="replay-count">${cur.replayCount}</span>
  215.                 /
  216.                 点击数：<span class="click-count">${cur.clickCount}</span>
  217.             </div>
  218.         </li>`
  219.         , "");
  220.     contentEle.innerHTML = template;
  221. }
  222.  
  223. new Pagination(root, paginationConfigObj, { currentChange: renderContent });
  224.  
  225.  
  226.  
  227.  
  228.  
  229.  
  230.  
  231.  
  232.  
  233.  
  234.  
  235.  
  236.  
  237.  
  238.  
  239.  
  240.  
  241.  
  242.  
  243.  
  244.  
  245.  
  246.  
  247.  
  248.  
  249.  
  250.  
  251.  
  252.  
  253.  
  254.  
  255.  
  256.  
  257.  
  258.  
  259.  
  260.  
  261.  
  262.  
  263.  
  264.  
  265.  
  266.  
  267.  
  268.  
  269.  
  270.  
  271.  
  272.  
  273.  
  274.  
  275.  
  276.  
  277.  
  278.  
  279. async function ajax({ url, method = "get", data, query: { currentPage, pageSize } }) {
  280.     // TODO:根据函数参数 `query` 对象  `currentPage, pageSize` 获得当前页的数据
  281.     let result = {
  282.         data:[],
  283.         total:0
  284.     }
  285.     await axios({
  286.         methods:method,
  287.         url,
  288.         data,
  289.         query:{
  290.             currentPage, pageSize   
  291.         }
  292.     }).then(res=>{
  293.         result.data=res.data.data
  294.         result.total=res.data.total
  295.     },
  296.     err=>{
  297.         console.log(err.message);
  298.     })
  299.     // console.log(result);//
  300.     return result;
  301. }
  302.  
  303. renderPagination(indexArr) {
  304.         let template = '';
  305.         // TODO：根据 indexArr 数组生成分页组件的字符串模板 template
  306.             // console.log(indexArr);
  307.             let arr=[]
  308.             arr.push(indexArr[0])
  309.             
  310.             for(let i=1;i<this.pagerCount-1;i++){
  311.                 if(indexArr[i-1]!==indexArr[i]-1){
  312.                     arr.push('...')
  313.                     arr.push(indexArr[i])
  314.                 }
  315.                 else if(indexArr[this.pagerCount-1]!==indexArr[this.pagerCount-2]+1&&i===this.pagerCount-2){
  316.                     arr.push(indexArr[i])
  317.                     arr.push('...')
  318.                 }
  319.                 else arr.push(indexArr[i])
  320.             }
  321.             arr.push(indexArr[indexArr.length-1])
  322.             console.log(arr);
  323.            for(let i=0;i<arr.length;i++){
  324.             if(this.currentPage===i){
  325.                 template+= `<li class="number active">${arr[i]}</li>`   
  326.             }
  327.             if(arr[i]==='...'){
  328.                 template+=`<li class="number more">...</li>`
  329.             }
  330.             else{
  331.                 template+=`<li class="number ">${arr[i]}</li>`
  332.             }
  333.            }
  334.         this.root.innerHTML = `
  335.         <div class="pagination">
  336.             <div class="btn btn-left" id="btn-prev">&lt;</div>
  337.             <ul class="pager">${template} </ul>
  338.             <div class="btn btn-right" id="btn-next">&gt;</div>
  339.         </div>`;
  340.     }
  341.  
  342.  
  343. initEvents() {
  344.         this.root.querySelector("#btn-prev").addEventListener('click', () => {
  345.             // TODO:"<" 按钮的点击事件， 点击时 this.currentPage - 1
  346.             if(this.currentPage>1){
  347.                 this.currentPage--
  348.                 console.log(this.currentPage);
  349.                }
  350.         })
  351.         this.root.querySelector("#btn-next").addEventListener('click', () => {
  352.             // TODO:">" 按钮的点击事件， 点击时 this.currentPage + 1
  353.             if(this.currentPage<this.totalPages){
  354.                 this.currentPage++
  355.                 console.log(this.currentPage);
  356.             }
  357.         })
  358.         this.root.querySelector(".pager").addEventListener('click', (e) => {
  359.             if (e.target.nodeName.toLowerCase() === 'li') {
  360.                 if (this.currentPage === e.target.innerText) return;
  361.                 if (e.target.classList.contains('more')) return;
  362.                 this.currentPage = Number(e.target.innerText)
  363.             }
  364.             this.initPagination();
  365.         });
  366.     }
  367. }
  368.  
  369.  
  370. const createPaginationIndexArr = (currentPage, totalPages, pagerCount) => {
  371.     let indexArr = [];
  372.     // TODO：根据传参生成分页数组 indexArr
  373.     if(totalPages<=pagerCount){
  374.         for(let i=1;i<=totalPages;i++){
  375.             indexArr.push(i)
  376.         }
  377.     }
  378.     if(totalPages>pagerCount){
  379.         indexArr.push(1)
  380.         if(currentPage<=pagerCount-2){
  381.             for(let i=2;i<pagerCount;i++){
  382.             indexArr.push(i)
  383.             }
  384.         }else if(currentPage>totalPages-pagerCount+2){
  385.             for(let i=totalPages-(pagerCount-2);i<=totalPages-1;i++){
  386.             indexArr.push(i)
  387.             }
  388.         }else{
  389.             for(let i=totalPages-(pagerCount-2);i<totalPages;i++){
  390.             indexArr.push(i)
  391.             }
  392.         }   
  393.         indexArr.push(totalPages)
  394.     }
  395.     console.log(indexArr);
  396.     
  397.     return indexArr;
  398. }

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Cpp五条/article/detail/705910
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号