Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <title>F5Refresh</title>
- <link rel="stylesheet" type="text/css" href="f5css.css">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta charset="utf-8">
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
- </head>
- <body>
- <select id="appearance-select" style="opacity: 0.8;" onchange="updated(this)">
- <option>Selecione o nível</option>
- <option value="1">Nível 1</option>
- <option value="2">Nível 2</option>
- <option value="3">Nível 3</option>
- </select>
- <button>Aplicar</button>
- <image id="teclaf5" src="imagens/f5refresh.fw.png"><br>
- <image id="GP" src="imagens/GP.png">
- <div class="content">
- <!--<table id="imagens">
- <tr>
- <td id="cl1"><img id="foto1" src=""></td>
- <td id="cl2"><img id="foto2" src=""></td>
- <td id="cl3"><img id="foto3" src=""></td>
- </tr>
- </table>-->
- </div>
- <div id="botaoDiv">
- <!--<input type="button" name="Jogar" value="Jogar" id="jogar" class="off" onclick="jogar();">-->
- </div>
- <h3 id="cliques" style="text-align: center;">Número de cliques: 0</h3>
- <table id="cro">
- <tr>
- <td><h1 id="h">00</h1></td>
- <td><h1 id="m">:00</h1></td>
- <td><h1 id="s">:00</h1></td>
- <td><h1 id="c">:00</h1></td>
- </tr>
- </table>
- <script type="text/javascript" src="f5js.js"></script>
- </body>
- </html>
- -----------------------------
- var lol=0;
- var ola=0;
- var p=0;
- var t=0;
- var myTime;
- var c=0;
- var s=0;
- var m=0;
- var h=0;
- var cliques=0;
- var c1=c2=c3=c4=c5=c6=c7=c8=c9=0;
- var nivel=0;
- function updated(element){
- var idx=element.selectedIndex;
- var val=element.options[idx].value;
- var content=element.options[idx].innerHTML;
- if (val==1){
- rn=1;
- cn=3;
- nivel=1;
- }
- else if (val==2){
- rn=2;
- cn=3;
- nivel=2;
- }
- else if (val==3){
- rn=3;
- cn=3;
- nivel=3;
- }
- }
- $(document).ready(function(){
- $("button").click(function(){
- cliques=0;
- parar();
- h=00;
- m=00;
- s=00;
- c=00;
- t=0;
- ola=0;
- var number_of_rows=rn;
- var number_of_cols=cn;
- var butao='<input type="button" name="Jogar" value="Jogar" id="jogar" class="off" onclick="jogar();">';
- var table_body = '<table id="imagens">';
- for(var i=1;i<=number_of_rows;i++){
- table_body+='<tr>'
- for(var j=1;j<=number_of_cols;j++){
- ola++;
- table_body += '<td id="cl'+ola+'" >';
- table_body += '<img id="foto'+ola+'" src="">';
- table_body += '</td>';
- }
- table_body += '</tr>';
- }
- table_body += '</table>';
- $('.content').html(table_body);
- $('#botaoDiv').html(butao);
- });
- });
- function jogar(){
- if(t==0){
- iniciar();
- t=1;
- }
- cliques++;
- document.getElementById("cliques").innerHTML="Número de cliques: " + cliques;
- if (nivel==2){
- for(var i=1;i<=6;i++){
- lol = Math.floor((Math.random() * 6) + 1);
- if (i==1){
- c1=lol;
- }
- else if (i==2){
- c2=lol;
- }
- else if (i==3){
- c3=lol;
- }
- else if (i==4){
- c4=lol;
- }
- else if (i==5){
- c5=lol;
- }
- else if (i==6){
- c6=lol;
- }
- if(lol==1){
- document.getElementById("foto"+i).src="Imagens/gatos1.jfif";
- }
- else if (lol == 2){
- document.getElementById("foto"+i).src="Imagens/gatos2.jpg";
- }
- else if (lol == 3){
- document.getElementById("foto"+i).src="Imagens/gatos3.jpg";
- }
- else if (lol == 4){
- document.getElementById("foto"+i).src="Imagens/gatos4.jpg";
- }
- else if (lol == 5){
- document.getElementById("foto"+i).src="Imagens/gatos5.jpg";
- }
- else if (lol == 6){
- document.getElementById("foto"+i).src="Imagens/gatos6.jpg";
- }
- }
- if ((c1==c2) && (c2==c3) && (c3==c4) && (c4==c5) && (c5==c6)){
- alert("Ganhou!");
- cliques=0;
- parar();
- h=00;
- m=00;
- s=00;
- c=00;
- t=0;
- }
- }
- else if (nivel==1){
- for(var i=1;i<=3;i++){
- lol = Math.floor((Math.random() * 4) + 1);
- if (i==1){
- c1=lol;
- }
- else if (i==2){
- c2=lol;
- }
- else if (i==3){
- c3=lol;
- }
- if(lol==1){
- document.getElementById("foto"+i).src="Imagens/gatos1.jfif";
- }
- else if (lol == 2){
- document.getElementById("foto"+i).src="Imagens/gatos2.jpg";
- }
- else if (lol == 3){
- document.getElementById("foto"+i).src="Imagens/gatos3.jpg";
- }
- else if (lol == 4){
- document.getElementById("foto"+i).src="Imagens/gatos4.jpg";
- }
- }
- if ((c1==c2) && (c2==c3)){
- alert("Ganhou!");
- cliques=0;
- parar();
- h=00;
- m=00;
- s=00;
- c=00;
- t=0;
- }
- }
- else if (nivel==3){
- for(var i=1;i<=9;i++){
- lol = Math.floor((Math.random() * 9) + 1);
- if (i==1){
- c1=lol;
- }
- else if (i==2){
- c2=lol;
- }
- else if (i==3){
- c3=lol;
- }
- else if (i==4){
- c4=lol;
- }
- else if (i==5){
- c5=lol;
- }
- else if (i==6){
- c6=lol;
- }
- else if (i==7){
- c7=lol;
- }
- else if (i==8){
- c8=lol;
- }
- else if (i==9){
- c9=lol;
- }
- if(lol==1){
- document.getElementById("foto"+i).src="Imagens/gatos1.jfif";
- }
- else if (lol == 2){
- document.getElementById("foto"+i).src="Imagens/gatos2.jpg";
- }
- else if (lol == 3){
- document.getElementById("foto"+i).src="Imagens/gatos3.jpg";
- }
- else if (lol == 4){
- document.getElementById("foto"+i).src="Imagens/gatos4.jpg";
- }
- else if (lol == 5){
- document.getElementById("foto"+i).src="Imagens/gatos5.jpg";
- }
- else if (lol == 6){
- document.getElementById("foto"+i).src="Imagens/gatos6.jpg";
- }
- else if (lol == 7){
- document.getElementById("foto"+i).src="Imagens/gatos7.jpg";
- }
- else if (lol == 8){
- document.getElementById("foto"+i).src="Imagens/gatos8.jpg";
- }
- else if (lol == 9){
- document.getElementById("foto"+i).src="Imagens/gatos9.jpg";
- }
- }
- if ((c1==c2) && (c2==c3) && (c3==c4) && (c4==c5) && (c5==c6) && (c6==c7) && (c7==c8) && (c8==c9)){
- alert("Ganhou!");
- cliques=0;
- parar();
- h=00;
- m=00;
- s=00;
- c=00;
- t=0;
- }
- }
- }
- function iniciar(){
- myTime=setInterval(relogio,10);
- }
- function relogio(){
- document.getElementById('c').innerHTML = ":0" + c;
- document.getElementById('s').innerHTML = ":0" + s;
- document.getElementById("m").innerHTML = ":0" + m;
- document.getElementById("h").innerHTML = "0" + h;
- c++;
- if (c>=1 && c<10){
- document.getElementById('c').innerHTML = ":0" + c;
- }
- if (c>=10 && c<100){
- document.getElementById('c').innerHTML = ':' + c;
- }
- if (c>=100 && c<1000){
- s++;
- c=0;
- document.getElementById('s').innerHTML = ":0" + s;
- }
- if (s>=10){
- document.getElementById("s").innerHTML = ":" + s;
- }
- if (s==60){
- s=0;
- m++;
- document.getElementById("m").innerHTML = ":0" + m;
- }
- if (m>=10 && m<60){
- document.getElementById("m").innerHTML = ":" + m;
- }
- if (m==60){
- m=0;
- h++;
- document.getElementById("h").innerHTML = "0" + h;
- }
- if (h>=10 && h<24){
- document.getElementById("h").innerHTML = h;
- }
- if (h==24){
- h=0;
- }
- }
- function parar(){
- clearInterval(myTime);
- }
- ---------------------------
- #teclaf5{
- margin-top: 20px;
- margin-left: 45%;
- width: 100px;
- height: 100px;
- }
- #appearance-select{
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- background: url(http://www.webcis.com.br/images/imagens-noticias/select/ico-seta-appearance.gif) no-repeat #eeeeee;
- background-position: 168px center;
- width: 200px;
- height:30px;
- border:1px solid #ddd;
- padding: 5px;
- font-size: 20px;
- }
- .select-items {
- position: absolute;
- background-color: blue;
- top: 100%;
- }
- #GP{
- width: 150px;
- height: 50px;
- margin-top: 20px;
- margin-left: 47%;
- }
- .botao{
- padding-left: 50px;
- padding-right: 50px;
- padding-top: 20px;
- padding-bottom: 20px;
- border-radius: 15px;
- box-shadow: 2px 2px 3px;
- font-size: 20px;
- }
- #cro{
- margin: auto;
- text-align: center;
- border-collapse: collapse;
- font-size: 30px;
- font-family: "Arial";
- }
- #imagens{
- margin: auto;
- margin-top: 100px;
- margin-bottom: 25px;
- border-collapse: collapse;
- }
- #cl1, #cl2, #cl3, #cl4, #cl5, #cl6, #cl7, #cl8, #cl9{
- padding: 10px;
- width: 250px;
- height: 255px;
- border: 2px solid black;
- background-color: grey;
- text-align: center;
- }
- #jogar{
- padding: 30px;
- font-size: 30px;
- color: black;
- background-color: white;
- border-radius: 10px;
- border: 2px solid black;
- margin-left: 46%;
- transition-duration: 0.6s;
- }
- #jogar:hover{
- color: white;
- background-color: black;
- }
- body {
- background-color: orange;
- }
- #imagens{width: 45%; text-align: center;}
- #imagens thead{background: black; font-weight: bold; color:#fff;}
- #imagens tbody tr:nth-child(2n){background: #ccc;}
- #imagens th, #imagens td{padding: 7px 0;}
- @media screen and (max-width: 750px){
- .content{width: 94%;}
- #imagens thead{display: none;}
- #imagens tbody td{display: flex; flex-direction: column;}
- }
- @media only screen and (min-width: 1200px){
- .content{width:100%;}
- #imagens tbody tr td:nth-child(1){width:32%;}
- #imagens tbody tr td:nth-child(2){width:32%;}
- #imagens tbody tr td:nth-child(3){width:32%;}
- #imagens tbody tr td:nth-child(4){width:32%;}
- #imagens tbody tr td:nth-child(5){width:32%;}
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement