Jump to content
Gleyson Abreu

Confirmar se visualizou a imagem

Recommended Posts

Queria saber se a alguma maneira de confirmar que  a pessoa visualizou determinada imagem, por exemplo tenho um slideshow automático que exibi as imagens que tem um id x quero pegar esse id x é enviar pro meu banco de dados há alguma forma de fazer isso?

Tava fuçando no w3schools e encontrei um slideshow automatico o seguinte codigo:

var myIndex = 0;
carousel();
function carousel() {
    var i;
    var x = document.getElementsByClassName("mySlides");
    for (i = 0; i < x.length; i++) {
       x[i].style.display = "none";
    }
    myIndex++;
    if (myIndex > x.length) {myIndex = 1}    
    x[myIndex-1].style.display = "block";
    setTimeout(carousel, 1000); // Change image every 2 seconds
}

Queria saber se teria como eu pegar o id da imagem do slideshow que está sendo exibida na tela para enviar para o banco de dados.. já tentei de várias formas adaptar esse código mas não conseguir.

Se houver outra forma de fazer isso que expliquei da um help aqui

[]'s

Share this post


Link to post
Share on other sites

Dar sim, pois se cada elemento de seletor class mySlides possuir um id você pode obter esse valor logo assim:

x[myIndex-1].style.display = "block";
var identificador = x[myIndex-1].id; // Esse seria o ID do atual .mySlides

 

Nesse caso então para enviar para um salvamento em banco de dados, você pode optar por executar um ajax requisitando o arquivo que vai fazer o registro no banco informando esse valor

objeto_HttpRequest.open('GET', 'arquivo_que_salva.php?valor=' + identificador, true);

Nesse caso tem que criar a estrutura do protocolo pois só informei como fazer o envio. Pois o "arquivo_que_salva.php" sempre vai receber $_GET['valor']; que é o id passado pela função javascript

 

Só que desaconselho isso... Porque?

 Na sua função você tem:

setTimeout(carousel, 1000);

Ao qual a cada 1 segundo ele troca de imagem, então a cada 1 segundo será uma query executada, agora imagine se 1.000 pessoas estiverem acessando. Isso são 1000 querys por segundo (coitado do seu servidor), sem contar que alguém pode abrir o inspetor e alterar o javascript para setTimeout(carousel, 1); executando uma query a cada 1ms

 

Mas sei lá, se fosse para eu fazer iria tentar da forma que falei.

Share this post


Link to post
Share on other sites

Bacana. Só puxando o gancho, não teria como "proteger" a edição do time usando POO? tipo, criar uma função com atributo private e criar um método getter que retorna o valor desse atributo privado. Sou iniciante e estava estudando isso, fiquei com a dúvida.

 

 

