Analog clock using CSS3. Digital clock in CSS3 and jQuery How to add clock to html

A simple digital clock that will output the time of your system. Everything here is done in JavaScript, so you can edit them in design. Installing them is as easy as they are, you can put them up the site where you can see them mostly. Plus, as mentioned, you can make them as you need, it all depends on ID - #time where the HTML Codes Panel works, but more details.

This is their main script:

200? "200px": "" + (this.scrollHeight + 5) + "px"); "\u003e 00:00:00

At the very top we see:

200? "200px": "" + (this.scrollHeight + 5) + "px"); "\u003e 00:00:00

Just add bold text and yellow tint and arrows.

200? "200px": "" + (this.scrollHeight + 5) + "px"); "\u003e « 00:00:00»

And this is what happened:

So you yourself see how everything has changed, and now you yourself can do everything and beautifully set it to fit your styles. That others cannot be done, because there is Flash, that they are not here.

Now in addition to the clock on Flash

200? "200px": "" + (this.scrollHeight + 5) + "px"); "\u003e

So you can choose which ones you like best and put, because some can be installed in the block, but the first ones you like more, since they are flexible and customizable, which everyone can do.

This is a simple script that shows the 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 do not need a simple clock, but more complex ones, then check out the Flash clock for the site. Where does the script get the time data from? The time shown is exactly the one that is set on the device.

Installation

Paste the following code wherever you want to see the clock on the site. On uCoz, this can be, for example, "Top" or "Bottom of the site":

200? "200px": "" + (this.scrollHeight + 5) + "px"); "\u003e
00:00:00

The script will immediately show in the place where you installed it, a line of text with a clock. For instance, "00:00:00"... Seconds, minutes and hours, by the way, are always two-digit, so the change of values \u200b\u200bis smooth.

We've already covered creating an analog clock using CSS and JavaScript. In this tutorial, we'll make the same clock using CSS3 to see how the new standard changes the way we design different effects. The demo for this tutorial will only work in browsers that support the CSS3 property rotate(demo DOES NOT WORK in IE6).

CSS3 Transform: rotate

Transform: rotate - a new CSS 3 property that allows you to rotate various elements. With the help of transformations, you can also change the scale of elements, introduce distortions horizontally and vertically, and move elements around the web page. All of this can be animated using the property transition(with different types of transitions and duration).

The same steps for animating page elements can be performed using some JavaScript library (for example, jQuery). Of course, jQuery can animate a lot more CSS properties to change than with transition... But jQuery is a built-in CSS tool, JavaScript libraries are external tools that may not be available. In any case, CSS3 opens up new promising directions for developer development.

Graphics

First you need to create a graphical interface for the clock. We will have a base and three arrows. All moving parts are sliced \u200b\u200bin Photoshop to 600px high and 30px wide, and positioned vertically, and by default the property rotate rotates the element around the center. Can use property transform-origin in order to set the center of rotation to a different point.

Any image can be used for the base of the clock. The moving parts are PNG images with transparency.

The demo source code archive includes a PSD file that contains all the images.

HTML markup

The markup for the clock is a simple unordered list. Each list item contains a moving part and has a corresponding id:

CSS

#clock (position: relative; width: 600px; height: 600px; margin: 20px auto 0 auto; background: url (clockface.jpg); list-style: none;) #sec, #min, #hour (position: absolute ; width: 30px; height: 600px; top: 0px; left: 285px;) #sec (background: url (sechand.png); z-index: 3;) #min (background: url (minhand.png); z -index: 2;) #hour (background: url (hourhand.png); z-index: 1;)

CSS is also pretty simple. Since the moving parts have the same size and starting point, we can declare them together to avoid repetition. Element ul gets relative positioning, which allows absolute positioning for the arrows within it.

CSS3 will be applied with a little jQuery code.

JavaScript

1. We get time for hours
2. Calculate and insert CSS styles (rotation angle) for each element.
3. Update CSS styles at regular intervals.

It should be noted that jQuery works great with the new CSS3 properties. Also, since styles are added dynamically, the CSS file is validated as CSS2.1!

We get time

Time can also be obtained using PHP code, but this will be the server time. And JavaScript returns the user's local time.

We will receive information using Date () and set all our variables. We will use accordingly GetSeconds (), GetMinutes () or GetHours () for Date () to set seconds, minutes and hours respectively:

