Jump to content
adonaywinn

Sorteio javascript

Recommended Posts



<style>
   :root {
        --width-screen: 1500px;
    }
    #body {
        overflow-x: hidden;
    }
    .container-teste {
        display: flex;
        width: 100%;
        min-height: 100%;
        height:auto;
        background-color: aquamarine;
        transform-style: preserve-3d;
        padding-top: 10em;
        padding-bottom: 30em;
    }
 
    .cube {
        display: flex;
        height: 80%;
        width: 100%;
        justify-content: center;
        align-items: center;
        padding: 2px;
        flex-wrap: wrap;
        background-color: blueviolet;
        border: 10px solid #000;
        object-fit: contain;
  transform: scaleX(1) scaleY(0.8) scaleZ(0.8) skew(0, 5deg) rotateX(-10deg) rotateY(-62deg) rotateZ(-6deg) translateX(calc(var(--width-screen)/ 2)) translateY(0px) translateZ(0px) skewX(0deg) skewY(0deg);
}
.cube-wrap {
    display: flex;
    z-index: 0;
    
    justify-content: flex-end;
    align-items: center;
    height: 100%;
    width: 50%;
  perspective: var(--width-screen);
  perspective-origin: 50% 50%;
  align-self: flex-end;
}
.item-cube {
    display: flex;
    height: 2em;
    width: 5em;
    background-color: black;
    justify-content: center;
    align-items: center;
    font-size: 1.6em;
    margin: 2px;
    font-weight: bold;
    box-shadow: 1px 2px 2px #050a30;
    background-size: cover;
    background-repeat: no-repeat;
    color: #fff;
}

</style>
<div class="container-teste">
    <div class="cube-wrap">
        <div class="cube"></div>
    </div>
    <script>
        let itemobjt = [];
        for(let i = 0; i < 98; i++){
                let item = Math.floor(Math.random() * 9999);
                itemobjt.push(item);   
                elem = document.createElement('div');      
                elem.setAttribute('id', itemobjt[i]);
                elem.setAttribute('class', 'item-cube');

                let container = document.querySelector('.cube');
                container.insertBefore(elem, null);

        }
       
        let root = document.documentElement;
        let widthscreen = window.screen.width;
        root.style.setProperty('--width-screen', widthscreen+"px" );
    </script>
</div>

Boa tarde, Pessoal eu tenho um painel onde nele eu tenho varias divs simbolizando um usuário, e nesse painel gostaria de gerar um sorteio entre essas divs sorteando um numero aleatória que seria o numero de alguma das div no painel e que ao correr esse processo de sorteio ela trocasse a cor da div no painel por cada numero gerado no math.random, e no final teria um botão ou uma função que parasse o sorteio ao deixando selecionado o ultimo id sorteado da div, no entanto n tenho ideia de como fazer esse efeito com Java script ou se sugerirem outra linguagem.

