<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; box-sizing: border-box; } body{ background-color: blue; height: 100vh; display: flex; justify-content: center; align-items: center; flex-direction: column; } .container{ width: 500px; } h3{ color: white; text-align: center; margin-bottom: 20px; } textarea{ border: none; display: block; width: 100%; height: 100px; padding: 10px; margin-bottom: 20px; font-size: 16px; } .tag{ color: white; background-color: #ffeb3b; display: inline-block; padding: 20px; border-radius: 50px; font-size: 14px; margin: 0 5px 10px 0; } .tag.highlight{ background-color: #273c75; } </style> </head> <body> <div class="container"> <h3>输入所有选择,并用逗号分割(‘,’).<br>输入完毕后请按回车。</h3> <textarea placeholder="请在这里输入" id="textarea" autofocus></textarea> <div id="tags"> </div> </div> <script> //获取对象 const textarea = document.getElementById('textarea'); const tags = document.getElementById('tags'); //textarea添加事件 textarea.addEventListener('keyup',(e)=> { //keyup事件 createTags(e.target.value); if(e.key === 'Enter'){ //输入回车就调用random函数 random(); } }) //封装createTags函数方法,传入自己输入的值做参数。 function createTags(input) { //把输入的值用逗号分隔开,并且不为空字符。 const tags1 = input.split(',').map(tag => tag.trim()).filter(tag=>tag!==''); //没执行这个函数就把之前的内容清空。 tags.innerHTML = ''; tags1.forEach(item =>{ //设置为span格式等下好插入到tags中。 const tagEl = document.createElement('span'); //添加一个tag的class。 tagEl.classList.add('tag'); //在span中插入内容item也就是tags1中的某个对象。 tagEl.innerText = item; //把span标签插入到tags盒子中 tags.appendChild(tagEl) }) } //封装random函数 function random() { const timer = setInterval(()=>{ const randomtag = pinkRandom(); highlightTag(randomtag); setTimeout(()=>{ clear(randomtag) },100) },100) const time = 30; setInterval(()=>{ clearInterval(timer); setTimeout(()=>{ const randomtag = pinkRandom(); if(randomtag !== undefined){ highlightTag(randomtag); } },100) },time * 100) } function pinkRandom() { const tags = document.querySelectorAll('.tag'); // 设置一个随机数,返回tags的随机内容,也就是让某个对象添加highlight的class,改变颜色。 const a = parseInt(Math.random()*tags.length); return tags[a] } function highlightTag(randomtag) { randomtag.classList.add('highlight') } function clear(randomtag) { randomtag.classList.remove('highlight'); } </script> </body> </html>