输入内容分隔开，随机选择。最后停留一个（html+js+css）

最新推荐文章于 2024-05-31 14:59:34 发布

codekjy

最新推荐文章于 2024-05-31 14:59:34 发布

阅读量93

点赞数

文章标签： css html javascript

本文链接：https://blog.csdn.net/qq_47997447/article/details/121108594

版权

<!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>

codekjy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
输入内容分隔开，随机选择。最后停留一个（html+js+css）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; box-sizing: border-box; } body{ background-col...
复制链接

扫一扫