web蓝桥杯2022年十三届(国赛)大学组and职业组-CSDN博客

本文链接：https://blog.csdn.net/m0_56646930/article/details/137039005

记录刷题笔记：

2、新鲜的蔬菜

利用绝对定位居中了之后，需要 -50% -50%

/* TODO：待补充代码 */
#box1 {
  display: flex;
  justify-content: center;
  align-items: center;
}

#box2 {
  position: relative;
}

#box2 .item:nth-child(2) {
   position: absolute;
   right: 0;
   bottom: 0;
}

#box3 {
  position: relative;
}

#box3 .item:nth-child(2) {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

#box3 .item:nth-child(3) {
  position: absolute;
  right: 0;
  bottom: 0;
}

3、水果消消乐

// TODO：请补充代码
function startGame() {
  let scoreCount = 0;
  let scoreVO = document.querySelector("#score");
  scoreVO.innerHTML = scoreCount; //这是一个 给分数赋值的操作
  const imgArr = document.querySelectorAll(".img-box img"); //
  document.querySelector(".btn").style.display = "none"; //让按钮消失
  for (const item of imgArr) {
    item.style.display = "block";
  }
  delayCloseImg(imgArr); //
  let imgCheckArr = []; //长度为2 就判断为真 然后就可以清除
  let boxVisibility = [];
  document.querySelector(".container").addEventListener("click", function(event) {
    //这里得判断一下，不能点自己 还没做
    imgCheckArr.push(event.target.children[0].alt); //存储进去
    boxVisibility.push(event.target);
    //点击的时候，img会显示出来
    event.target.children[0].style.display = "block"; //显示出来
    if (imgCheckArr.length === 2) {
      if (imgCheckArr[0] === imgCheckArr[1]) {
        scoreCount += 2;
        delayCloseBox(boxVisibility);
      } else {
        scoreCount -= 2;
      }
      delayCloseImg(imgArr);
      scoreVO.innerHTML = scoreCount; //给分数赋值
      imgCheckArr = []; //数组清除
      boxVisibility = []; //盒子清除
    }
  });
}
function delayCloseImg(imgArr) {
  setTimeout(() => {
    for (const item of imgArr) {
      item.style.display = "none";
    }
  }, 800);
}
function delayCloseBox(boxVisibility) {
  setTimeout(() => {
    for (const item of boxVisibility) {
      item.style.visibility = "hidden";
    }
  }, 800);
}

4、用什么来做计算

正则全局遇到x和÷ 就替换然后就是灵性的eval函数这个函数可以自动计算字符串里面的运算符

// TODO：请补充代码
let formula = document.querySelector("#formula");
let result = document.querySelector("#result");
let formulaVO = "";

document.querySelector(".calculator").addEventListener("click", function (event) {
    //先实现重置AC功能
    if (event.target.textContent == 'AC') {
        console.log("重置功能执行");
        formula.value = null
        result.value = null
        formulaVO = "";//这个也需要 要不然字符串重叠
        return;
    }
    //如果是等于号，不添加，并且返回结果
    if (event.target.textContent == '=') {
        console.log("等号功能执行");
        //eval这个函数是可以直接计算的 但是x是* ÷是 所以需要写一个替换
        let temp = formula.value;//缓存
        let regExp = /x/g;
        let regExp2 = /÷/g;
        temp = temp.replace(regExp, "*"); //这个不是改变，而是弄出一个新的字符串
        temp = temp.replace(regExp2, "/");
        console.log(temp);

        let res = eval(temp) 
        result.value = res;
        return;
    }
    //如果是开根号，也是跟上面差不多
    if (event.target.textContent == '√') {
        let res = Math.sqrt(formula.value);
        result.value = res;
        return;
    }
    //但是点击除了按钮之外，也会有东西 得注意一下
    formulaVO += event.target.textContent;//可以拿到里面
    //接着就需要赋值上去了
    formula.value = formulaVO
})

5、开学礼物大放送

这个，就纯粹的CSSHTML绘制网站页面了，有点痛苦，还是喜欢写JS。

