Live Clock Javascript using Symfony2 and Twig

Live Clock Javascript using Symfony2 and Twig

本文关键字：and Twig Symfony2 using Clock Javascript Live      更新时间：2023-09-26

我一直在尝试使用 JavaScript 进行实时监视以显示在 twig 模板中，问题是，当时间变化时它不会自动更新，我不知道这是我的错误还是我没有正确使用 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>

脚本不起作用，因为时间只转储一次，而应该每秒转储一次。要做到这一点，请使用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);
相关文章：