Numa reunião que fiz, precisei sortear um livro entre as pessoas presentes, e utilizei um desses sorteadores de números que tem na internet.

Porém, penso que é um projeto tão fácil de fazer, que reproduzo a seguir a minha versão.

Vide https://asgunzi.neocities.org/Experimentos/Sorteio.

Começo com o html, inserindo as caixas de input dos números e o botão de Rodar.

<form>

Mínimo e Máximo a sortear (ambos inclusivos):

<input type="text" id="idA" value="1" size = 4>

<input type="text" id="idB" value="10" size = 4>

<button type = "button" onclick="Rodar()" tabindex = "0">Rodar</button> 

</form>

A seguir, rotina para ler os números dos inputs e sortear um número aleatório (lançando mão da rotina auxiliar getRandomInt, que simplesmente gera um número inteiro aleatório dentro dos limites.

                let Nmin = parseInt(d3.select("#idA").property("value"));

                let Nmax = parseInt(d3.select("#idB").property("value"));

                let sorteio;

                sorteio = getRandomInt(Nmin   ,Nmax);

Finalmente, ploto o número sorteado. A ideia de utilizar o transition é a do número piscar por alguns segundos: o número aparece, depois some, depois aparece de novo.

                let duracao = 200;

                svg.append("text").attr("x", 350).attr("y", 200)

                .transition().duration(duracao).text(sorteio).attr("font-size",140)

                .transition().duration(duracao).text("")

                .transition().duration(duracao).text(sorteio)

                .transition().duration(duracao).text("")

                .transition().duration(duracao).text(sorteio);

Uma vantagem deste trabalho é que não vão ficar aparecendo propagandas, como nesses que a gente encontra na internet.

Teste no link a seguir https://asgunzi.neocities.org/Experimentos/Sorteio.