<div class="container">
      <div class="banner-bg">
        <div class="banner-title"></div>
        <div class="left"></div>
        <div class="part1-bg">
          <div class="btn1"></div>
        </div>
        <div class="right"></div>
      </div>
    </div>

6、权限管理

$(function () {
  // 使用 ajax 获取 userList.json 数据并渲染到页面
  getData();
  let left = document.querySelector("#leftSelect");
  let right = document.querySelector("#rightSelect")
  // let options = document.querySelectorAll("#leftSelect option")

  // 为按钮添加事件
  $("#add").click(function () { 
    // TODO：补充代码，实现功能
    let SelectOptions = [];
    for (let i = 0; i < left.options.length; i++) {
      if (left.options[i].selected) { //选中的为true咯
        SelectOptions.push(left.options[i].value)
        //直接在里面做删除和添加就行了.
        let option = document.createElement("option")
        option.value = left.options[i].value
        option.innerHTML = `${left.options[i].value}`
        right.appendChild(option)
        left.options[i].remove()
      }
    }
    console.log(SelectOptions);
  });
  $("#addAll").click(function () {
    // TODO：补充代码，实现功能
    for (let i = 0; i < left.options.length; i++) {
      let option = document.createElement("option")
      option.value = left.options[i].value
      option.innerHTML = `${left.options[i].value}`
      right.appendChild(option)
    }
     left.innerHTML = ""//清空
  });

  $("#remove").click(function () {
    // TODO：补充代码，实现功能
  });
  $("#removeAll").click(function () {
    // TODO：补充代码，实现功能
  });
});

/**
 * 修改权限
 * @param {Object} right 要修改的权限
 * @param {Object} changeList 要修改权限的用户列表
 */
function changeAccess(right, changeList) {
  // TODO：补充代码，实现功能
}
// 异步获取数据
function getData() {
  // TODO：补充代码，实现功能
  var xhr = new XMLHttpRequest();
  xhr.open("GET", "./js/userList.json", true);
  xhr.responseType = "json";
  xhr.onload = function () {
    let result = xhr.response;
    // 获取 userList.json 数据并渲染到页面
    let table = document.querySelector("#userList");
    for (const item of result) {
      let tr = document.createElement("tr");
      tr.innerHTML = `<td>${item.name}</td>
    <td>${item.right?"管理员":"普通用户"}</td>`;
      table.appendChild(tr);
    }
  };
  xhr.send(); //需要发送
}

