50projects50days知识点-13-random-choice-picker

示例网址：

https://50projects50days.com/projects/faq-collapse/

http://50projects.tc.cluski.top/50projects50days/faq-collapse/

效果：

思路：

此例子主要是js代码块比较重要：

const textarea = document.getElementById('textarea');
const tagsEl = document.getElementById('tags');

textarea.addEventListener('keyup', (e) => {
    createTags(e.target.value)

    if (e.key === 'Enter') {
        setTimeout(() => {
            e.target.value = ''
        }, 101)
        randomSelect()
    }
})

function createTags(input) {
    console.log(input)
    tagsEl.innerHTML = ''
    let tags = input.split(',')
        .filter(tag => tag.trim() !== '')
        .map(tag => tag.trim());
    tags.forEach(tag => {
        let tagEl;
        tagEl = document.createElement('span');
        tagEl.classList.add('tag')
        tagEl.innerHTML = tag
        tagsEl.appendChild(tagEl)
    })
}

function randomSelect() {
    // 随机次数为30次
    let times = 30;

    // 设置定时器，每隔100ms执行一次
    let interval = setInterval(() => {
        // 随机选出一个tag
        let tag = pickRandomTag();
        // 高亮此tag
        highlightTag(tag)
        // 100ms之后取消高亮
        setTimeout(() => {
            unHighlightTag(tag)
        }, 100)
    }, 100)

    // 30次之后，选出一个tag，最终高亮
    setTimeout(() => {
        // 清除掉之前的定时器
        clearInterval(interval)

        setTimeout(() => {
            let tag = pickRandomTag();
            highlightTag(tag)
        }, 100)
    }, times * 100)
}

/**
 * 随机选出一个tag
 * @returns HTMLElement
 */
function pickRandomTag() {
    let tags = document.querySelectorAll('.tag');
    return tags[Math.floor(Math.random() * tags.length)]
}


/**
 * 高亮一个tag
 * @param tag tag元素
 */
function highlightTag(tag) {
    tag.classList.add('highlight')
}

/**
 * 取消高亮一个tag
 * @param tag tag元素
 */
function unHighlightTag(tag) {
    tag.classList.remove('highlight')
}

setTimeout()、setInterval()

这两个定时器没有什么好说，可以直接看文档。值得注意的是使用完setInterval()之后，得使用clearInterval()来清除之前的定时，不然会一直执行下去。

参考链接：

setInterval() - Web API 接口参考 | MDN (mozilla.org)

setTimeout() - Web API 接口参考 | MDN (mozilla.org)

createElement()

在 HTML 文档中，Document.createElement() 方法用于创建一个由标签名称 tagName 指定的 HTML 元素。如果用户代理无法识别 tagName，则会生成一个未知 HTML 元素 HTMLUnknownElement。

参考文档：

Document.createElement() - Web API 接口参考 | MDN (mozilla.org)

appendChild()

Node.appendChild() 方法将一个节点附加到指定父节点的子节点列表的末尾处。如果将被插入的节点已经存在于当前文档的文档树中，那么 appendChild() 只会将它从原先的位置移动到新的位置（不需要事先移除要移动的节点）。

这意味着，一个节点不可能同时出现在文档的不同位置。所以，如果某个节点已经拥有父节点，在被传递给此方法后，它首先会被移除，再被插入到新的位置。若要保留已在文档中的节点，可以先使用 Node.cloneNode() 方法来为它创建一个副本，再将副本附加到目标父节点下。请注意，用 cloneNode 制作的副本不会自动保持同步。

参考文档：

Node.appendChild - Web API 接口参考 | MDN (mozilla.org)