Autor Tema: Crear una cuenta regresiva con JavaScript y mostrar un Alert con imagen al final  (Leído 6901 veces)

Kratos13

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 5
    • Ver Perfil
Hola buenos días mi duda es la siguiente tengo una pantalla en la cual el usuario puede dibujar utilizando canvas, lo tengo con temporizador pero lo que quiero esque cuando termine la cuenta regresiva salte un aviso de que se acabó su tiempo, como un tipo alert pero usando una imagen.

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Impresionismo</title>
<link rel="stylesheet" type="text/css" href="css/Style.css">
<script type="text/javascript" src="js/reloaded.js"></script>
    <script src="js/modernizr.custom.34982.js"></script>
    <script src="js/jquery-1.7.min.js"></script>

    <script src="js/sketcher.js"></script>
    <script src="js/trigonometry.js"></script>

    <script>
    var sketcher = null;
        $(document).ready(function(e) {
            sketcher = new Sketcher( "sketch" );
        });
        function exportImage() {
        window.open(sketcher.toDataURL(),'_blank','width=839,height=785')
        }
    </script>
</head>
<body>
<label id="tiempo"><a style="font-color: #fff;">4:00</a></label>
<div class="pintar_2">

        <input id="borrar-btn" type="button" class="btn error" onclick="sketcher.clear();"></input>

        <input id="exportar-btn" type="button" class="btn error" value="exportar" onclick="exportImage();" />

        <canvas id="sketch" />

    </div>
      <script type="text/javascript">
        var salida = document.getElementById("tiempo"),
        minutos = 4,
        segundos = 0,
        intervalo = setInterval(function(){
            if (--segundos < 0){
                segundos = 59;
                minutos--;
            }
            if (!minutos && !segundos)
                clearInterval(intervalo);
            salida.innerHTML = minutos + ":" + (segundos < 10 ? "0" + segundos : segundos);
            document.getElementById("tiempo").style.color="#fff";
            document.getElementById("tiempo").exportImage();
        }, 1000);
      </script>
</body>
</html>

De antemano les agradesco mucho su ayuda.
« Última modificación: 15 de Julio 2015, 19:50 por César Krall »

Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2660
    • Ver Perfil
Re:Alert con imagen
« Respuesta #1 en: 13 de Julio 2015, 18:11 »
Hola, tal y como lo entiendo yo podrías crear un div (o usar un div existente) y cuando termine la cuenta regresiva cambiar el innerhtml del div para que muestre la imagen que quieras.

Referencia general: curso JavaScript http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

Referencia específica innerHTML: http://aprenderaprogramar.com/index.php?option=com_content&view=article&id=818:innerhtml-javascript-modificar-texto-o-html-pej-div-en-tiempo-real-this-acceder-al-nodo-actual-cu01138e&catid=78:tutorial-basico-programador-web-javascript-desde-&Itemid=206

Salu2

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".