7、一起会议吧

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>一起会议吧</title>
    <link rel="stylesheet" type="text/css" href="./css/index.css" />
    <link rel="stylesheet" href="./css/iconfont/iconfont.css" />
  </head>

  <body>
    <div id="app">
      <!-- TODO：请在下面实现需求 -->
      <!-- 登录/注销窗口 -->
      <div class="login">
        <div class="left-tools">
          <a class="close-btn"></a>
          <a class="shrink-btn"></a>
        </div>
        <h3>{{loginStatus?'注销':'登录'}}</h3>
        <p v-if="!loginStatus">
          选择用户：<select id="selectUser" v-model="loginName">
            <option :value="item.name" v-for="item in user" :key="item.id">
              {{ item.name }}
            </option>
          </select>
        </p>
        <p v-if="loginStatus">当前用户为：{{loginName}}</p>

        <a class="login-btn" @click="login">{{loginStatus?'注销':'登录'}}</a>
      </div>

      <!-- 右侧显示用户列表窗口按钮 -->
      <button id="show" class="right-btn" v-if="active==3" @click="activeChange(2)">
        <span class="iconfont icon-left-arrow" ></span>
      </button>

      <!-- 用户列表窗口 -->
      <!-- v-if="loginStatus" -->
      <div class="user-dialog" v-if="loginStatus && dialogStatus">
        <!-- 用户列表窗口上侧工具栏 -->
        <ul class="tools">
          <li class="tools-left">
            <button :class="active==0?'active':''" @click="activeChange(0)">
              <span class="iconfont icon-close"></span>
            </button>
            <button :class="active==1?'active':''" @click="activeChange(1)">
              <span class="iconfont icon-dialog"></span>
            </button>
            <button :class="active==2?'active':''" @click="activeChange(2)" >
              <span class="iconfont icon-list"></span>
            </button>
          </li>
          <li class="tools-right" @click="closeTools">
            <button class="show-list">
              <span class="iconfont icon-retract"></span>
            </button>
          </li>
        </ul>

        <!-- 用户列表 -->
        <ul class="say-list">
          <li>
            <span class="iconfont icon-microphone"></span>
          </li>
          <li class="line"></li>
          <li>正在讲话：{{loginName}}；</li>
        </ul>
        <ul class="user-list" v-if="active == 1">
          <li v-for="item in user" :key="item.id" v-if="item.name == loginName">
            <img class="header" :src="item.name == loginName?item.imgPath:null" />
            <div class="user-name">
              <span class="iconfont icon-user header-icon"></span>
              <span class="iconfont icon-microphone"></span>
              {{ loginName }}
            </div>
          </li>
        </ul>
        <ul class="user-list" v-if="active == 2">
          <li v-for="item in user" :key="item.id" >
            <img class="header" :src="item.imgPath" />
            <div class="user-name">
              <span class="iconfont icon-user header-icon"></span>
              <!-- item.name == loginName -->
              <span class="iconfont icon-microphone" v-if="item.isHost"></span>
              {{ item.name }}
            </div>
          </li>
        </ul>
      </div>
    </div>
    <script type="text/javascript" src="./js/vue.js"></script>
    <script type="text/javascript" src="./js/axios.min.js"></script>
    <script type="text/javascript">
      // TODO：请在下面实现需求
      new Vue({
        el: "#app",
        data: {
          user: [],
          loginName:"Tom",
          loginStatus:false,
          dialogStatus:false,
          active:1, //默认选登录用户信息
        },
        methods: {
          closeTools(){
            this.active = 3;
            this.dialogStatus = false;
          },
          activeChange(statusNumber){
            this.active = statusNumber
            this.dialogStatus = true;
          },
          getData() {
            axios.get("./js/userList.json").then((res) => {
              this.user = res.data;
            });
          },
          login() {
            //需要将登录用户排在第一位，就数组吧。
            for (let i = 0; i < this.user.length; i++) {
              if (this.loginName == this.user[i].name) {
                let temp = this.user[i];
                this.user.splice(i,1); //删除遍历到的这个，然后放在最前面
                // this.user.unshift(temp)
                this.user.splice(0,0,temp);
              }
            }
            this.loginStatus = !this.loginStatus;
            this.dialogStatus = this.loginStatus;
          }
        },
        mounted() {
          this.getData(); //调用函数都是在钩子函数
        },
      });
    </script>
  </body>
</html>

10、天气趋势

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>天气趋势</title>
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"
    />
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <script src="./js/axios.js"></script>
    <script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
    <script
      src="js/echarts.min.js"
      type="text/javascript"
      charset="utf-8"
    ></script>
  </head>

  <body>
    <div id="app">
      <div class="top-bar">2022年 Y 城全年温度统计图</div>
      <!-- 主体 -->
      <div class="container">
        <!-- 月份 -->
        <div class="month">
          <ul>
            <!-- TODO：待补充代码 在下面的 li 标签中完成 12个月份 (即 monthList) 的渲染  -->
            <li
              :class="monthActive==item ? 'active':''"
              v-for="(item,index) in monthList"
              @click="clickActive($event.target.textContent,index)"
            >{{item}}</li>
          </ul>
        </div>
        <div class="chart">
          <!-- TODO：待补充代码  -->
          <!-- currentMonth  未来七天和本月 tab 切换，只有当前月才显示 -->
          <div id="currentMonth">
            <div class="title">
              <h3>{{typeTitle}}</h3>
              <div class="type">
                <span
                  id="seven"
                  :class="typeTitle=='未来7天天气'?'active':''"
                  @click="sevenDay($event.target.textContent)"
                  >未来7天</span
                >
                <span
                  id="current"
                  :class="typeTitle=='本月天气'?'active':''"
                  @click="sevenDay($event.target.textContent)"
                  >本月</span
                >
              </div>
            </div>
          </div>
          <div id="chart"></div>
        </div>
      </div>
    </div>
  </body>
