Loteria

projeto de loteria

HTML

<body>
  <div class="limits" id='numeros'>
    <center>
      <p>Primeiro, escolha quantos números irá apostar</p>

      <button data-value="6" class='btn btn-info custom'onclick="myFunction(event)">6 (R$ 2,00)</button>
      <button data-value="7" class='btn btn-info custom' onclick="myFunction(event)">7 (R$ 5,00)</button>
      <button data-value="8" class='btn btn-info custom' onclick="myFunction(event)">8 (R$ 10,00)</button>
      <button data-value="9"class='btn btn-info custom' onclick="myFunction(event)">9 (R$ 20,00)</button>
      <button data-value="10" class='btn btn-info custom' onclick="myFunction(event)">10 (R$ 50,00)</button>
      <button data-value="11" class='btn btn-info custom' onclick="myFunction(event)">11 (R$ 100,00)</button>
      <button data-value="12" class='btn btn-info custom' onclick="myFunction(event)">12 (R$ 250,00)</button>
      <button data-value="13" class='btn btn-info custom' onclick="myFunction(event)">13 (R$ 500,00)</button>
      <button data-value="14" class='btn btn-info custom' onclick="myFunction(event)">14 (R$ 1000,00)</button>
      <button data-value="15" class='btn btn-info custom' onclick="myFunction(event)">15 (R$ 2000,00)</button>
      <p>
        <button class='btn btn-info custom' onclick="myFunction2()">Opções Avançadas</button>
        <input type="button" class='btn btn-info custom' onclick="myFunction3()" value="Escolher dezenas">
      </p>
      <div class="checks" id='tabela'>
        <form action="form_action.asp">
          <FORM NAME="selecao">
            <input type="checkbox" name="myTextEditBox" onClick="return KeepCount(event)" id="check01" value="01" />
            <label for="check01">01</label>
            <input type="checkbox" name="myTextEditBox" onClick="return KeepCount(event)" id="check02" value="02" />
            <label for="check02">02</label>
            <input type="checkbox" name="myTextEditBox" onClick="return KeepCount(event)" id="check03" value="03" />
            <label...

CSS

body {
     background:#00AB5D;
     width:100%;
     height:100%;
     text-align:center;
 }
label{
    font-weight: bold;
   border-radius: 34px;
 border-color: white;

}
}
 #numeros {
     
 }
.btn-info {
    color: #FFF;
    background-color: #5BC0DE;
    border-color: #46B8DA;
}
.btn {
    display: inline;
    padding: 6px 12px;
    margin: 1px;
    font-size: 14px;
    font-weight: 800;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    -moz-user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;}
 p {
     font-size: 25px;
     color:white;
     font-weight: 800;
 }
 #tabela {
     display:none;
     background:#5BC0DE;
     width:90%;
     border-radius: 35px;
     border-spacing: 10px;
     border: solid #FFFFEA;
     text-align: center;
     font-family:"Arial";
     font-size: 25px;
     color:white;
 }
#tabela2{ 
    display:none;
}

 input[type=checkbox]:checked + label {
     background: red;
 }
 .custom {
     display:inline;
     border-radius: 35px;
 }

JavaScript

(function($){

  var currentLimit=6;

  $('div.limits > input[type=button]').on('click',function(){
    currentLimit = parseInt($(this).data('value'));
  });

  $('div.checks input').on('click', function(e){
    var totalChecked = $('input:checked').length;

    if (totalChecked > currentLimit){
      e.preventDefault();
    }
  });
})
var limite = 0;
function myFunction(event) {
  var x = document.getElementById("tabela");
  x.style.display = "inline-block";
  limite = parseInt(event.target.dataset.value);
}

function myFunction2() {
  var x = document.getElementById("tabela2");
  x.style.display = "inline-block";
}

var quantidade = 0;
function KeepCount(event) {
  if (event.target.checked && quantidade == limite) {
    event.preventDefault();
    return;
  }
  quantidade += event.target.checked ? 1 : -1;	
}

function myFunction3() {
  var myTextEditBox = document.forms[0];
  var txt = "";
  var i;
  for (i = 0; i < myTextEditBox.length; i++) {
    if (myTextEditBox[i].checked) {
      txt = txt + myTextEditBox[i].value + " ";
    }
  }
  document.getElementById("resultado").value = "Você escolheu as dezenas: " + txt;
}