word_operation.js: Resolve conflict

app/static/js/word_operation.js

@@ -196,4 +196,40 @@ function exportToCSV() {
 
     link.click();
     document.body.removeChild(link);
-}
+}
+
+/**
+ *
+ * 随机选取 10 个单词学习
+ */
+function random_select_word(word) {
+
+    alert("点击熟悉与不熟悉之后，单词自动返回生词库")
+    // 获取所有带有 "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]];
+      }
+
+        wordContainersArray.forEach((p, index) => {
+          if (index < 10) {
+            p.style.display = 'block';
+          } else {
+            p.style.display = 'none';
+          }
+        });
+    }
+}

app/templates/userpage_get.html

@@ -146,11 +146,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-primary btn-lg"  onclick="random_select_word('{{ word }}')"   role="button">随机选取10个</a>
+            <a class="btn btn-primary btn-lg"  onclick="location.reload();"   role="button">显示所有生词</a>
         </p>
         <!--添加导出按钮-->
         <button class="btn btn-primary" onclick="exportToCSV()">导出</button>