江月迟迟的个人知识库

外观

成语学习 ​

作者:江月迟迟
发表于:2024-12-10
字数统计:1707 字
预计阅读6分钟

介绍 ​

小楼的爸爸是一名程序员，暑假期间，发现小楼在家经常玩手机，于是决定设计一个小游戏让小楼学习成语来加强小楼对成语的理解。

接下来让我们跟着小楼来学学成语吧~

准备 ​

本题已经内置了初始代码，打开实验环境，目录结构如下：

txt
├── index.html
└── js
    └── vue.min.js

选中 index.html 右键启动 Web Server 服务（Open with Live Server），让项目运行起来。

接着，打开环境右侧的【Web 服务】，就可以在浏览器中看到如下效果：

图片描述

目标 ​

完善 index.html 中的 confirm 方法和 getSingleWord 方法。

  1. getSingleWord 方法：点击文字后，在变量 idiom 从左到右第一个空的位置加上该文字。

示例一：

txt
idiom=["","","",""]，点击热字，则idiom=["热","","",""]

示例二：

txt
idiom=["热","","","眶"]，点击泪字，则idiom=["热","泪","","眶"]

示例三：

txt
idiom=["热","泪","盈","眶"]，点击任何字，则idiom=["热","泪","盈","眶"]
  1. confirm 方法需要校验成语是否输入正确答案，猜中成语 result 为 true ；猜错成语 result 为 false。

示例一：

txt
tip='形容非常感激或高兴'，idiom=["热","泪","盈","眶"]，则result返回true

示例二：

txt
tip='形容非常感激或高兴'，idiom=["泪","眼","盈","眶"]，则result返回false

示例三：

txt
tip='在繁忙中抽出空闲来'，idiom=["忙","里","偷","闲"]，则result返回true

完成后，最终页面效果如下：

图片描述

规定 ​

请按照给出的步骤操作，切勿修改默认提供的文件名称、文件夹路径、函数名等。

判分标准 ​

  • 本题完全实现题目目标得满分，否则得 0 分。

总通过次数: 1472 | 总提交次数: 1576 | 通过率: 93.4%

难度: 中等 标签: 2022, 省模拟赛, Web 前端, Vue.js

题解 ​