Var seconds \u003d new Date (). GetSeconds ();

In the above line, a number from the range from 0 to 59 will be obtained and assigned to a variable seconds.

Determine the angle

Then you need to calculate the angle of rotation for each arrow. For the second and minute hands, which have 60 positions on the hour circle, we need to divide 360 \u200b\u200bdegrees by 60, which gives us the number 6. That is, each second or minute corresponds to a 6 degree rotation. We will store the calculation result in another variable. For seconds, the code looks like this:

Var sdegree \u003d seconds * 6;

For hours, the calculations will be different. Since we have a dial with 12 positions for the hour hand, each hour corresponds to a rotation angle of 30 degrees (360/12 \u003d 30). But the hour hand must be in intermediate states, that is, it must move with every minute. That is, at 4:30 the hour hand should be halfway between 3 and 4 o'clock. Here's how we do it:

Var hdegree \u003d hours * 30 + (mins / 2);

That is, we add to the angle of rotation by the number of hours also the value of dividing the number of minutes by 2 (which will give us a value in the range from 0.5 to 29.5). Thus, the hour hand will be "turned" by an angle from 0 to 30 degrees (hourly increment).

For instance:

2 hours 40 minutes -\u003e 2 * 30 \u003d 60 degrees and 40/2 \u003d 20 degrees. Total: 80 degrees.

It can be assumed that the clock will show that after 12 noon, since the rotation value will be more than 360 degrees. But everything works fine.

We are now ready to insert the CSS rules.

Setting the style

This is what a CSS3 rule looks like rotate in the stylesheet:

#sec (-webkit-transform: rotate (45deg); -moz-transform: rotate (45deg);)

And this is how the code will be inserted using jQuery:

$ ("# sec"). css (("- moz-transform": "rotate (45deg)", "-webkit-transform": "rotate (45deg)"));

The only problem is to set the resulting angle value in the "sdegree" variable to the syntax instead of 45 degrees. Need to build a string in another variable srotate and replace the second argument entirely. Like this:

Var srotate \u003d "rotate (" + sdegree + "deg)";

And the jQuery code will look like this:

$ ("# sec"). css (("- moz-transform": srotate, "-webkit-transform": srotate));

Putting it all together

The jQuery code would look like this:

$ (document) .ready (function () (setInterval (function () (var seconds \u003d new Date (). getSeconds (); var sdegree \u003d seconds * 6; var srotate \u003d "rotate (" + sdegree + "deg)" ; $ ("# sec"). css (("- moz-transform": srotate, "-webkit-transform": srotate));), 1000); setInterval (function () (var hours \u003d new Date () .getHours (); var mins \u003d new Date (). getMinutes (); var hdegree \u003d hours * 30 + (mins / 2); var hrotate \u003d "rotate (" + hdegree + "deg)"; $ ("# hour ") .css ((" - moz-transform ": hrotate," -webkit-transform ": hrotate));), 1000); setInterval (function () (var mins \u003d new Date (). getMinutes (); var mdegree \u003d mins * 6; var mrotate \u003d "rotate (" + mdegree + "deg)"; $ ("# min"). css (("- moz-transform": mrotate, "-webkit-transform": mrotate) );), 1000);));

We are using JavaScript function setIntervalto update the styles every second. Variables that receive time values \u200b\u200bmust be updated in it. Otherwise the clock will become useless rubbish on the page.

Conclusion

This lesson demonstrates the practical application of the property rotate not related to design.

Let's make an electronic clock with date and time using jQuery and CSS3 for a little animation.

Html

The markup is simple and flexible. We create DIV with class clock, DIV with class Datewhich will display a date and an unordered list containing hours, minutes and seconds.

CSS

Styles with a little 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;))

Js

We connect jQuery library

And then our script

• new Date () - creates a new object Date with the value of the current date and current time in the computer browser.
• setDate () - the method sets the day of the month (from 1 to 31), according to local time
• getDate () - the 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 fetch seconds, minutes and hours of the current time into the browser.
• (seconds< 10 ? "0" : "") + seconds) - adds a leading zero to the seconds (minutes and hours) value. Symbols ? and : include ternary ( ternary) operator. This is a special operator that returns the value before the colon if the condition before a question (? ) right ( true), or the value after colonif the condition is not true ( false).
• Function setInterval is the standard javascript function, not part jQuery... Executes the code many times, at regular intervals (milliseconds).