Bonjour,
oui avec le plugin htmldisplay
<html>
<head>
<style type="text/css"> html { font-family: 'Open Sans', Arial, sans-serif; } a { text-decoration: none; color: #000; } div.clock { cursor: pointer; width: 100%; text-align: center; } div.clock a { color: #333; font-size: 18px; font-weight: bold; text-decoration: none; } div.clock.small a { } div.clock.medium a { } div.clock.large a { } div.clock a:hover { text-decoration: underline; } div.clock div.date { color: #777; margin: 0 0 10px 0; } div.clock.small div.date { font-size: 1.0em; } div.clock.medium div.date { font-size: 1.25em; } div.clock.large div.date { font-size: 1.5em; } div.clock div.time { font-weight: 200; } div.clock.small div.time { font-size: 1.5em; } div.clock.medium div.time { font-size: 2.25em; } div.clock.large div.time { font-size: 3em; } div.clock div.time span { border-radius: 5px; padding: 1px 4px 3px 4px; color: #fff; /* fallback */ background: #000; /* Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#555), to(#000)); /* Safari 5.1, Chrome 10+ */ background: -webkit-linear-gradient(top, #555, #000); /* Firefox 3.6+ */ background: -moz-linear-gradient(top, #555, #000); /* IE 10 */ background: -ms-linear-gradient(top, #555, #000); /* Opera 11.10+ */ background: -o-linear-gradient(top, #555, #000); } div.clock div.time span:nth-child(3) { color: #333; /* fallback */ background: #ddd; /* Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eee), to(#ccc)); /* Safari 5.1, Chrome 10+ */ background: -webkit-linear-gradient(top, #eee, #ccc); /* Firefox 3.6+ */ background: -moz-linear-gradient(top, #eee, #ccc); /* IE 10 */ background: -ms-linear-gradient(top, #eee, #ccc); /* Opera 11.10+ */ background: -o-linear-gradient(top, #eee, #ccc); } div.clock div.time strong { color: #666; font-weight: 100; font-size: 0.8em; margin-left: 5px; } div.clock.small div.time strong { } div.clock.medium div.time strong { } div.clock.large div.time strong { } </style>
</head>
<body>
<div class="clock large" id="clock"> <div class="date">Jeu, 1. Déc 2022</div> <div class="time"><span class="hour">16</span>:<span class="minute">40</span></div> </div>
<script type="text/javascript"> $(document).ready(function() { $("div#clock").simpleClock(1); }); (function ($) { $.fn.simpleClock = function ( utc_offset ) { var language = "fr"; switch (language) { case "de": var weekdays = ["So.", "Mo.", "Di.", "Mi.", "Do.", "Fr.", "Sa."]; var months = ["Jan.", "Feb.", "Mär.", "Apr.", "Mai", "Juni", "Juli", "Aug.", "Sep.", "Okt.", "Nov.", "Dez."]; break; case "es": var weekdays = ["Dom", "Lun", "Mar", "Mié", "Jue", "Vie", "Sáb"]; var months = ["Ene", "Feb", "Mar", "Abr", "Mayo", "Jun", "Jul", "Ago", "Sept", "Oct", "Nov", "Dic"]; break; case "fr": var weekdays = ["Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam"]; var months = ["Jan", "Fév", "Mars", "Avr", "Mai", "Juin", "Juil", "Août", "Sept", "Oct", "Nov", "Déc"]; break; default: var weekdays = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]; var months = ["Jan", "Feb", "Mar", "Apr", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]; break; } var clock = this; function getTime() { var date = new Date(); var nowUTC = date.getTime() + date.getTimezoneOffset()*60*1000; date.setTime( nowUTC + (utc_offset*60*60*1000) ); var hour = date.getHours(); if ( language == "en" ) { suffix = (hour >= 12)? 'p.m.' : 'a.m.'; hour = (hour > 12)? hour -12 : hour; hour = (hour == '00')? 12 : hour; } return { day: weekdays[date.getDay()], date: date.getDate(), month: months[date.getMonth()], year: date.getFullYear(), hour: appendZero(hour), minute: appendZero(date.getMinutes()), second: appendZero(date.getSeconds()) }; } function appendZero(num) { if (num < 10) { return "0" + num; } return num; } function refreshTime(clock_id) { var now = getTime(); clock = $.find('#'+clock_id); $(clock).find('.date').html(now.day + ', ' + now.date + '. ' + now.month + ' ' + now.year); $(clock).find('.time').html("<span class='hour'>" + now.hour + "</span>:<span class='minute'>" + now.minute + "</span>"); if ( typeof(suffix) != "undefined") { $(clock).find('.time').append('<strong>'+ suffix +'</strong>'); } } var clock_id = $(this).attr('id'); refreshTime(clock_id); setInterval( function() { refreshTime(clock_id) }, 1000); }; })(jQuery); </script>
</body>
</html>
qui s’affiche lorsque je passe sur le menu design car j’ai en effet une Iframe pour afficher l’heure.
