Question

我有一个测验，访问者使用他们的姓名和电话号码订阅。

然后我将不得不进行实时流媒体选择获胜者（随机）。所以我想制作一个动画页面来实现这一点。

我有一组div，每个div包含访问者的姓名和电话号码。

当我打开页面时，默认情况下div应该从顶部到底部快速移动到胜利者div中（看一下代码），这样我就无法区分或读取div中写的内容了当我按任意键或按钮时，它应该停止并显示赢家div（包含获胜者信息）。

这是我的HTML：

<div id="winner">
    <div class="visitor_details"> Name:Petter , Phone: 888.888.888</div>
    <div class="visitor_details"> Name:Jhon, Phone: 999.888.888</div>
    <div class="visitor_details"> Name:Maechl , Phone: 777.888.888</div>
    <div class="visitor_details"> Name:Ali , Phone: 666.888.888</div>
    <div class="visitor_details"> Name:Jack , Phone: 555.888.888</div>
    <div class="visitor_details"> Name:Shong , Phone: 444.888.888</div>
    <div class="visitor_details"> Name:Morad , Phone: 333.888.888</div>
    <div class="visitor_details"> Name:Smith , Phone: 222.888.888</div>
</div>

我没有找到任何可以实现此目的的插件。

非常感谢你们。

Answer 1

只需使用setInterval()和clearInterval()。

＆＃13;

$(document).ready(function() {

  var winners = $('#winner .visitor_details').hide();
  var button = $('.stopbtn');
  
  var showWinner = function(winners) {
    var index = Math.floor(Math.random() * (winners.length-1));
    var winner = winners.eq(index);
    winner.show().siblings().hide();
  };
  
  var interval = setInterval(function() {
    showWinner(winners);
  }, 50);
  
  button.click(function() {
    clearInterval(interval);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="winner">
<div class="visitor_details"> Name:Petter , Phone: 888.888.888</div>
<div class="visitor_details"> Name:Jhon, Phone: 999.888.888</div>
<div class="visitor_details"> Name:Maechl , Phone: 777.888.888</div>
<div class="visitor_details"> Name:Ali , Phone: 666.888.888</div>
<div class="visitor_details"> Name:Jack , Phone: 555.888.888</div>
<div class="visitor_details"> Name:Shong , Phone: 444.888.888</div>
<div class="visitor_details"> Name:Morad , Phone: 333.888.888</div>
<div class="visitor_details"> Name:Smith , Phone: 222.888.888</div>
</div>

<button class="stopbtn">Stop</button>

＆＃13;

Answer 2

您可以获得从0到visitorslength-1

的随机数

var randomindex = Math.floor(Math.random() * $('.visitor_details').length - 1)

然后使用该随机数基于索引来定位元素并将其选为胜利者。

var winner = $('.visitor_details').eq(randomindex);

 var randomindex = Math.floor(Math.random() * $('.visitor_details').length - 1)   
 var winner = $('.visitor_details').eq(randomindex );
 alert(winner.text());

  <div id="winner">
<div class="visitor_details"> Name:Petter , Phone: 888.888.888</div>
<div class="visitor_details"> Name:Jhon, Phone: 999.888.888</div>
<div class="visitor_details"> Name:Maechl , Phone: 777.888.888</div>
<div class="visitor_details"> Name:Ali , Phone: 666.888.888</div>
<div class="visitor_details"> Name:Jack , Phone: 555.888.888</div>
<div class="visitor_details"> Name:Shong , Phone: 444.888.888</div>
<div class="visitor_details"> Name:Morad , Phone: 333.888.888</div>
<div class="visitor_details"> Name:Smith , Phone: 222.888.888</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Answer 3

试试这个：

<!DOCTYPE html>
<html>

  <head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="script.js"></script>
  </head>

  <body>

<div id="winner">
<div class="visitor_details"> Name:Petter , Phone: 888.888.888</div>
<div class="visitor_details"> Name:Jhon, Phone: 999.888.888</div>
<div class="visitor_details"> Name:Maechl , Phone: 777.888.888</div>
<div class="visitor_details"> Name:Ali , Phone: 666.888.888</div>
<div class="visitor_details"> Name:Jack , Phone: 555.888.888</div>
<div class="visitor_details"> Name:Shong , Phone: 444.888.888</div>
<div class="visitor_details"> Name:Morad , Phone: 333.888.888</div>
<div class="visitor_details"> Name:Smith , Phone: 222.888.888</div>
</div>

<button class="stopbtn">Stop</button>
<style>
  .visitor_details{
    display:inline-block;
    width:100px;
    height:100px;
    border:1px solid gray;
  }

  .visitor_details.active{
    background-color:green;
  }
</style>
<script>
$(document).ready(function() {

  var winners = $('#winner .visitor_details');
  var button = $('.stopbtn');

  var showWinner = function(winners) {
    var index = Math.floor(Math.random() * (winners.length-1));
    var winner = winners.eq(index);
    winner.addClass('active').siblings().removeClass('active');
  };

  var interval = setInterval(function() {
    showWinner(winners);
  }, 500);

  button.click(function() {
    clearInterval(interval);
    alert("Winner is: " + $('.active').text())
  });
});
</script>
  </body>

</html>

如何使用jQuery移动div并随机选择一个

3 个答案: