Loteria

projeto de loteria

by Elender Gallas

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>
      </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" />

            <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" />
         ...

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;
}

function myFunctionClear() {
  for (i = 0; i < document.selecao.elements.length; i++)
    if (document.f1.elements[i].type == "checkbox")
      document.f1.elements[i].checked = 0
}