</html>
<script>
  // TODO：待补充代码
  var vm = new Vue({
    el: "#app",
    data: {
      chart: null, // 图表
      chartOptions: null, // 图表配置项
      typeTitle: "本月天气",
      monthList: {
        January: "1月",
        February: "2月",
        March: "3月",
        April: "4月",
        May: "5月",
        June: "6月",
        July: "7月",
        August: "8月",
        September: "9月",
        October: "10月",
        November: "11月",
        December: "12月",
      },
      monthActive: "1月",
      xData: [],
      yData: [],
      menuList: [],
      TwoArray: [],
    },
    mounted: function () {
      // 初始化 echarts
      this.$nextTick(() => {
        this.initChart();
        this.getData();
      });
    },
    methods: {
      getFutureDates() {
        const dates = [];
        const today = new Date(); // 获取当前日期
        for (let i = 0; i < 7; i++) {
          const futureDate = new Date(today);
          futureDate.setDate(today.getDate() + i);
          const month = futureDate.getMonth() + 1;
          const day = futureDate.getDate();
          const formattedDate = `${month}/${day}`;
          dates.push(formattedDate);
        }
        return dates;
      },
      sevenDay(event) {
        let date = new Date();
        let Month = date.getMonth() + 1;
        switch (Month) {
          case 1:
            this.clickActive("1月", "January");
            break;
          case 2:
            this.clickActive("2月", "February");
            break;
          case 3:
            this.clickActive("3月", "March");
            break;
          case 4:
            this.clickActive("4月", "April");
            break;
          case 5:
            this.clickActive("5月", "May");
            break;
          case 6:
            this.clickActive("6月", "June");
            break;
          case 7:
            this.clickActive("7月", "July");
            break;
          case 8:
            this.clickActive("8月", "August");
            break;
          case 9:
            this.clickActive("9月", "September");
            break;
          case 10:
            this.clickActive("10月", "October");
            break;
          case 11:
            this.clickActive("11月", "November");
            break;
          case 12:
            this.clickActive("12月", "December");
            break;
        }
        
        if (event === "本月") {
          this.typeTitle = "本月天气";
        } else {
          this.typeTitle = "未来7天天气";
          const futureDates = this.getFutureDates(); //未来七天日期的数组
          this.xData = [];//初始化
          for (const item of futureDates) { //这个是循环七次
           this.xData.push(item)
          }
          this.yData = [];
          for (let i = 0; i < 7; i++) {
            this.yData.push(`${this.TwoArray[date.getMonth()][date.getDate() - 1]}`)
            date.setTime(date.getTime() + 1000 * 60 * 60 * 24)
          }
        }
        this.initChart(); //初始化一下表
      },
      clickActive(event, index) {
        this.monthActive = event; //激活active的
        for (const item of this.menuList) {
          for (const key in item) {
            if (key == index) {
              this.xData = []; //初始化一下
              this.yData = [];
              for (let i = 1; i <= item[key].length; i++) {
                this.xData.push(i);
              }
              for (const temperature of item[key]) {
                this.yData.push(temperature);
              }
            }
          }
        }
        this.initChart(); //初始化一下表
      },
      getData() {
        axios.get("./js/weather.json").then((res) => {
          this.menuList = res.data;
          this.clickActive("1月", "January"); //默认点击月份是1

          for (const item of this.menuList) { //转换为二位数组
            let key = Object.keys(item);
            this.TwoArray.push(item[key[0]])
          }

          console.log(this.TwoArray);
        });
      },
      initChart() {
        // 初始化图表
        this.chart = echarts.init(document.getElementById("chart"));
        // 配置项
        this.chartOptions = {
          grid: {
            top: 35,
            bottom: 5,
            left: 10,
            right: 10,
            containLabel: true,
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              lineStyle: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(255,255,255,0)",
                    },
                    {
                      offset: 0.5,
                      color: "rgba(255,255,255,1)",
                    },
                    {
                      offset: 1,
                      color: "rgba(255,255,255,0)",
                    },
                  ],
                  global: false,
                },
              },
            },
          },
          xAxis: [
            {
              type: "category",
              boundaryGap: false,
              axisLabel: {
                formatter: "{value}",
                fontSize: 12,
                margin: 20,
                textStyle: {
                  color: "#bfbfbf",
                },
              },
              axisLine: {
                lineStyle: {
                  color: "#e9e9e9",
                },
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: "#f7f7f7",
                },
              },
              axisTick: {
                show: false,
              },
              // x 轴显示的数据，日期
              data: this.xData,
            },
          ],
          yAxis: [
            {
              boundaryGap: false,
              type: "value",
              axisLabel: {
                textStyle: {
                  color: "#bfbfbf",
                },
                formatter: `{value}\u2103`,
              },
              nameTextStyle: {
                color: "#fff",
                fontSize: 12,
                lineHeight: 40,
              },
              splitLine: {
                lineStyle: {
                  color: "#f7f7f7",
                },
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: "#e9e9e9",
                },
              },
              axisTick: {
                show: false,
              },
            },
          ],
          series: [
            {
              name: "天气",
              type: "line",
              smooth: false,
              showSymbol: false,
              symbolSize: 0,
              zlevel: 3,
              itemStyle: {
                color: "#ff6600",
                borderColor: "#a3c8d8",
              },
              lineStyle: {
                normal: {
                  width: 3,
                  color: "#ff6600",
                },
              },
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                      {
                        offset: 0,
                        color: "#ff6600",
                      },
                      {
                        offset: 0.8,
                        color: "#ff9900",
                      },
                    ],
                    false
                  ),
                },
              },
              //  Y 轴显示的数据，即温度数据
              data: this.yData,
            },
          ],
        };

        // 调用此方法设置 echarts 数据
        this.chart.setOption(this.chartOptions);
      },
    },
    //axios请求
  });
