今天我们来做一个随机选择器的小demo，（选择困难症的福音），能将你纠结的事放到这里进行随机选择。

直接来看效果：

首先输入吃饭，睡觉，写代码

用html5做一个随机抽题的小程序 h5随机抽签_用html5做一个随机抽题的小程序


然后回车：最终选中了睡觉，但是现在不睡觉哈哈哈。

用html5做一个随机抽题的小程序 h5随机抽签_html_02


来看代码实现：

首先是html部分：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Random Choice Picker</title>
  </head>
  <body>
    <div class="container">
      <h3>Enter all of the choices divided by a comma (','). 
      <br> Press enter when you're done</h3>
      <!-- 输入框 -->
      <textarea placeholder="Enter choices here..." id="textarea"></textarea>
    
      <!-- 选择项 -->
      <div id="tags">
        <span class="tag">choice 1</span>
        <span class="tag highlight">choice 2</span>
        <span class="tag">choice 3</span>
      </div>
    </div>

    <script src="script.js"></script>
  </body>
</html>

主要是标题，text框，选择项这三块。

再来看css部分：

* {
    box-sizing: border-box;
}

body {
    background-color: #2b88f0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden;
    margin: 0;
}

h3{
    color: #fff;
    margin: 10px 0 20px;
    /* 标题居中 */
    text-align: center;
}

.container{
    width: 500px;
}
/* 输入框 */
#textarea{
    border: none;
    display: block;
    /* 宽度撑满，也就是500px */
    width: 100%;
    height: 100px;
    font-family: inherit;
    padding: 10px;
    margin: 0 0 20px;
    font-size: 16px;
}
/* 选择的标签样式 */
.tag {
    background-color: #f0932b;
    color: #fff;
    border-radius: 50px;
    padding: 10px 20px;
    margin: 0 5px 10px 0;
    font-size: 14px;
    display: inline-block;
}
/* 被选中的那个高亮 */
.highlight{
    background-color: #273c75;
}

css代码也没有什么复杂的，主要是进行一些样式的书写。

重点在于JavaScript：

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

textarea.focus()

// 监听你输入的键盘按键
textarea.addEventListener('keyup', (e)=>{
    createTags(e.target.value)

    // 如果按的是回车，等待10ms然后调用随机选择方法
    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 = ''

    // 将写入的choice加上tag，并且给它上树
    tags.forEach(tag => {
        const tagEl = document.createElement('span')
        tagEl.classList.add('tag')
        tagEl.innerText = tag
        tagsEl.appendChild(tagEl)
    })
}

function randomSelect() {
    // 进行30次随机
    const times = 30

    const interval = setInterval(()=>{
        // 拿到一个随机标签
        const randomTag = pickRandomTag()

        // 突出显示随机标签
        highlightTag(randomTag)

        // 过100ms去除随机标签，这就达到了一个在不同标签之间切换高亮的效果
        setTimeout(()=>{
            unHighlightTag(randomTag)
        },100)
    },100);

    // 3s后清除定时器
    setTimeout(()=>{
        // 清除interval定时器
        clearInterval(interval)

        // 对最终的选中的choice高亮
        setTimeout(()=>{
            const randomTag = pickRandomTag()

            highlightTag(randomTag)
        },100)

    },times * 100)
}

// 拿到一个随机标签方法
function pickRandomTag() {
    const tags = document.querySelectorAll('.tag')
    //  Math.floor()为向下取整, Math.ceil()这个是向上取整
    return tags[Math.floor(Math.random() * tags.length)]
}

// 设置被选中之后的高亮效果
function highlightTag(tag) {
    tag.classList.add('highlight')
}

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

首先是监听键盘按键，如果你按的是回车键，那么会调用randomSelect函数，这个函数里面设置一个次数为30，然后设置一个interval来进行标签选中过程，每100ms进行一次，选中的过程中会给被选中的赋值上高亮class,然后记得清除定时器，不然它会无限循环。而拿到随即标签的方法是pickRandomTag，这主要是随机数乘以集合数量，进行一下向下取整，防止出现那种小数的情况，而两个highlightTag和unHighlightTag主要是对highllight类的增加和去除。大概就是这些了，JavaScript这部分还是要仔细地去理解的。