随机选择

html部分

请输入你需要随机的数字,用","号分割输入完成后回车确认

css部分

*{margin: 0;padding: 0;
}body{display: flex;flex-direction: column;height: 100vh;justify-content: center;align-items: center;background-color: #2b88f0;
}h3{color: #fff;margin: 10px 0 20px;text-align: center;
}
.container{width: 500px;
}
textarea{border: 0;display: block;width: 100%;padding: 10px;border-radius: 3px;
}
textarea:focus{outline: none;
}.tag{background-color: #f0932b;color: #fff;border-radius: 50px;padding: 10px 20px;margin: 20px 5px 10px 0;font-size: 14px;display: inline-block;
}.active{background-color: black;
}

js部分

// 获取dom对象
const tags = document.querySelector("#tags");
const text = document.querySelector("textarea");// 文本域聚焦
text.focus()text.addEventListener("keyup", (e) => {// 如果按下回车键创建tag标签并且执行随机函数if (e.key == "Enter") {create_tag(text.value)text.value = "" // 文本域值清空random()}})function create_tag(value) {// 去除前后空格const temp = value.split(",").map((item) =>item.trim())// tag下追加domtemp.forEach((item)=>{const dom=document.createElement("span");dom.innerText=itemdom.classList.add("tag");tags.appendChild(dom);})
}function random(){// 记录最后一次选中的domlet last_dom// 伪数组转换为真数组const box=Array.from(tags.children)// 100ms执行一次添加active,100ms后删除activelet timer=setInterval(()=>{const dom=box[Math.floor(Math.random()*box.length)]last_dom=domdom.classList.add('active');setTimeout(()=>{dom.classList.remove('active');},100)},100)// 3s后清除计时器setTimeout(()=>{clearInterval(timer)// 给最后一次dom添加activesetTimeout(()=>{last_dom.classList.add("active")},100)},3000)
}

效果

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！