2022-07-18 19:51:23 +08:00
|
|
|
|
function familiar(theWord) {
|
2022-07-18 13:29:04 +08:00
|
|
|
|
let username = $("#username").text();
|
2022-07-18 19:51:23 +08:00
|
|
|
|
let word = $("#word_" + theWord).text();
|
|
|
|
|
let freq = $("#freq_" + theWord).text();
|
2022-07-18 13:29:04 +08:00
|
|
|
|
$.ajax({
|
|
|
|
|
type:"GET",
|
|
|
|
|
url:"/" + username + "/" + word + "/familiar",
|
2023-06-02 21:33:21 +08:00
|
|
|
|
success:function(response) {
|
2022-07-18 13:29:04 +08:00
|
|
|
|
let new_freq = freq - 1;
|
2023-01-29 12:01:19 +08:00
|
|
|
|
const allow_move = document.getElementById("move_dynamiclly").checked;
|
|
|
|
|
if (allow_move) {
|
|
|
|
|
if (new_freq <= 0) {
|
|
|
|
|
removeWord(theWord);
|
|
|
|
|
} else {
|
2023-06-02 21:33:21 +08:00
|
|
|
|
renderWord({word: theWord, freq: new_freq});
|
2023-01-29 12:01:19 +08:00
|
|
|
|
}
|
2022-07-18 13:29:04 +08:00
|
|
|
|
} else {
|
2023-01-29 12:01:19 +08:00
|
|
|
|
if(new_freq <1) {
|
|
|
|
|
$("#p_" + theWord).remove();
|
|
|
|
|
} else {
|
|
|
|
|
$("#freq_" + theWord).text(new_freq);
|
|
|
|
|
}
|
2022-07-18 13:29:04 +08:00
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
2022-07-18 19:51:23 +08:00
|
|
|
|
function unfamiliar(theWord) {
|
2022-07-18 13:29:04 +08:00
|
|
|
|
let username = $("#username").text();
|
2022-07-18 19:51:23 +08:00
|
|
|
|
let word = $("#word_" + theWord).text();
|
|
|
|
|
let freq = $("#freq_" + theWord).text();
|
2022-07-18 13:29:04 +08:00
|
|
|
|
$.ajax({
|
|
|
|
|
type:"GET",
|
|
|
|
|
url:"/" + username + "/" + word + "/unfamiliar",
|
2023-06-02 21:33:21 +08:00
|
|
|
|
success:function(response) {
|
2022-07-18 13:29:04 +08:00
|
|
|
|
let new_freq = parseInt(freq) + 1;
|
2023-01-29 12:01:19 +08:00
|
|
|
|
const allow_move = document.getElementById("move_dynamiclly").checked;
|
|
|
|
|
if (allow_move) {
|
2023-06-02 21:33:21 +08:00
|
|
|
|
renderWord({word: theWord, freq: new_freq});
|
2023-01-29 12:01:19 +08:00
|
|
|
|
} else {
|
|
|
|
|
$("#freq_" + theWord).text(new_freq);
|
|
|
|
|
}
|
2022-07-18 13:29:04 +08:00
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
2022-07-18 19:51:23 +08:00
|
|
|
|
function delete_word(theWord) {
|
2022-07-18 13:29:04 +08:00
|
|
|
|
let username = $("#username").text();
|
2023-01-31 16:39:11 +08:00
|
|
|
|
let word = theWord.replace('&', '&');
|
2022-07-18 13:29:04 +08:00
|
|
|
|
$.ajax({
|
|
|
|
|
type:"GET",
|
|
|
|
|
url:"/" + username + "/" + word + "/del",
|
2023-06-02 21:33:21 +08:00
|
|
|
|
success:function(response) {
|
2023-01-29 12:01:19 +08:00
|
|
|
|
const allow_move = document.getElementById("move_dynamiclly").checked;
|
|
|
|
|
if (allow_move) {
|
|
|
|
|
removeWord(theWord);
|
|
|
|
|
} else {
|
|
|
|
|
$("#p_" + theWord).remove();
|
|
|
|
|
}
|
2022-07-18 13:29:04 +08:00
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
2023-01-29 12:01:19 +08:00
|
|
|
|
|
2023-05-25 17:35:31 +08:00
|
|
|
|
function read_word(theWord) {
|
|
|
|
|
let to_speak = $("#word_" + theWord).text();
|
|
|
|
|
original_position = 0;
|
|
|
|
|
current_position = 0;
|
|
|
|
|
Reader.read(to_speak, inputSlider.value);
|
|
|
|
|
}
|
|
|
|
|
|
2023-01-29 12:01:19 +08:00
|
|
|
|
/*
|
|
|
|
|
* interface Word {
|
|
|
|
|
* word: string,
|
|
|
|
|
* freq: number
|
|
|
|
|
* }
|
|
|
|
|
* */
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 传入一个词频HTML元素,将其解析为Word类型的对象
|
|
|
|
|
*/
|
|
|
|
|
function parseWord(element) {
|
|
|
|
|
const word = element
|
|
|
|
|
.querySelector("a.btn.btn-light[role=button]") // 获取当前词频元素的词汇元素
|
|
|
|
|
.innerText // 获取词汇值;
|
|
|
|
|
const freq = Number.parseInt(element.querySelector(`#freq_${word}`).innerText); // 获取词汇的数量
|
|
|
|
|
return {
|
|
|
|
|
word,
|
|
|
|
|
freq
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 使用模板将传入的单词转换为相应的HTML字符串
|
|
|
|
|
*/
|
|
|
|
|
function wordTemplate(word) {
|
|
|
|
|
// 这个模板应当与 templates/userpage_get.html 中的 <p id='p_${word.word}' class="new-word" > ... </p> 保持一致
|
|
|
|
|
return `<p id='p_${word.word}' class="new-word" >
|
|
|
|
|
<a id="word_${word.word}" class="btn btn-light" href='http://youdao.com/w/eng/${word.word}/#keyfrom=dict2.index'
|
|
|
|
|
role="button">${word.word}</a>
|
|
|
|
|
( <a id="freq_${word.word}" title="${word.word}">${word.freq}</a> )
|
|
|
|
|
<a class="btn btn-success" onclick="familiar('${word.word}')" role="button">熟悉</a>
|
|
|
|
|
<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>
|
2023-05-25 17:35:31 +08:00
|
|
|
|
<a class="btn btn-info" onclick="read_word('${word.word}')" role="button">朗读</a>
|
2024-07-02 16:03:03 +08:00
|
|
|
|
|
2023-01-29 12:01:19 +08:00
|
|
|
|
</p>`;
|
|
|
|
|
}
|
|
|
|
|
|
2024-07-02 16:03:03 +08:00
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 使用模板将传入的单词转换为相应的HTML字符串
|
|
|
|
|
*/
|
|
|
|
|
function wordTemplate(word) {
|
|
|
|
|
// 这个模板应当与 templates/userpage_get.html 中的 <p id='p_${word.word}' class="new-word" > ... </p> 保持一致
|
|
|
|
|
return ``;
|
|
|
|
|
}
|
|
|
|
|
|
2023-01-29 12:01:19 +08:00
|
|
|
|
/**
|
|
|
|
|
* 删除某一词频元素
|
|
|
|
|
* 此处word为词频元素对应的单词
|
|
|
|
|
*/
|
|
|
|
|
function removeWord(word) {
|
|
|
|
|
// 根据词频信息删除元素
|
2023-01-31 16:39:11 +08:00
|
|
|
|
word = word.replace('&', '&');
|
2023-01-29 12:01:19 +08:00
|
|
|
|
const element_to_remove = document.getElementById(`p_${word}`);
|
2023-06-02 21:33:21 +08:00
|
|
|
|
if (element_to_remove !== null) {
|
2023-01-29 12:01:19 +08:00
|
|
|
|
element_to_remove.remove();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function renderWord(word) {
|
|
|
|
|
const container = document.querySelector(".word-container");
|
|
|
|
|
// 删除原有元素
|
|
|
|
|
removeWord(word.word);
|
|
|
|
|
// 插入新元素
|
|
|
|
|
let inserted = false;
|
|
|
|
|
const new_element = elementFromString(wordTemplate(word));
|
|
|
|
|
for (const current of container.children) {
|
|
|
|
|
const cur_word = parseWord(current);
|
|
|
|
|
// 找到第一个词频比它小的元素,插入到这个元素前面
|
2023-06-02 21:33:21 +08:00
|
|
|
|
if (compareWord(cur_word, word) === -1) {
|
2023-01-29 12:01:19 +08:00
|
|
|
|
container.insertBefore(new_element, current);
|
|
|
|
|
inserted = true;
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
// 当word就是词频最小的词时,把他补回去
|
|
|
|
|
if (!inserted) {
|
|
|
|
|
container.appendChild(new_element);
|
|
|
|
|
}
|
|
|
|
|
// 让发生变化的元素抖动
|
|
|
|
|
new_element.classList.add("shaking");
|
|
|
|
|
// 移动到该元素
|
|
|
|
|
new_element.scrollIntoView({behavior: "smooth", block: "center", inline: "nearest"});
|
|
|
|
|
// 抖动完毕后删除抖动类
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
new_element.classList.remove("shaking");
|
|
|
|
|
}, 1600);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 从string中创建一个HTML元素并返回
|
|
|
|
|
*/
|
|
|
|
|
function elementFromString(string) {
|
|
|
|
|
const d = document.createElement('div');
|
|
|
|
|
d.innerHTML = string;
|
|
|
|
|
return d.children.item(0);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 对比两个单词:
|
|
|
|
|
* 当first小于second时返回-1
|
|
|
|
|
* 当first等于second时返回0
|
|
|
|
|
* 当first大于second时返回1
|
|
|
|
|
*/
|
|
|
|
|
function compareWord(first, second) {
|
2023-06-02 21:33:21 +08:00
|
|
|
|
if (first.freq !== second.freq) {
|
|
|
|
|
return first.freq < second.freq ? -1 : 1;
|
2023-01-29 12:01:19 +08:00
|
|
|
|
}
|
2023-06-02 21:33:21 +08:00
|
|
|
|
if (first.word !== second.word) {
|
|
|
|
|
return first.word < second.word ? -1 : 1;
|
2023-01-29 12:01:19 +08:00
|
|
|
|
}
|
|
|
|
|
return 0;
|
2024-07-02 16:03:03 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
*
|
|
|
|
|
*
|
|
|
|
|
*/
|
|
|
|
|
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]];
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
wordContainersArray.forEach((p, index) => {
|
|
|
|
|
if (index < 10) {
|
|
|
|
|
p.style.display = 'block';
|
|
|
|
|
} else {
|
|
|
|
|
p.style.display = 'none';
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
2023-06-02 21:33:21 +08:00
|
|
|
|
}
|