js题目3

3283478051Sun

已于 2025-01-25 23:18:55 修改

阅读量125

点赞数 2

文章标签： javascript 开发语言 ecmascript

于 2025-01-24 19:43:32 首次发布

本文链接：https://blog.youkuaiyun.com/2401_86997425/article/details/145345818

版权

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .whole{
      width: 500px;
      height: 500px;
      margin: 0 auto;
    }
    .reveal{
      background-color: aliceblue;
      text-align: center;
    }
    .control{
      display: flex;
      justify-content: center;
      background-color: antiquewhite;
    }
    .first,.third{
      opacity: 0.7;
    }
  </style>
</head>
<body>
  <div class="whole">
    <div class="reveal">
      <div class="first">20250101李锐</div>
      <div class="second">20250102王宇</div>
      <div class="third">202501023张萌</div>
    </div>
    <div class="control">
      <div class="start">
        <button>开始</button>
      </div>
      <div class="end">
        <button>结束</button>
      </div>
    </div>
  </div>
  <script>
    const data=['20250101李锐','20250102王宇','202501023张萌','20250104刘阳','20250105程佳','20250106杨宁','20250107赵辉','20250108黄兴',
    '20250109周瑶','20250110吴俊','20250111徐辉','20250112孙涛','20250113胡玲','20250114朱杰','20250115高城','20250116林锐','20250117郭宇',
    '20250118马军','20250119马俊','20250120罗婷','20250121梁峰','20250122宋佳','20250123郑阳','20250124谢晖','20250125韩雪','20250126唐睿',
    '20250127冯玉','20250128宇浩','20250129东瑞','20250130萧玉','20250131程琳','20250132王宇','20250133曹杰','20250134邓瑶','20250135徐畅',
    '20250136博宇','20250137沈瑞','20250138曾辉','20250139鹏泰','20250140吕佳','20250141苏瑶','20250142卢阳','20250143蒋军','20250144蔡慧',
    '20250145嘉城','20250146丁宁','20250147魏峰','20250148薛宇','20250149叶萌','20250150闫旭']
    let time=0
    const first=document.querySelector('.first')
    const second=document.querySelector('.second')
    const third=document.querySelector('.third')
    const start=document.querySelector('.start')
    start.addEventListener('click',function(){
      time=setInterval(function(){
        const random=parseInt(Math.random() * data.length)
        first.innerHTML=data[random-1]
        second.innerHTML=data[random]
        third.innerHTML=data[random+1]
      },35)
    })
    const end=document.querySelector('.end')
    end.addEventListener('click',function(){
      clearInterval(time)
    })
  </script>
</body>
</html>

屏幕录制 2025-01-24 140810