</script>

接下来是职业组的一些题目：

5、传送门

$(window).scroll(function (event) {
  // 页面滚动到指定范围，对应的侧边按钮字体变色
  // TODO：请补充代码实现功能

  let distanceFromTop = window.scrollY; //因为是Y轴，拿到到顶部的距离
  // console.log(distanceFromTop);
  const lift = document.querySelectorAll(".default-color");
  for (const item of lift) {
    item.classList.remove("active-color")
  }
  if (distanceFromTop < 960) {
    lift[0].classList.add("active-color")
  } else if (distanceFromTop < 1920) {
    lift[1].classList.add("active-color")
  } else if (distanceFromTop >= 1920) {
    lift[2].classList.add("active-color")
  }
});
/**
 * @param {Object} scrollTopVal：到达指定位置需要滚动的高度
 * 点击按钮，滚动到指定位置
 */
function toFunction(scrollTopVal) {
  // TODO：请补充代码实现功能
  window.scroll({
    top:scrollTopVal,
    behavior:'smooth'
  })
}

6、小兔子找萝卜

// TODO：游戏开始
function start() {
    document.querySelector("#start").style.display = "none";//开始按钮隐藏
    document.querySelector("#move").style.display = "block";//移动按钮显示
}
// TODO：重置游戏
function reset() {
    let result = document.querySelector(".result");
    result.innerHTML = "";//清除提示;
    document.querySelector("input").value = null
    document.querySelector("#start").style.display = "block";//开始按钮显示
    document.querySelector("#move").style.display = "none";//移动按钮隐藏
    document.querySelector("#reset").style.display = "none";//重置按钮隐藏
    //小兔子要回到原处
    let box = document.querySelectorAll(".container div");
    for (let i = 0; i < box.length; i++) {
        box[i].classList.remove("active");
    }
    box[0].classList.add("active");
}
// TODO：移动
function move() {
    let moveValue = document.querySelector("input").value;
    let result = document.querySelector(".result");
    let box = document.querySelectorAll(".container div");
    
    if (moveValue == 1 || moveValue == 2) {
        for (let i = 0; i < box.length; i++) {
            if (box[i].className.includes("active")) {
                box[i].classList.remove("active");
                box[i+ parseInt(moveValue)].classList.add("active");
                break;
            }
        }
        result.innerHTML = "";//清除提示;
        if (box[12].className.includes("active")) {//如果踩到第13块草坪上的炸弹就结束
            document.querySelector("#move").style.display = "none";//移动按钮隐藏
            document.querySelector("#reset").style.display = "block";//重置按钮显示
            result.innerHTML = "哎呀！兔子踩到炸弹了，游戏结束！"
        }
        if (box[23].className.includes("active")) {
            document.querySelector("#move").style.display = "none";//移动按钮隐藏
            document.querySelector("#reset").style.display = "block";//重置按钮显示
            result.innerHTML = "小兔子吃到胡萝卜啦，游戏获胜！"
        }
        
    } else {
        result.innerHTML = "输入的步数不正确，请重新输入。"
    }
    
}

