卑微幻想家

前言

这个项目来源于GitHub上的一个开源项目https://github.com/bradtraversy/50projects50days，总共有50个用来练手的前端项目，我学习然后复现效果，并记录学习笔记和心得。

效果展示

HTML&CSS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>random-choice-picker</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        html, body {
            height: 100%;
        }

        body {
            background-color: #2b88f0;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .container {
            width: 500px;
        }

        .container h1 {
            padding: 0 50px;
            font-size: 18px;
            color: #fff;
            margin: 15px 0;
            text-align: center;
        }

        .container textarea {
            box-sizing: border-box;
            width: 100%;
            height: 100px;
            padding: 10px;
            font-size: 16px;
        }

        .container textarea::placeholder {
            font-size: 16px;
        }

        .choose-warp {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin: 20px 0;
        }

        .choose-warp span {
            background-color: #f0932b;
            border-radius: 999px;
            color: #fff;
            padding: 10px 20px;
        }

        .choose-warp span.active {
            background-color: #273c75;
        }

    </style>
</head>
<body>
<div class="container">
    <h1>输入所有选项，用逗号(',')分隔。完成后按回车键</h1>
    <textarea id="textInput" placeholder="在此输入选项..."></textarea>
    <div class="choose-warp">
    </div>
</div>

<script>
    let textInput = document.querySelector('#textInput');
    let chooseWarp = document.querySelector('.choose-warp');
    textInput.addEventListener('input', function () {
        let textList = this.value.split(',');
        let childrenStr = ''
        textList.forEach(item => {
            if (item && item !== '\n') {
                childrenStr += `<span>${item}</span>`
            }
        })
        chooseWarp.innerHTML = childrenStr
    })

    window.addEventListener('keyup', function (e) {
        if (e.key === 'Enter') {
            textInput.value = ''
            randomChoose()
        }
    })

    function randomChoose() {
        let nodeList = document.querySelectorAll('.choose-warp span');
        let length = nodeList.length;
        let randomNum = Math.floor(Math.random() * length)

        let interval = setInterval(() => {
            nodeList.forEach(node => node.classList.remove('active'))
            nodeList[Math.floor(Math.random() * length)].classList.add('active')
        }, 200);

        setTimeout(()=>{
            clearInterval(interval)
            nodeList.forEach(node => node.classList.remove('active'))
            nodeList[randomNum].classList.add('active')
        },3000)
    }
</script>
</body>
</html>

总结

作者的写法

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

textarea.focus()

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

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

        randomSelect()
    }
})

function createTags(input) {
    const tags = input.split(',').filter(tag => tag.trim() !== '').map(tag => tag.trim())
    
    tagsEl.innerHTML = ''

    tags.forEach(tag => {
        const tagEl = document.createElement('span')
        tagEl.classList.add('tag')
        tagEl.innerText = tag
        tagsEl.appendChild(tagEl)
    })
}

function randomSelect() {
    const times = 30

    const interval = setInterval(() => {
        const randomTag = pickRandomTag()

        highlightTag(randomTag)

        setTimeout(() => {
            unHighlightTag(randomTag)
        }, 100)
    }, 100);

    setTimeout(() => {
        clearInterval(interval)

        setTimeout(() => {
            const randomTag = pickRandomTag()

            highlightTag(randomTag)
        }, 100)

    }, times * 100)
}

function pickRandomTag() {
    const tags = document.querySelectorAll('.tag')
    return tags[Math.floor(Math.random() * tags.length)]
}

function highlightTag(tag) {
    tag.classList.add('highlight')
}

function unHighlightTag(tag) {
    tag.classList.remove('highlight')
}

他和我的写法差不多，但是可以设定跳转次数。

DAY13-随机选择挑选

https://www.zhaojun.inkhttps://www.zhaojun.ink/archives/day13-random-choice-picker

作者

卑微幻想家

发布于

2023-02-27

许可协议