大家好，欢迎来到IT知识分享网。
50 天学习 50 个项目 – HTMLCSS and JavaScript
day13-Random choice picker（随机选择器）
效果
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Random Choice Picker</title> <link rel="stylesheet" href="style.css" /> </head> <body> <!-- 容器 --> <div class="container"> <!-- 标题 --> <h3>输入所有选项，并用中文逗号('，')分隔。 <br> 完成后按回车键完成后按回车键</h3> <!-- 输入文本域 --> <textarea placeholder="在这里输入选项…" id="textarea"></textarea> <!-- 选项 --> <div id="tags"></div> </div> <script src="script.js"></script> </body> </html> style.css
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap'); /* 导入字体 */ * {
box-sizing: border-box; } body {
background-image: linear-gradient(to right, rgb(0, 255, 238), rgb(187, 234, 242)); font-family: 'Muli', sans-serif; display: flex; align-items: center; justify-content: center; height: 100vh; overflow: hidden; margin: 0; } /* 标题 */ h3 {
color: #333; margin: 10px 0 20px; text-align: center; } /* 容器 */ .container {
width: 500px; border-radius: 10px; border: #333 2px solid; box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); padding: 0 10px; } /* 文本域 */ textarea {
border: none; display: block; 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; } /* 高亮 */ .tag.highlight {
background-color: #273c75; } script.js
// 重点是 appendChild Math.random() 的应用 // 1.获取元素节点 const tagsEl = document.getElementById('tags');//选项卡 const textarea = document.getElementById('textarea');//文本域 // 浏览器会将焦点设置在指定的<textarea>元素上，这意味着用户可以直接在该文本区域内进行输入操作，而无需点击它。 textarea.focus() // 监听回车键按下后，弹起是触发 textarea.addEventListener('keyup', (e) => {
// 创建选项 createTags(e.target.value); // 如果是回车键 if (e.key === 'Enter') {
setTimeout(() => {
e.target.value = '' }, 10) // 随机选中一个 randomSelect() } }) // 创建选项 function createTags(input) {
// 1.以,分割为数组 // 2.过滤掉空的选项 // 3.去掉所有选项的两边的空格 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') } 免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/118558.html
