随机抽取10个生词，并显示

app/static/js/word_operation.js

@@ -102,9 +102,19 @@ function wordTemplate(word) {
         <a class="btn btn-warning" onclick="unfamiliar('${word.word}')" role="button">不熟悉</a>
         <a class="btn btn-danger" onclick="delete_word('${word.word}')" role="button">删除</a>
         <a class="btn btn-info" onclick="read_word('${word.word}')" role="button">朗读</a>
+
     </p>`;
 }
 
+
+/**
+ * 使用模板将传入的单词转换为相应的HTML字符串
+*/
+function wordTemplate(word) {
+    // 这个模板应当与 templates/userpage_get.html 中的 <p id='p_${word.word}' class="new-word" > ... </p> 保持一致
+    return ``;
+}
+
 /**
  * 删除某一词频元素
  * 此处word为词频元素对应的单词
@@ -171,4 +181,50 @@ function compareWord(first, second) {
         return first.word < second.word ? -1 : 1;
     }
     return 0;
+}
+
+/**
+ *
+ *
+ */
+function random_select_word(word) {
+    // 获取所有带有 "word-container" 类的 <p> 标签
+    const container = document.querySelector('.word-container');
+
+    console.log("container",container)
+
+    // 获取所有带有"new-word"类的<p>标签
+    let wordContainers = container.querySelectorAll('.new-word');
+
+    // 检查是否存在带有"new-word"类的<p>标签
+    if (wordContainers.length > 0) {
+      // 将NodeList转换为数组
+      let wordContainersArray = [...wordContainers];
+
+      // 随机打乱数组
+      for (let i = wordContainersArray.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [wordContainersArray[i], wordContainersArray[j]] = [wordContainersArray[j], wordContainersArray[i]];
+      }
+
+      // 选取前10个元素
+      let selectedWordContainers = wordContainersArray.slice(0, 10);
+
+      // 对选取的<p>标签进行处理
+//      selectedWordContainers.forEach(container => {
+//        console.log(container.outerHTML);
+//      });
+        // 置顶
+//        selectedWordContainers.forEach(p => {
+//          container.insertBefore(p, container.firstChild);
+//        });
+
+        wordContainersArray.forEach((p, index) => {
+          if (index < 10) {
+            p.style.display = 'block';
+          } else {
+            p.style.display = 'none';
+          }
+        })
+    }
 }

app/templates/userpage_get.html

@@ -139,11 +139,15 @@
 
     {% if d_len > 0 %}
         <p>
+
             <b>我的生词簿</b>
             <label for="move_dynamiclly">
                 <input type="checkbox" name="move_dynamiclly" id="move_dynamiclly" checked>
                 允许动态调整顺序
             </label>
+            <br>
+              <a class="btn btn-info" style="background:red;color:#ffff" onclick="random_select_word('{{ word }}')"   role="button">随机选取10个</a>
+            <a class="btn btn-info" style="background:red;color:#ffff" onclick="location.reload();"   role="button">显示所有生词</a>
         </p>
         <a name="aaa"></a>
         <div class="word-container">