Synchronize CSS3 clock with time. Hand clock using CSS3
This is a simple script that shows system time in JavaScript in plain text. Hours, minutes and seconds separated by a colon - that's all.
In order to set your own style for the clock, it is enough to define the style for the block with ID - #time. In CSS you can set your own font for the clock, its color and size. If you need not a simple clock, but a more complex one, then look at Flash clocks for the site. Where does the script get the time data from? The time shown is exactly that set on the device.
InstallationPaste following code to the place on the site where you want to see the clock. On uCoz this could be, for example, “Top” or “Bottom of the site”:
200?"200px":""+(this.scrollHeight+5)+"px");">
00:00:00
setInterval(function () (
date = new Date(),
h = date.getHours(),
m = date.getMinutes(),
s = date.getSeconds(),
h = (h< 10) ? "0" + h: h,
m = (m< 10) ? "0" + m: m,
s = (s< 10) ? "0" + s: s,
document.getElementById("time").innerHTML = h + ":" + m + ":" + s;
}, 1000);
The script will immediately show a line of text with a clock in the place where you installed it. For example, "00:00:00". Seconds, minutes and hours, by the way, are always two-digit, so changing values occurs smoothly.
Let's do it Digital Watch with date and time from using jQuery and CSS3 for small animations.
HTMLThe markup is simple and flexible. Create a DIV with a class called clock , a DIV with a class called Date that will display the date, and an unordered list containing the hours, minutes, and seconds.
CSS
Design styles with small animation:
Container (width: 960px; margin: 0 auto; overflow: hidden;) .clock (width:800px; margin:0 auto; padding:30px; border:1px solid #333; color:#fff; ) #Date ( font- family: Arial, Helvetica, sans-serif; font-size:36px; text-align:center; text-shadow:0 0 5px #00c6ff; ) ul ( width:800px; margin:0 auto; padding:0px; list- style:none; text-align:center; ) ul li ( display:inline; font-size:10em; text-align:center; font-family:Arial, Helvetica, sans-serif; text-shadow:0 0 5px # 00c6ff; ) #point ( position:relative; -moz-animation:mymove 1s ease infinite; -webkit-animation:mymove 1s ease infinite; padding-left:10px; padding-right:10px; ) @-webkit-keyframes mymove ( 0% (opacity:1.0; text-shadow:0 0 20px #00c6ff;) 50% (opacity:0; text-shadow:none; ) 100% (opacity:1.0; text-shadow:0 0 20px #00c6ff; ) ) @-moz-keyframes mymove ( 0% (opacity:1.0; text-shadow:0 0 20px #00c6ff;) 50% (opacity:0; text-shadow:none; ) 100% (opacity:1.0; text-shadow :0 0 20px #00c6ff; ) )
JSConnecting the jQuery library
And then our script $(document).ready(function() ( // Create two variables with the names of months and days of the week in the array var monthNames = [ "January", "February", "March", "April", "May ", "June", "July", "August", "September", "October", "November", "December" ]; var dayNames= ["Sunday", "Monday", "Tuesday", "Wednesday" ,"Thursday","Friday","Saturday"] // Create an object newDate() var newDate = new Date(); // Retrieve the current date from the Date object newDate.setDate(newDate.getDate()); // Output day, date, month and year $("#Date").html(dayNames + " " + newDate.getDate() + " " + monthNames + " " + newDate.getFullYear()); setInterval(function() ( / / Create a newDate() object and retrieve the seconds of the current time var seconds = new Date().getSeconds(); // Add a leading zero to the seconds value $("#sec").html((seconds< 10 ? "0" : "") + seconds); },1000); setInterval(function() { // Создаем объект newDate() и извлекаем минуты текущего времени var minutes = new Date().getMinutes(); // Добавляем начальный ноль к значению минут $("#min").html((minutes < 10 ? "0" : "") + minutes); },1000); setInterval(function() { // Создаем объект newDate() и извлекаем часы из текущего времени var hours = new Date().getHours(); // Добавляем начальный ноль к значению часов $("#hours").html((hours < 10 ? "0" : "") + hours); }, 1000); });
- new Date() - creates a new Date object with the value of the current date and current time in the computer browser.
- setDate() - method sets the day of the month (from 1 to 31), according to local time
- getDate() - method returns the day of the month (from 1 to 31) for the specified date according to local time
- getSeconds(), getMinutes() and getHours() - These methods allow you to retrieve the seconds, minutes and hours of the current time in the browser.
- (seconds< 10 ? "0" : "") + seconds) - добавляет начальный ноль к значению секунд (минут и часов). Символы ? и : включают тернарный (ternary ) оператор. Это специальный оператор, который возвращает значение перед двоеточием, если условие перед вопросом (? ) верно (true ), или значение после двоеточия , если условие неверно (false ).
- The setInterval function is a standard JavaScript function, not part of jQuery. Executes the code many times, at regular intervals (milliseconds).
This is their main script:
200?"200px":""+(this.scrollHeight+5)+"px");">00:00:00
setInterval(function () (
date = new Date(),
h = date.getHours(),
m = date.getMinutes(),
s = date.getSeconds(),
h = (h< 10) ? "0" + h: h,
m = (m< 10) ? "0" + m: m,
s = (s< 10) ? "0" + s: s,
document.getElementById("time").innerHTML = h + ":" + m + ":" + s;
}, 1000);
At the very top we see:
200?"200px":""+(this.scrollHeight+5)+"px");">00:00:00
Just add thumbnail and yellow tint and arrows.
200?"200px":""+(this.scrollHeight+5)+"px");">"00:00:00"
And this is what happened:
So you can see for yourself how everything has changed, and now you can do everything yourself and beautifully arrange it to suit your styles. That others cannot be done, since Flash is on there, that they are not here.
Now in addition there is a clock on Flash
200?"200px":""+(this.scrollHeight+5)+"px");">
.swf">
So you can choose which ones you like best and install them, because some can be installed in a block, but you like the first ones better, since they are flexible and customizable, which anyone can do.
