简体   繁体   English

使用Symfony2和Twig的实时时钟Javascript

[英]Live Clock Javascript using Symfony2 and Twig

i've been trying to do a live watch with javascript to be shown in a twig template, the issue is, it doesn't update automatically when the time changes, i don't know if it's my mistake or i'm not using javascript properly and it's possible it's a really dumb mistake or that i'm doing a rookie thing, so my apologies in advance. 我一直在尝试使用javascript进行实时监视,以显示在树枝模板中,问题是,时间变化时它不会自动更新,我不知道这是我的错还是我没有使用javascript正确,这可能是一个非常愚蠢的错误,或者我在做菜鸟,所以提前致歉。

<html>
    <head>
        <meta charset="UTF-8" />
        <title>{% block title %}Sistema de Soporte a Usuarios TiCad{% endblock %}</title>
        {% block stylesheets %}
    <link rel="stylesheet" href="{{ asset ('css/style.css')}}">
        {% endblock %}

        <link rel="shortcut icon" href="{{ asset('favicon.ico') }}" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>  
        <script src="{{asset ('js/jquery.min.js') }}"></script>
    <script src="{{asset ('js/script.js')}}"></script>   
        <script src="{{asset ('http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js')}}"></script>  
    </head>
    <body>
 {% if app.session.hasFlash('notice') %} 
    <div id="flashmessage" class="flash-notice"> 
       {{ app.session.flash('notice') }} 
   </div> 
{% endif %}
 {% if app.session.hasFlash('info') %} 
    <div id="flashmessage" class="flash-notice"> 
       {{ app.session.flash('info') }} 
   </div> 
{% endif %} 
            <div id="top-bar">
                {% block bar %}
                    <div class="page-full-width cf">
            <ul id="nav" class="fl">
                <li class="v-sep"><a class="round button dark menu-user image-left">Ha iniciado sesion como <strong>{{app.user.username}}</strong></a>
                    <ul>
                        <li><a href="{{ path ('MonseUserBundle_User_show', { 'id': app.user.id })}}">Mi Perfil</a></li>
                        <li><a href="{{ path('logout')}}">Salir</a></li>
                    </ul> 
                </li>
                                <li><a class="round button dark clock image-left">
                                     <script type="text/javascript">
var d=new Date();
var dia=new Array(7);
dia[0]="Domingo";
dia[1]="Lunes";
dia[2]="Martes";
dia[3]="Miercoles";
dia[4]="Jueves";
dia[5]="Viernes";
dia[6]="Sabado";
var mm=new Date();
var m2 = mm.getMonth() + 1;
var mesok = (m2 < 10) ? '0' + m2 : m2;
var mesok=new Array(12);
mesok[0]="Enero";
mesok[1]="Febrero";
mesok[2]="Marzo";
mesok[3]="Abril";
mesok[4]="Mayo";
mesok[5]="Junio";
mesok[6]="Julio";
mesok[7]="Agosto";
mesok[8]="Septiembre";
mesok[9]="Octubre";
mesok[10]="Noviembre";
mesok[11]="Diciembre";
var Hours;
var Mins;
var Time;
Hours = d.getHours();
if (Hours >= 12) {
Time = " P.M.";
}
else {
Time = " A.M.";
}
if (Hours > 12) {
Hours -= 12;
}
if (Hours == 0) {
Hours = 12;
}
Mins = d.getMinutes();
if (Mins < 10) {
Mins = "0" + Mins;
}
document.write("" + dia[d.getDay()]+ ", " + d.getDate() + " de " + mesok[mm.getMonth()] +" de "+ d.getFullYear()+ " - "+ Hours + ":" + Mins +" "+Time);
</script>
                                    </a>
                               </li>
            </ul> <!-- end nav -->
                       <li><a href="logout" class="round button dark menu-logoff image-left fr">Salir</a></li>


        </div> <!-- end full-width -->  
                {% endblock bar %}
        </div> <!-- end top-bar -->


        {% block body %}
        {% endblock %}

        {% block javascripts %}
        {% endblock %}
        {% block footer %}
            <div id="footer">
        <p>&copy; Copyright 2013 <a href="http://www.twitter.com/monsefoster">Monse Foster</a>. Todos los derechos reservados.</p>

    </div> <!-- end footer -->
        {% endblock %}
</html>

The script doesn't work because the time is dumped only once whereas it should be dumped every second. 该脚本不起作用,因为时间仅转储一次,而时间应每秒转储一次。 To do it use javascript function setInterval : 为此,请使用javascript函数setInterval

var delay = 1000; // 1000 microseconds equal to 1 second

// setInterval executes passed function every second
setInterval(function() {
    // do time calculation and displaying
}, delay);

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM