This is their main script:
200?"200px":""+(this.scrollHeight+5)+"px");"> 00:00:00
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 here's what happened:
So you can see for yourself how everything has changed, and now you can do everything yourself and beautifully set it to suit your styles. What others can't do, since there goes Flash, that they're not here.
Now in addition hours on Flash
200?"200px":""+(this.scrollHeight+5)+"px");">
So you can choose which ones you like best and put them in, 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.
We have already discussed the creation of an analogue clock with using CSS and JavaScript. In this tutorial, we will make the same clock using CSS3 to see how new standard changes the approach to the development of various effects. The demo for this tutorial will only work in browsers that support the CSS3 property rotate(in IE6 the demo DOES NOT WORK).
CSS3 Transform:rotate
Transform:rotate- new CSS 3 property that allows rotation various elements. With the help of transformations, you can also change the scale of elements, introduce horizontal and vertical distortions, and move elements around the web page. All this can be animated using the property transition(With different types transitions and duration).
The same actions for animating page elements can be performed using some JavaScript libraries(e.g. jQuery). Of course with jQuery you can animate the change of much more CSS properties than with transition. But jQuery is inline CSS tool, JavaScript libraries are external tools that may or may not be available. In any case, CSS3 opens up new promising directions for developer development.
Graphic arts
First you need to do GUI for hours. We will have a base and three arrows. All moving parts are sliced in Photoshop to be 600px high and 30px wide, and positioned vertically, and the default property is rotate rotates the element around the center. You can use the property transform-origin to set the center of rotation to another point.
Any image can be used to base the clock. Moving parts are images PNG format with transparency.
To archive with source code demos included PSD file, which contains all images.
HTML markup
The clock markup is a simple unordered list. Each list element 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; )
The CSS is also quite simple. Since the moving parts have the same dimensions and starting points, we can declare them together to avoid repetition. Element ul gets relative positioning, which allows you to use absolute positioning for the arrows located in it.
CSS3 will be applied with a little jQuery code.
JavaScript
- Getting clock time
- Calculate and insert css styles(angle of rotation) for each element.
- 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!
Getting time
You can get time from using PHP code, but it will be server time. And JavaScript returns the user's local time.
We will receive information through Date() and set all our variables. We will use accordingly GetSeconds(), GetMinutes() or GetHours() for Date() to set the seconds, minutes and hours respectively:
var seconds = 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 degrees by 60, which will give us the number 6. That is, each second or minute corresponds to a rotation of 6 degrees. We will store the result of calculations in another variable. For seconds, the code looks like this:
Varsdegree = 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=30). But the hour hand must also be in intermediate states, that is, it must move every minute. That is, at 4:30 the hour hand should be halfway between 3 and 4 o'clock. Here's how we'll do it:
Varhdegree = hours * 30 + (mins / 2);
That is, we add to the rotation angle 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 (hour increment).
For example:
2 hours 40 minutes -> 2*30 = 60 degrees and 40/2 = 20 degrees. Total: 80 degrees.
It can be assumed that the clock will show after 12, since the rotation value will be more than 360 degrees. But everything works great.
We are now all set to insert the CSS rules.
Setting the Style
This is what a CSS3 rule looks like rotate in style sheet:
#sec ( -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); )
And here 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 completely replace the second argument. Like this:
Var srotate = "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 will look like this:
$(document).ready(function() ( setInterval(function() ( var seconds = new Date().getSeconds(); var sdegree = seconds * 6; var srotate = "rotate(" + sdegree + "deg)" ; $("#sec").css(("-moz-transform" : srotate, "-webkit-transform" : srotate)); ), 1000); setInterval(function() ( var hours = new Date() .getHours(); var mins = new Date().getMinutes(); var hdegree = hours * 30 + (mins / 2); var hrotate = "rotate(" + hdegree + "deg)"; $("#hour ").css(("-moz-transform" : hrotate, "-webkit-transform" : hrotate)); ), 1000); setInterval(function() ( var mins = new Date().getMinutes(); var mdegree = mins * 6; var mrotate = "rotate(" + mdegree + "deg)"; $("#min").css(("-moz-transform" : mrotate, "-webkit-transform" : mrotate) ); ), 1000); ));
We use JavaScript function setInterval to update styles every second. Variables that receive time values must be updated in it. Otherwise, the clock will become useless garbage on the page.
Conclusion
This lesson demonstrates practical use properties rotate unrelated to design.
Let's do Digital Watch 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 Date, which will display the 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 meaning current date and the current time in the computer's browser.
- setDate()- the method sets the day of the month (from 1 to 31), 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 retrieve the seconds, minutes and hours of the current time in the browser.
- (seconds< 10 ? "0" : "") + seconds) - adds a leading zero to the value of seconds (minutes and hours). Symbols ? and : include ternary ( ternary) operator. This is a special operator that returns the value before the colon if the condition before question (? ) right ( true), or value after colons if the condition is false ( false).
- Function setInterval- is standard javascript function, not part jQuery. Executes the code many times, at regular intervals (milliseconds).
This is a simple script that shows the system time in JavaScript in plain text. Hours, minutes and seconds separated by a colon - and that's it.
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 font for the clock, its color and size. If you need not a simple clock, but more complex ones, then look at the Flash clock for the site. Where does the script get the time data from? The time displayed is exactly the one set on the device.
Installation
Paste the following code in 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
The script will immediately show in the place where you installed it, a line of text with a clock. For example, "00:00:00". Seconds, minutes and hours, by the way, are always double digits, so changing values is smooth.