How to implement clock Code in css
This article will explain in detail how to implement css clock code, Xiaobian think it is quite practical, so share it for everyone to make a reference, I hope you can gain something after reading this article.
One. profile
Processing.js by John Resig, this is his second book after Jquery.
Processing.js provides a programming language and runtime environment for instructional visualization. By programming, teachers can visualize complex physics, chemistry, and math principles for students. Replace it with various graphs, waves, particles, displacement molecular structures, and of course, a group of small tadpoles can be placed in a physiological hygiene class to swim and other dynamic graphics.
Processing.js is an open programming language that enables graphical, animated, and interactive applications without Flash or Java Mini programs initialization. Processing.js uses JavaScript to draw sharp shapes and manipulate HTML5 canvas elements to generate image animation. Processing.js is lightweight, easy to understand, and presents an ideal tool for visualizing data, creating user interfaces, and developing web-based games.
Two. core functions
JavaScript code copies content to
//global variable
int radius = 50.0;
int X，Y;
int nX，nY;
int delay = 16;
//Set processing canvas initialization settings
invalid setup (){
size (200, 200);
strokeWeight（10）;
frameRate（15）;
X = width/ 2;
Y = width/ 2;
nX = X;
nY = Y;
}
// Main draw loop Main drawing function
invalid draw (){
radius = radius + sin (frameCount / 4);
//Track circles to new destinations
X + =(nX-X)/delay;
Y + =(nY-Y)/delay;
//Fill canvas with grey
Background (100);
//Set fill color to blue
Fill (0, 121, 184);
//Set stroke color to white
stroke (255);
//Draw a circle
ellipse (X, Y, radius, radius);
}
//Set the next destination of the circle Action that occurs when the user mouse moves around Canvas
void mouseMoved（）{
nX = mouseX;
nY = mouseY;
}
Three. The world's shortest clock code was born.
JavaScript code copies content to
invalid draw (){
size (200, 200); background (0); fill (80); noStroke (); ellipse (100, 100, 160, 160); stroke (255);
rows (100, 100, cos (TWO_PI * second ()/ 60- HALF_PI)* 70 + 100, sin (TWO_PI * second ()/ 60- HALF_PI)* 70 + 100);
rows (100, 100, cos (TWO_PI * minute ()/ 60- HALF_PI)* 60 + 100, sin (TWO_PI * minute ()/ 60- HALF_PI)* 60 + 100);
Lines (100, 100, cos (TWO_PI *(hour ()%12)/ 12- HALF_PI)* 50 + 100, sin (TWO_PI *(hour ()%12)/ 12- HALF_PI)* 50 + 100);
}
It can be seen that the code is very semantic, one circle, three lines, which is one of the goals of this framework.
IV. complete code
XML / HTML code copies content to text
01
< html >invalid draw (){
size (200, 200); background (0); fill (80); noStroke (); ellipse (100, 100, 160, 160); stroke (255);
rows (100, 100, cos (TWO_PI * second ()/ 60- HALF_PI)* 70 + 100, sin (TWO_PI * second ()/ 60- HALF_PI)* 70 + 100);
rows (100, 100, cos (TWO_PI * minute ()/ 60- HALF_PI)* 60 + 100, sin (TWO_PI * minute ()/ 60- HALF_PI)* 60 + 100);
Lines (100, 100, cos (TWO_PI *(hour ()%12)/ 12- HALF_PI)* 50 + 100, sin (TWO_PI *(hour ()%12)/ 12- HALF_PI)* 50 + 100);
}
< canvas >Your browser does not support HTML5. Please use Google, IE9 or Firefox··
About "css how to achieve clock code" this article is shared here, I hope the above content can be of some help to everyone, so that you can learn more knowledge, if you think the article is good, please share it to let more people see.
