none
Creando layout con Timer en retroceso, reloj y demas... RRS feed

  • Pregunta

  • Tengo un dilema, estoy realizando un proyecto en el cual debo incluir una imagen del lado izquierdo superior y a su lado un reloj que marque el tiempo en formato (mm:ss) y en la parte central debo tener un Timer en retroceso, el detalle es que no e podido acomodar el timer para que quede justo debajo de la imagen y el reloj, quiero saber de que manera debería acomodarlo y como puedo implementar css o bien de que manera centrarlo .

    <%@ Page Language="C#" %>

    <!DOCTYPE html>
    <script language="javascript">
        var second = 15;
        var minute = 10;
        var sMinute = "";
        var sSecond = "";

        setInterval(function () {
            document.getElementById("timer").innerHTML = minute + ":" + second;
            /*funcion if mas else para utilisar 09 depues de 10 min y 10 segundos */
            if (minute < 10) {
                sMinute = "0" + minute;
            }
            else {
                sMinute = minute;
            }

            if (second < 10) {
                sSecond = "0" + second;
            }
            else {
                sSecond = second;
            }

            document.getElementById("timer").innerHTML = sMinute + ":" + sSecond;
            second--;


            if (second == 00) {
                minute--;
                second = 60;
            }
            if (minute == 00 && second == 1) {
                document.getElementById("timer").innerHTML = "00:00";
            }
            if (minute <= -1) {
                document.getElementById("timer").innerHTML = " ";
            }
            else {
                minute == 0
                "00:00"
            }
        }, 1000);


    </script>

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Break_Timer</title>
        <%-- <link rel="stylesheet" href="css/style.css"/>--%>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <img alt="" src="Img/B1.png" style="height: 184px; width: 952px" id="ImaB1" />
                <iframe src="Reloj.aspx" name="SubHtml" scrolling="auto" frameborder="1" style="height: 98px; width: 272px"></iframe>
            </div>

            <%--<asp:Content runat="server" id ="timer" ContentPlaceHolderID="HeadContent">
                 <link href="css/style.css" rel="stylesheet" />
             </asp:Content>   --%>
            <div>
                <h1 id="timer" style="padding-bottom: 400px; font-size: 300px; text-align: center; color: #21368c; height: 1px;"></h1>
            </div>
        </form>
    </body>
    </html>

    viernes, 29 de julio de 2016 1:32

Respuestas

  • hola

    para ubicar controles de forma correcta deberias implementar framework como ser bootstrap

    con este no necesitas css especial, sino que usarias el sistema de Grid para unicar los controles en la view

    2.2. Tipos de rejillas

    de esta forma puedes ubicar controles y que estos se adapten a los diferentes tamaños de pantalla

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina

    • Marcado como respuesta AlejandroAzpy viernes, 29 de julio de 2016 14:24
    viernes, 29 de julio de 2016 1:50