From 2d765b5c63804fe101e8af29d1d43489745bc981 Mon Sep 17 00:00:00 2001
From: Caroline <2070136618@qq.com>
Date: Tue, 2 Jul 2024 16:03:03 +0800
Subject: [PATCH] =?UTF-8?q?=E9=9A=8F=E6=9C=BA=E6=8A=BD=E5=8F=9610=E4=B8=AA?=
 =?UTF-8?q?=E7=94=9F=E8=AF=8D=EF=BC=8C=E5=B9=B6=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/static/js/word_operation.js | 56 +++++++++++++++++++++++++++++++++
 app/templates/userpage_get.html |  4 +++
 2 files changed, 60 insertions(+)

diff --git a/app/static/js/word_operation.js b/app/static/js/word_operation.js
index dcf38ff..7f2cdd2 100644
--- a/app/static/js/word_operation.js
+++ b/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';
+          }
+        })
+    }
 }
\ No newline at end of file
diff --git a/app/templates/userpage_get.html b/app/templates/userpage_get.html
index e5c8d95..6df5c02 100644
--- a/app/templates/userpage_get.html
+++ b/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">