7、猜硬币

/**
 * @param {*} input_values input 框中输入的值
 * @returns Array  将输入的值中 1-9 组成一个数组
 */

// 将输入的值中 1-9 组成一个数组
function findNum(input_values) {
  // TODO：待补充代码
  let numberArr = [];//设置好数组，记得字符串要转换为number然后push
  for (const item of input_values) {
    if (item >= '0' && item <= '9') {
      numberArr.push(Number(item));
    }
  }
  console.log(numberArr);
  return numberArr;
}

// 将 1-9 中三个不重复的随机数放入数组中，并返回这个数组
let randomCoin = () => {
  let randomNumArr = [];
  // TODO：待补充代码
  while (true) {
    let number1 = randomNumber(1, 9);
    let number2 = randomNumber(1, 9);
    let number3 = randomNumber(1, 9);
    if (number1 !== number2 && number1 !== number3 && number2 !== number3) {
      randomNumArr.push(number1);
      randomNumArr.push(number2);
      randomNumArr.push(number3);
      break;
    }
  }
  console.log(randomNumArr);
  return randomNumArr;
};

function randomNumber(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min); //返回随机数
}

// 请勿删除和修改下面代码
try {
  module.exports = { randomCoin, findNum };
} catch (e) {}

8、阅读吧

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>阅读吧</title>
    <link rel="stylesheet" href="./css/iconfont/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="./css/index.css" />
  </head>
  <body>
    <div id="app">
      <!-- TODO：请在下面实现需求 -->
      <!-- 设置按钮图标 -->
      <a class="iconfont icon-setting" @click="changeToolStatus(true)"></a>
      <!-- 头部工具栏 -->
      <transition name="fade" v-if="toolStatus">
        <div class="header">
          <ul class="tools">
            <li class="container">
              <div class="left">阅读主题</div>
              <!-- 设置主题的圆形色块 -->
              <div class="right" id="setBG">
                <a
                  style="background-color: #f6edd4"
                  :class="index==1?'iconfont icon-selected':''"
                  @click="selectColor(1)"
                ></a>
                <a 
                style="background-color: #ebf4ea"
                :class="index==2?'iconfont icon-selected':''"
                @click="selectColor(2)"></a>
                <a
                style="background-color: #e9f2f5" 
                @click="selectColor(3)"
                :class="index==3?'iconfont icon-selected':''"></a>
                <a 
                style="background-color: #f6e8e4" 
                :class="index==4?'iconfont icon-selected':''"
                @click="selectColor(4)"></a>
                <a 
                style="background-color: #000000"
                :class="index==5?'iconfont icon-selected':''"
                @click="selectColor(5)"></a>
              </div>
            </li>
            <li class="container">
              <div class="left">字体大小</div>
              <!-- 设置字体大小的按钮 -->
              <div class="set-font">
                <a class="prev" @click="FontSizeChange(0)">A-</a><b></b> <span class="lang">{{ fontSize }}</span
                ><b></b>
                <a class="next" @click="FontSizeChange(1)">A+</a>
              </div>
            </li>
            <li class="container">
              <!-- 关闭 x 图标 -->
              <a
                class="iconfont icon-close"
                @click="changeToolStatus(false)"
              ></a>
            </li>
          </ul>
        </div>
      </transition>

      <!-- 阅读区 -->
      <p
        class="text-content"
        :style="customStyle"
      >
        汪淼觉得，来找他的这四个人是一个奇怪的组合：两名警察和两名军人，如果那两个军人是武警还算正常，但这是两名陆军军官。<br /><br />

        汪淼第一眼就对来找他的警察没有好感。其实那名穿警服的年轻人还行，举止很有礼貌，但那位便衣就让人讨厌了。这人长得五大三粗，一脸横肉，穿着件脏兮兮的皮夹克，浑身烟味，说话粗声大嗓，是最令汪淼反感的那类人。<br /><br />

        “汪淼？”那人问，直呼其名令汪淼很不舒服，况且那人同时还在点烟，头都不抬一下。不等汪淼回答，他就向旁边那位年轻人示意了一下，后者向汪淼出示了警官证，他点完烟后就直接向屋里闯。<br /><br />

        “请不要在我家里抽烟。”汪淼拦住了他。<br /><br />

        “哦，对不起，汪教授。这是我们史强队长。”年轻警官微笑着说，同时对姓史的使了个眼色。<br /><br />

        “成，那就在楼道里说吧。”史强说着，深深地吸了一大口，手中的烟几乎燃下去一半，之后竟不见吐出烟来。“你问。”他又向年轻警官偏了一下头。<br /><br />

        “汪教授，我们是想了解一下，最近你与‘科学边界’学会的成员有过接触，是吧？”<br /><br />

        “‘科学边界’是一个在国际学术界很有影响的学术组织，成员都是著名学者。这样一个合法的学术组织，我怎么就不能接触了呢？”<br /><br />

        “你看看你这个人！”史强大声说，“我们说它不合法了吗？我们说不让你接触了吗？”他说着，刚才吸进肚子里的烟都喷到汪淼脸上。<br /><br />

        “那好，这属于个人隐私，我没必要回答你们的问题。”<br /><br />

        “还啥都成隐私了，像你这样一个著名学者，总该对公共安全负责吧。”史强把手中的烟头扔掉，又从压扁了的烟盒里抽出一根。<br /><br />

        “我有权不回答，你们请便吧。”汪淼说着要转身回屋。<br /><br />

        “等等！”史强厉声说，同时朝旁边的年轻警官挥了一下手，“给他地址和电话，下午去走一趟。”<br /><br />

        “你要干什么！”汪淼愤怒地质问，这争吵引得邻居们也探出头来，想看看出了什么事。<br /><br />

        “史队！你说你――”年轻警官生气地将史强拉到一边，显然他的粗俗不止是让汪淼一人不适应。<br /><br />

        <label>————— 文章摘自著名科幻小说《三体》</label>
      </p>
    </div>
    <script type="text/javascript" src="./js/vue.js"></script>
    <script type="text/javascript">
      // TODO：请在下面实现需求
      new Vue({
        // 注意：请勿修改 data 选项中已提供的数据！！！
        el: "#app",
        data: {
          bgList: ["#f6edd4", "#ebf4ea", "#e9f2f5", "#F6E8E4", "#000000"], // 阅读主题色列表（与设置主题的圆形色块一一对应）
          toolStatus: true,
          Bcolor:'#f6edd4',
          color:'#000000',
          fontSize: 18,
          lineHeight: 28,
          index:1,
        },
        methods: {
          changeToolStatus(status) {
            //实现头部工具栏显隐功能。
            this.toolStatus = status;
          },
          selectColor(index) {
            this.index = index;
            this.Bcolor = this.bgList[index - 1];
            if (index - 1 == 4) {
              this.color = '#ffffff'
            } else {
              this.color = '#333333'
            }
          },
          FontSizeChange(flag) {
            if (flag == 1 && this.fontSize < 48) {
              this.fontSize += 2;
              this.lineHeight += 2;
            } else if (flag == 0 && this.fontSize > 12) {
              this.fontSize -= 2;
              this.lineHeight -= 2;
            }
          }
        },
        computed:{
          customStyle() {
            return {
              backgroundColor: this.Bcolor,
              color: this.color,
              fontSize: this.fontSize + 'px',
              lineHeight: this.lineHeight + 'px'
            }
          }
        }
      });
    </script>
  </body>
