1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

 
<html>
    <head>
        <style>.red {color: red;} .blue {color: blue;} #ora { font-size: 18px; padding: 5px; border: 2px solid gray; }</style>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script type="text/javascript">
        var fOra = function() {
            var time = new Date();
            var hours = (time.getHours()<10?'0':'') + time.getHours();
            var minutes = (time.getMinutes()<10?'0':'') + time.getMinutes();
            var seconds = (time.getSeconds()<10?'0':'') + time.getSeconds();
            $('#ora').html(hours + ':' + minutes + ':' + seconds);
            if (minutes<15) {
                $('#tartalomEgesztolNegyedig').show();
                $('#tartalomNegyedtolEgeszig').hide();
                $('#ora').removeClass('red').addClass('blue');
            } else {
                $('#tartalomEgesztolNegyedig').hide();
                $('#tartalomNegyedtolEgeszig').show();
                $('#ora').removeClass('blue').addClass('red');
            }
        };
        $(document).ready(function() { fOra(); setInterval(function() { fOra(); }, 1000); });
        </script>
    </head>
    <body>
        <span id="ora"></span>
        <span id="tartalomEgesztolNegyedig" class="blue">Szöveg egész és negyed között</span>
        <span id="tartalomNegyedtolEgeszig" class="red">Szöveg negyed és egész között</span>
    </body>
</html>