Shulou(Shulou.com)06/01 Report--

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

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);

}

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.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.