vue
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="./js/vue.min.js"></script>
  <title>成语学习</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #app {
      margin: auto;
    }

    .title {
      text-align: center;
      padding: 10px 0;
      background-image: linear-gradient(-225deg, #69EACB 0%, #EACCF8 48%, #6654F1 100%);
    }

    .idiom_tips_box {
      text-align: center;
      margin: 30px 0;
    }

    .detailed_description {
      border-radius: 20px;
      padding: 15px 30px;
      border-radius: 4px;
      font-size: 16px;
    }

    .idiom_box {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 20px auto;
    }

    .item_box {
      height: 120px;
      width: 120px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 50px;
      border-radius: 8px;
      margin-right: 10px;
      background: rgb(248, 243, 243);
      border: 1px solid #999
    }

    .optional_words_region {
      margin: auto;
      margin-top: 50px;
      text-align: center;
      display: flex;
      flex-wrap: wrap;
    }

    .words {
      display: block;
      width: 50px;
      height: 50px;
      margin: 5px;
      background: orange;
      border: 1px solid black;
      border-radius: 4px;
      font-size: 40px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .words:hover {
      background: rgb(247, 113, 3);
      color: rgb(248, 243, 243);
    }

    .confirm_btn_box {
      margin: 10px auto;
      display: flex;
      justify-content: center;
      cursor: pointer;
    }

    .confirm_btn {
      margin-top: 30px;
      border-radius: 8px;
      padding: 10px 30px;
      color: white;
      background: #409eff
    }
  </style>
</head>

<body>
  <!-- {word:"热泪盈眶",means:"形容非常感激或高兴"} -->
  <!-- {word:"才华横溢",means:"指才华充分显露出来"} -->
  <!-- {word:"聚沙成塔",means:"比喻积少成多"} -->
  <!-- {word:"名垂青史",means:"形容功业巨大，永远流传"} -->
  <!-- {word:"绝无仅有",means:"形容极其稀少"} -->
  <!-- {word:"衣衫褴褛",means:"形容身上衣服破破烂烂"} -->
  <!-- {word:"焕然一新",means:"形容呈现出崭新的面貌"} -->
  <!-- {word:"并驾齐驱",means:"比喻齐头并进，不分前后"} -->
  <!-- {word:"博大精深",means:"形容思想和学识广博高深"} -->
  <!-- {word:"忙里偷闲",means:"在繁忙中抽出空闲来"} -->
  <div id="app">
    <div class="title">成语学习</div>
    <!-- 提示-描述 -->
    <div class="idiom_tips_box">
      <span class="detailed_description">提示：{{tip}}</span>
    </div>
    <!-- 选中的成语 -->
    <div class="idiom_box">
      <div class="item_box" v-for="item,index in idiom" @click="clear(index)">{{item}}</div>
    </div>
    <div :style="result == null ? 'color:#ccc' : result ? 'color : red' : ''" style="text-align:center">
      {{result == null ? '请点击下方文字组织正确的成语（点击框内文字可清除）' : result ? '答案正确' : '答案错误'}}</div>
    <!-- 可选区域 -->
    <div class="optional_words_region">
      <!-- <div>{{word}}</div> -->
      <span class="words" v-for="(item,index) in words.split('')" :key="index" @click="getSingleWord(item)">
        {{item}}
      </span>
    </div>
    <!-- 确定 -->
    <div class="confirm_btn_box">
      <span class="confirm_btn" @click="confirm">确定</span>
    </div>
  </div>

  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        tip: "",
        arr: [
          { word: "热泪盈眶", tip: "形容非常感激或高兴" },
          { word: "才华横溢", tip: "指才华充分显露出来" },
          { word: "聚沙成塔", tip: "比喻积少成多" },
          { word: "名垂青史", tip: "形容功业巨大，永远流传" },
          { word: "绝无仅有", tip: "形容极其稀少" },
          { word: "衣衫褴褛", tip: "形容身上衣服破破烂烂" },
          { word: "焕然一新", tip: "形容呈现出崭新的面貌" },
          { word: "并驾齐驱", tip: "比喻齐头并进，不分前后" },
          { word: "博大精深", tip: "形容思想和学识广博高深" },
          { word: "忙里偷闲", tip: "在繁忙中抽出空闲来" }
        ],
        words: '',
        idiom: ["", "", "", ""],
        result: null
      },
      created() {
        this.tip = this.arr[parseInt(Math.random() * this.arr.length)].tip
        this.arr.forEach(item => {
          this.words += item.word
        });

        let words = this.words.split("");
        words = this.shuffle(words)
        this.words = words.join("")

      },
      methods: {
        //乱序方法
        shuffle(arr) {
          let temp, length = arr.length;
          for (let i = 0; i < length - 1; i++) {
            let index = Math.floor(Math.random() * (length--));
            temp = arr[index];
            arr[index] = arr[length];
            arr[length] = temp;
          }
          return arr;
        },
        //TODO 点击文字后，在idiom从左到右第一个空的位置加上改文字
        getSingleWord(val) {
          
          
          this.idiom.splice(this.idiom.indexOf(''), 1, val)
        },
        clear(i) {
          this.idiom[i] = ""
          this.$set(this.idiom, i, "")
        },
        // TODO 校验成语是否输入正确答案
        // 猜中成语 result 为 true;
        // 猜错成语 result 为 false;
        // 例1：tip=‘形容非常感激或高兴’，idiom=["热","泪","盈","眶"]，则result返回true
        // 例2：tip=‘形容非常感激或高兴’，idiom=["泪","眼","盈","眶"]，则result返回false
        // 例3：tip=‘在繁忙中抽出空闲来’，idiom=["忙","里","偷","闲"]，则result返回true
        confirm() {
          this.result = null
          if (this.idiom.length !== 4) {
            this.result = false
          }
          const str = this.idiom.toString().split(',').join('')
          console.log(str);
          this.arr.forEach(item => {
            if (item.word === str && item.tip === this.tip) {
              this.result = true
              return
            }
          })
          if (this.result === true) {
            return
          }
          this.result = false
        }
      }
    })
  </script>

</body>

</html>