2

tengo un problema que no estoy resolviendo... Se trata que debo hacer una pagina en la que debo recorrer varios numeros de telefonos que estan en un json, array o en una base de datos, y al darle el boton sortear, empiece una animacion de los numeros todos pasando asi rapido como se ve aveces en la television, con javascript o algun otro lenguaje, y cuando le de a parar, me salga un numero de ese array... No se si hay alguna libreria para lograr ese efecti y luego un algoritmo para recorrer tengo solo por el momento uno muy basico como este:

html:

<div class="container-login100-form-btn">
                        <button class="login100-form-btn" name="btnsorteo" id="btnsorteo">
                            Parar
                        </button>
                    </div>

Y el js es asi:

var boton=document.getElementById("btnsorteo");

boton.onclick=function sorteo () {

    participantes=["  0982820405    Verónica", "0972810576  Vicente", "982211370    Saida", "0971650876     Liliana",
  "0971112309   Carlos Andrés","0961438607  Paulina","0971226914    Elias","0981113964  Cesar","0976549865  Manuel"];



    var numero_participantes=participantes.length;
    numero=Math.floor(Math.random()*numero_participantes);
    //numero=Math.floor(Math.random()*numero_participantes2);
    alert('El ganador es:'+participantes[numero]);

}

Pero como ven, solo recorre los que estan en ese array, y no hace ningun efecto animado, no se si con jquery o algo se puede lograr tambien eso, si conocen algun dato aunque sea cualquier cosa les agradecere!

1 respuesta 1

2

Gracias a Mathew que desarrollo una libreria Slots.js se puede adaptar para hacer lo que buscas, aqui el codigo, solo agrega los elementos de tu lista:

$(function() {

    var msa = [

            { name: "0982820405    Verónica" },
            { name:"0972810576  Vicente" },
            { name: "982211370    Saida" },
            { name:"0971650876     Liliana" },
            { name: "0971112309   Carlos Andrés" },
            { name: "0971226914    Elias" },
            { name: "9823423423 Pancho" },
            { name: "465477987   Juanita" },
            { name: "654654654   Brandon" },
        
        ],
        $input = $('input'),
        random_index;

    //lista recursiva hasta detenerse en el elemento configurado
    function makeSlotList(list){
        //soporta hasta 18 valores en la animacion
        if(list.length<20){//el valor puede ser ajustado
            var index = _.random(msa.length-1);
            if(list.length===1){
                /*
                    elemento inicial de la lista
                */
                random_index = index;
            }
            list.push( '<li index='+_.random(msa.length-1)+'>'+msa[index].name+'</li>' );
            return makeSlotList(list);
        } else {
            //dio un giro
            //la entrada se limpia
            $input.val('');
            // se agrega el elemento seleccionado
            $('#slot').html(list.join('')).parent().show().trigger('spin');
            return list;
        }
    }

    //se crea la lista de elementos o slot
    function makeSlots(){
        //inicia en el valor aleatorio previo
        var list = ['<li>'+$input.val()+'</li>'];

        //se hace recursivo el llamado
        makeSlotList(list);
    }

    $('#slot').jSlots({
        number: 1,
        spinner : '.jSlots-wrapper',
        spinEvent: 'spin',
        time: 300,
        loops: 1,
        endNum: 2,//finaliza en el segundo elmento del arreglo aleatorio
        onEnd: function(finalElement){
            //set result
            $input.val(msa[random_index].name);
            //oculta spiner
            $(this.spinner).hide();
        }
    });

    //elemento aleatorio
    $('#random_location').on('click', makeSlots);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://bl.ocks.org/sarahjsquire/raw/4706c4d48962e9962175/6ad2d061715fbc9f6de328ecb5ab5d3a6c1003d5/jquery.jSlots.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>

<script src="https://bl.ocks.org/sarahjsquire/raw/4706c4d48962e9962175/6ad2d061715fbc9f6de328ecb5ab5d3a6c1003d5/jquery.jSlots.js"></script>


<style>
    * { box-sizing: border-box; }
    li, ul { padding: 0; margin:0; }
    input {
        margin: 4px 0;
        font-family: Arial, sans-serif;
        font-size: 16px;
        padding: 5px 4px 4px;
        height: 30px;
        width: 350px;
    }
    #slot li {
        font-family: Arial, sans-serif;
        font-size: 16px;
        padding: 6px 4px 6px 6px;
        line-height: normal;
        height: 30px;
        overflow: hidden;
    }
    #slot_wrapper {
        position: relative;
    }
    .jSlots-wrapper {
        margin: 4px 0;
        overflow: hidden; /*oculta la lista */
        height: 29px; /*altura de caca slot */
        width: 300px;
        position: absolute;
        top: 0px;
        display: none;
    }
    #slot {
        display: none;
    }
</style>
<div id="slot_wrapper">
    <input type="text" class="search">
    <ul id="slot">
        <!-- la lista llenada por cada elemento -->
        <li>test</li><li>&nbsp;</li><li>&nbsp;</li><li>&nbsp;</li><li>&nbsp;</li><li>&nbsp;</li><li>&nbsp;</li><li>&nbsp;</li><li>&nbsp;</li><li>&nbsp;</li><li>&nbsp;</li><li>&nbsp;</li><li>&nbsp;</li><li>&nbsp;</li><li>&nbsp;</li><li>&nbsp;</li><li>&nbsp;</li><li>&nbsp;</li><li>&nbsp;</li><li>&nbsp;</li>
    </ul>
</div>

<button type="button" id="random_location">Gira la ruleta</button>

saludos

3
  • Me ayudaste bastante, no habia encontrado esa libreria, pero muchas gracias por el aporte! el 2 abr. 2019 a las 16:21
  • 1
    Y tengo una pregunta mas, tu crees que puede ser posible que esos valores que me saque pueda recorrer siendo un json?, pero me imagino que habria que hacer algo parecido a un JSON.parse() para convertir el json a un array cierto? el 2 abr. 2019 a las 21:54
  • Pues dependiendo de como venga tu json en dado caso revisa let jsonObject = response.data; y haces un map. el 3 abr. 2019 a las 23:15

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.