时间戳

首页 > 解决方案 > CSS / jQuery - 通过随机字符循环

javascript - CSS / jQuery - 通过随机字符循环

问题描述

我有一个简单的 HTML 片段，如下所示：

<div class="numbers">
    <span>1</span>
    <span>3</span>
    <span>9</span>
    <span>2</span>
    <span>5</span>
</div>

我试图让数字在屏幕上随机循环 1-9，所以每个跨度都会在 1-9 之间消失。

我打算使用 Javascript / jQuery 来尝试实现这一目标，但在我开始之前，我想看看这是否可以仅使用 CSS 来实现？

有没有人做过类似的事情的例子？

标签： javascriptjquerycss

解决方案

仅使用 CSS 是不可能生成随机数的。你可以使用 jQuery。setInterval，random()并且loop是你的朋友。

setInterval(function() {
  $('.numbers').find('span').each(function(index, element) {
    let rNum = '',
      num = "123456789";
    rNum = num.charAt(Math.floor(Math.random() * num.length));
    $(this).text(rNum);
  });
}, 1500)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="numbers">
  <span>1</span>
  <span>3</span>
  <span>9</span>
  <span>2</span>
  <span>5</span>
</div>

推荐阅读