</html>

9、新增地址

// 初始化省份下拉列表内容
function provinceInit() {
  var province = document.getElementById("param_province");
  province.length = provinces.length;
  for (var i = 0; i < provinces.length; i++) {
    province.options[i].text = provinces[i];
    province.options[i].value = provinces[i];
  }
}

// 选择省份后对应城市下拉列表内容渲染
function provincechange(event) {
  // TODO：请补充代码实现功能
  //console.log(event.target.value); //需要拿到索引值 citys是可以直接在data.js调用
  let flag = 0;
  for (var i = 0; i < provinces.length; i++) {
    if (event.target.value == provinces[i]) {
      flag = i;
      break;
    }
  }
   let cityOptions = document.getElementById("param_city");
   cityOptions.length = citys[flag].length;
   for (var i = 0; i < cityOptions.length; i++) {
    cityOptions.options[i].text = citys[flag][i];
    cityOptions.options[i].value = citys[flag][i];
  }
}

/**
 * 为标签绑定单击事件。
 * 事件效果为：
 * 1、鼠标点击该标签后该标签样式显示 class=active；
 * 2、其他已选标签的 active 样式被移除；
 * 3、将选中的标签对应下标（即选择器为 “mark a” 选中的标签对应的下标）更新到 id=param_mark 的隐藏的 input 中。
 */