Bacana. Só puxando o gancho, não teria como "proteger" a edição do time usando POO? tipo, criar uma função com atributo private e criar um método getter que retorna o valor desse atributo privado. Sou iniciante e estava estudando isso, fiquei com a dúvida.

 

 

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 Minatos™
      Olá pessoal, tudo bom? recentemente eu comecei a aprender programação com JS, eu já conseguir usar o
      .checkboxes em exercício que o professor passou, entretanto, quando fui criar outros exercícios pra treinar, pra conseguir realmente aprender, ao usar o mesmo método que o professor utilizar, o meu código não funciona.
       
      Basicamente, eu quero saber quando o usuário clicar em uma opção, e em seguida fazer uma ação, o meu código abaixo é de uma pergunta com resposta, basicamente quero saber qual resposta o usuário clicou e dependendo de qual, queria informar uma mensagem na <div></div>
       
      HTML: 
      <!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Modelo de exercício</title> <link rel="stylesheet" href="estilo.css"> </head> <body> <header> <h1>Pergunta do Milhão</h1> </header> <section> <div id="div1"> <center><p>O que é um sistema ERP?</p></center> <p><input type="radio" name="per1" id="alt1" > <label for="alt1">É um sistema de informação que integra todos os dados e processos de uma organização em um único sistema.</label></p> <p><input type="radio" name="per1" id="alt2"> <label for="alt2">É uma instituição internacional sem fins lucrativos que associa profissionais de gestão de projetos.</label></p> <p><input type="radio" name="per1" id="alt3"> <label for="alt3"> é um conjunto de práticas na gestão de projetos organizado pelo instituto PMI e é considerado a base do conhecimento sobre gestão de projetos por profissionais da área.</label></p> <p><input type="radio" name="per1" id="alt4" checked > <label for="alt4">NDA</label></p> <center><input type="button" value="Verificar" onclick="verificar()"></center> </div> <div id="res"> Testando... </div> </section> <footer> <p>&copy; Alexsander Fontes</p> </footer> <script src="script.js"></script> </body> </html> JS:
      function verificar() { var pergunta = document.getElementById('per1') var res = document.getElementById('res') if (pergunta[0].checked) { res.innerHTML = `Testando manipulação'` } else if (pergunta[1].checked) { res.innerHTML = `Testando manipulação 1` } else if (pergunta[2].checked) { res.innerHTML = `Testando manipulação 2` } else if (pergunta[3].checked) { res.innerHTML = `Testando manipulação 3` } } E então, se eu usar:
      res.innerHTML = `Testando manipulação`  fora do IF, funciona normal, se eu por na condição, o código para. :/
    • By JoaoBardella
      Bom dia Senhores,
       
      Pessoal estou iniciando em Js e gostaria de uma mãozinha. Na faculdade o professor pediu para que eu fizesse um gerador de curriculo em HTML com JS.
      Perfeito estou criando, mais enrrosquei em uma parte aqui, temos os campos dos dados pessoais, após tenho os dados de formação, ai que está: Na formação tenho tres inputs criado em HTML para Curso, Instituição e Ano de Conclusão e na frente tenho que ter o botão de mais e menos para inserir e tirar mais inputs contendo o mesmo conteúdo. Tenho um evento em cada input, onkeyup que vai mostrando os dados abaixo. E estou com dificuldade na hora de adicionar esse evento aos input que eu crio automaticamente após criar apertando o botão mais. Alguém pode me ajudar. Vou colocar abaixo meu dois códigos HTML e JS.
       
      HTML
       
      <!DOCTYPE html> <html lang="en">   <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>teste</title> </head>   <body> <form id="dadosP"> <div id="dadosPe"> <label for="nome">Nome:</label> <input type="text" name="nome" id="nome" onkeyup="mostrar()"> <label for="email">E-mail:</label> <input type="text" name="email" id="email" onkeyup="mostrar()"> <label for="end">Endereço Profissional:</label> <input type="text" name="end" id="end" onkeyup="mostrar()"> </div> </form> <br> <form id="dadosEdu"> <div id="dadosEduc"> <label for="curso">Curso:</label> <input type="text" name="curso" id="curso" onkeyup="mostrar()"> <label for="inst">Instituição:</label> <input type="text" name="inst" id="inst" onkeyup="mostrar()"> <label for="anoconclu">Ano Conclusão:</label> <input type="text" name="anoconclu" id="anoconclu" onkeyup="mostrar()"> <button type="button" onclick="maiscurso()">+</button> <button type="button" onclick="menoscurso()">-</button> </div>   </form> <br><br> <div id="mdadosp"> <div id="mnome"> <span id="pmnome"></span><br> <span id="pmemail"></span><br> <span id="pmend"></span> </div> </div> <br><br> <div id="mdadosedu"> <div id="mcurso"> <span id="pmcurso"></span><br> <span id="pminst"></span><br> <span id="pmanoconclu"></span> </div> </div> <script src="script.js"></script> </body>   </html>   JS   var i = 0;   function mostrar() { var nome = document.getElementById("nome").value; var email = document.getElementById("email").value; var end = document.getElementById("end").value   document.getElementById("pmnome").innerHTML = nome; document.getElementById("pmemail").innerHTML = email; document.getElementById("pmend").innerHTML = end;   if (i > 0) { var curso = document.getElementById("curso" + i).value; var inst = document.getElementById("inst" + i).value; var anoconclu = document.getElementById("anoconclu" + i).value; } else { var curso = document.getElementById("curso").value; var inst = document.getElementById("inst").value; var anoconclu = document.getElementById("anoconclu").value; } document.getElementById("pmcurso").innerHTML = curso; document.getElementById("pminst").innerHTML = inst; document.getElementById("pmanoconclu").innerHTML = anoconclu; } function maiscurso() { i++; var br2 = document.createElement("br"); var br1 = document.createElement("br");   var lbl1 = document.createElement("label"); lbl1.id = "lblcurso" + i; var t = document.createTextNode("Curso: "); lbl1.setAttribute("for", "Curso: "); var inp1 = document.createElement("input"); inp1.id = "curso" + i; inp1.setAttribute("onkeyup", mostrar());   var lbl2 = document.createElement("label"); lbl2.id = "lblinst" + i; var x = document.createTextNode("Instituição: "); lbl2.setAttribute("for", " Instituição: "); var inp2 = document.createElement("input"); inp2.id = "inst" + i; //inp2.addEventListener(onkeyup, mostrar());   var lbl3 = document.createElement("label"); lbl3.id = "lblanoconclu" + i; var z = document.createTextNode("Ano Conclusão: "); lbl3.setAttribute("for", " Ano Conclusão: "); var inp3 = document.createElement("input"); inp3.id = "anoconclu" + i; var br = document.createElement("br"); //inp3.addEventListener(onkeyup, mostrar());   document.getElementById("dadosEduc").appendChild(br2); document.getElementById("dadosEduc").appendChild(br1); document.getElementById("dadosEduc").appendChild(t); document.getElementById("dadosEduc").appendChild(inp1); document.getElementById("dadosEduc").appendChild(x); document.getElementById("dadosEduc").appendChild(inp2); document.getElementById("dadosEduc").appendChild(z); document.getElementById("dadosEduc").appendChild(inp3); document.getElementById("dadosEduc").appendChild(br);     // var newdiv = document.createElement('div'); // newdiv.innerHTML += '<label for="curso">Curso:</label><input onkeyup="mostrar()" type="text" name="curso' + line + '_1" id="curso' + line + '_1">'; // newdiv.innerHTML += '<label for="inst">Instituição:</label><input onkeyup="mostrar()" type="text" name="inst' + line + '_2" id="inst' + line + '_2">'; // newdiv.innerHTML += '<label for="anoconclu">Ano Conclusão:</label><input onkeyup="mostrar()" type="text" name="anoconclu' + line + '_3" id="anoconclu' + line + '_3">'; // document.getElementById("dadosEduc").appendChild(newdiv); // line++; }   //maiscurso('lines');
    • By rapa-013
      Olá!
       
      Estou com uma dúvida em JavaScript que não consigo resolver.
       
      Contexto:
      Em uma página HTML, tenho 10 imagens organizadas, de classe:
      <img class='imagens-q'> e id's de 0 à 9, respectivamente:
      <img class='imagens-q' id='0'> <img class='imagens-q' id='1'> ... <img class='imagens-q' id='9'>  
       
      Objetivo:
      Essas imagens ficam disponíveis para que o usuário escolha (clique) uma ou mais. Minha intenção é justamente obter o id do elemento que o usuário clicar.
       
      Resumindo:
      Como faço para saber o id da imagem na qual o usuário clicou?
       
      OBS: não coloquei nenhum código em JS porque justamente ainda não tenho nenhum código.
    • By peterstefan
      Olá, estou tentando enviar uma imagem do perfil em jquery para o php para cadastrar no banco.. Quando tento enviar via http ele vai certinho, mais queria sem dar refresh na pagina.... 
      Tenho que fazer alguma coisa no jquery para que  possa enviar o nome da imagem para o php?
       
      Fiz 3 teste de file para receber o nome da imagem e as 3 ta retornando null...


    • By tiagosp
      Estou utilizando a função getUsermedia() para acessar a camera de dispositivos moveis, porém quando solicito que a camera traseira seja aberta, a imagem chega invertida, ou seja, a esquerda vai para a direita e vice-versa.
      <html lang="PT-BR"> <header> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body{ text-align: center; } </style> </header> <body> <video src="" id="video1" muted autoplay></video> <button onclick="IniciarCamera()">Iniciar Camera</button> <script> function IniciarCamera(){ navigator.mediaDevices.getUserMedia({video: {facingMode: 'environment'}, audio: false}) .then((stream)=> { document.getElementById("video1").srcObject = stream }) } function PararCamera(){ document.getElementById("video1") .srcObject .getVideoTracks() .forEach(track=> track.stop()) } </script> </body> </html>  
×

Important Information

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