Obs.: meu primeiro post, Grato desde ja.

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By ILR master
      Fala pessoal, tudo bem?
       
      Tô tentando fazer um pre-loading, mas não consigo de jeito algum.
      Quero mostrar uma animação enquanto a página é carregada e depois de caregada, esconder a animação e mostrar conteúdo.
       
      Aguém pode me ajudar?
       
      Segue código abaixo
       
       
      <!DOCTYPE html>
      <html lang="pt-br">
      <head>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />  
          <title>PÁGINA LOAD</title>

      <style type="text/css">
      .loadclass {
          border: 2px solid #f3f3f3; /* Light grey */
          border-top: 4px solid #ffc401; /* Blue */
          border-radius: 50%;
          width: 50px;
          height: 50px;
          animation: spin 2s linear infinite;
      }
      @keyframes spin {
          0% { transform: rotate(0deg); }
          100% { transform: rotate(360deg); }
      }
      .conteudo {
          display:none;
      }
      </style>
      <script>
          function loading(){
              document.getElementsByClassName('loadclass')[0].style.display="none";
              document.getElementsByClassName('conteudo').style.display="block";
          }
      </script>
      </head>
      <body onLoad="loading()">
      <div class="loadclass"></div>
      <div class="conteudo">SEU CONTEUDO AQUI DENTRO!!!</div>
      </body>
      </html>
    • By ILR master
      Pessoal, pergunta bem simples. Abaixo tenho o seguinte código:
       
      <script>
      function alerta()
      {
        if (window.confirm("Você realmente quer sair?")) {
          window.open("sair.html");
      }
      }
      </script>
       
      Funciona perfeitamente, só que está abrindo em outra janela e quero que abra na mesma janela.
       
      Alguém pode me ajudar?
    • By Giovanird
      Olá a todos!
      Tenho uma pagina que possui uma DIV onde coloquei uma pagina PHP.
      Uso a função setInterval para atualizar a pagina inclusa dentro da DIV.
      O problema é que ao acessar o site , a DIV só me mostra a pagina inclusa somente quando completo o primeiro minuto.
      Preciso que a pagina inclusa já inicie carregada
       
      Meu código JavaScript e a DIV com a pagina PHP
       
      <script> function atualiza(){ var url = 'direita.php'; $.get(url, function(dataReturn) { $('#direita').html(dataReturn); }); } setInterval("atualiza()",60000); </script> <div> <span id="direita"></span> </div>  
    • By Thiago Duarte
      Oi, gostaria de arrastar imagem e ao soltar formar bloco html, meu bloco de html ficaria com nome, content-1.html, content-2.html, etc
       
      Alguem pode me ajudar?
    • By juliosonic
      Boa noite..
      Estou desenvolvendo um site de https://www.maithunatantra.com.br/ e estou com um duvida sobre o menu de navegação da versão mobile.
      O menu que tem o dropdown "Terapeutas" e "Terapias" quando clico em cima ele expande como deve ser, mas quando clico denovo para recolher os submenus
      nao acontece nada.. segue o trecho do codigo do menu..
      <div class="collapse navbar-collapse" id="navbarsExample09">             <ul class="navbar-nav ml-auto">               <li class="nav-item  active"><a class="nav-link" href="index.html">Home</a></li>               <li class="nav-item  active"><a class="nav-link" href="about-us.html">Quem Somos</a></li>               <li class="nav-item dropdown1">                     <a class="nav-link dropdown-toggle" data-toggle="dropdown1" href="#">Terapeutas</a>                     <ul class="dropdown-menu">                         <li><a class="dropdown-item" href="terapeuta-julio-cezar.html">Julio Cezar</a></li>                         <li><a class="dropdown-item" href="terapeuta-pamela-priscila.html">Pamela Priscila</a></li>                     </ul>                                    </li>               <li class="nav-item dropdown">                     <a class="nav-link dropdown-toggle" data-toggle="dropdown1" href="#">Terapias</a>                     <ul class="dropdown-menu" aria-labelledby="dropdown01">                         <li><a class="dropdown-item" href="o-que-e-reiki.html">O que é Reiki</a></li>                         <li><a class="dropdown-item" href="beneficios-reiki.html">Benefícios do Reiki</a></li>                         <li><a class="dropdown-item" href="principios-reiki.html">Princípios do Reiki</a></li>                         <li><a class="dropdown-item" href="animais-reiki.html">Reiki em Animais</a></li>                         <li><a class="dropdown-item" href="animais-reiki.html">Estudos Sobre Reiki</a></li>                         <li><a class="dropdown-item" href="terapia-massagem-tantrica.html">Terapia Tântrica</a></li>                     </ul>               </li>               <li class="nav-item  active"><a class="nav-link" href="blog.html">Blog</a></li>                <li class="nav-item"><a class="nav-link" href="contato.html">Contato</a></li>             </ul>         </div>  
      Massagem Tantrica em Curitiba
      Tantra Curitiba
      Massagem Tântrica
      Tantra
      Julio Darshan

      Obrigado
      Att
      Julio Cezar
       
       
       
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.