function addClick() {
  // TODO：请补充代码实现功能
    let labels = document.querySelectorAll(".mark a");
    labels.forEach(label => {
    label.addEventListener('click', (event) => {
    labels.forEach(e => {e.classList.remove("active")})
    event.target.classList.add("active")
    let index = 0;
    labels.forEach(e => {
      if (e.className == 'active') {
        document.getElementById("param_mark").value = index;
        return;
      }
      index++;
    })
  });
});
}
// 提交信息后，读取并显示在页面中
function saveInfo() {
  // TODO：请补充代码实现功能
  let address = document.getElementById("param_address").value;
  let name = document.getElementById("param_name").value;
  let phone = document.getElementById("param_phone").value;
  let city = document.getElementById("param_city").textContent.trim();
  if (city == '请选择城市' || address.trim() === '' || name.trim() === '' || phone.trim() === '') {
    document.querySelector(".warning-dialog").style.display = "block";
  } else {
    //成功之后，那么就需要打开到地址管理的页面
    document.querySelector(".address").style.display = "none";
    document.querySelector(".user-info").style.display = "none";
    document.querySelector(".address-list").style.display = "block";
    document.getElementById("main_title").innerHTML = "地址管理";
    //还需要将表达数据渲染到原有数据的首位
    let indexClass = document.getElementById("param_mark").value;
    let lableText = "家";
    let lableClass = "home";
    if (indexClass == 1) {
      lableText = "公司";
      lableClass = "company";
    } else if(indexClass == 2) {
      lableText = "学校";
      lableClass = "school"
    }
    let province = document.getElementById("param_province").options.selectedIndex;
    let city = document.getElementById("param_city").options.selectedIndex;
    //拿到了索引 记得city 是从0开始的 没有请选择的slot
    let provinceName = provinces[province];
    let cityName = citys[province][city];
    let addressName = document.querySelector("#param_address").value;
    let Name = document.querySelector("#param_name").value;
    let phone = document.querySelector("#param_phone").value;

    let li = document.createElement('li');
    li.innerHTML = `<div class="show-area">
    <label class=${lableClass}>${lableText}</label>
    <span>${provinceName + cityName}</span>
  </div>
  <div class="show-address">
    <span>${addressName}</span>
    <a><img src="./images/edit.png" /></a>
  </div>
  <div class="show-info">
    <span>${Name}</span>
    <span>${phone}</span>
  </div>`
    let parent = document.querySelector(".address-list");
    let firstChild = parent.firstChild;
    parent.insertBefore(li, firstChild);//放在这个子元素前面
  }
}

// 切换新增地址和地址管理的显隐
function back() {
  if (document.getElementById("main_title").innerHTML == "地址管理") {
    document.getElementById("main_title").innerHTML = "新增地址";
    document.querySelector(".address-list").style.display = "none";
    document.querySelector(".address").style.display = "block";
    document.querySelector(".user-info").style.display = "block";
  }
}
// 页面加载后的初始化操作
function init() {
  // 初始化省份下拉列表内容
  provinceInit();
  // 为标签绑定单击事件
  addClick();
}

window.onload = function () {
  // 初始化
  init();
};