这篇文章将为大家详细讲解有关css如何实现时钟代码，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
一。简介
Processing.js作者是John Resig，这是继Jquery之后，他的第二个力作。
Processing.js提供了教学可视化的编程语言和运行环境。通过编写处理程序，教师可以将复杂的物理，化学，数学原理形象化的展示给学生。替换为各种曲线图，波线，粒子，置换分子结构，当然在生理卫生课上还可以放置一群小蝌蚪在游泳等动态的图形。
Processing.js是一个开放的编程语言，在不使用Flash或Java小程序的初始化下，可以实现程序图像，动画和交互的应用 。Processing.js使用JavaScript绘制形状的锐利和操作HTML5 canvas元素产生图像动画。 Processing.js是轻量，易于了解掌握，并提出一个理想的工具，可视化的数据，创建用户界面和开发基于Web的游戏。
二。核心函数
JavaScript代码将内容复制到
//全局变量
int 半径= 50.0;
int X，Y;
int nX，nY;
int 延迟= 16;
//设置处理画布初始化设置
无效 setup（）{
大小（200，200）;
strokeWeight（10）;
frameRate（15）;
X =宽度/ 2;
Y =宽度/ 2;
nX = X;
nY = Y;
}
// Main draw loop主要绘画函数功能
无效 draw（）{
半径=半径+ sin（frameCount / 4）;
//追踪圈子到新目的地
X + =（nX-X）/延迟;
Y + =（nY-Y）/延迟;
//将画布填充为灰色
背景（100）;
//将填充颜色设置为蓝色
填充（0，121，184）;
//将笔触颜色设置为白色
笔画（255）;
//画圆
椭圆（X，Y，radius，radius）;
}
//设置圈子的下一个目的地当用户鼠标在Canvas移动时产生的动作
void mouseMoved（）{
nX = mouseX;
nY = mouseY;
}
三。世界最短的时钟代码诞生
JavaScript代码将内容复制到
无效 draw（）{
size（200，200）; background（0）; 填充（80）; noStroke（）; 椭圆（100，100，160，160）; 笔画（255）;
行（100，100，cos（TWO_PI * second（）/ 60- HALF_PI）* 70 + 100，sin（TWO_PI * second（）/ 60- HALF_PI）* 70 + 100）;
行（100，100，cos（TWO_PI * minute（）/ 60- HALF_PI）* 60 + 100，sin（TWO_PI * minute（）/ 60- HALF_PI）* 60 + 100）;
行（100，100，cos（TWO_PI *（hour（）％12）/ 12- HALF_PI）* 50 + 100，sin（TWO_PI *（hour（）％12）/ 12- HALF_PI）* 50 + 100）;
}
可以看得出，代码语意化非常强，一个圆，三条线，这也是这个框架所要达到的目的之一。
四。完整代码
XML / HTML代码将内容复制到文本
01
<！DOCTYPE html >
< html >
<头>
<身体>
<脚本src = “ http://files.cnblogs.com/iamzhanglei/processing.js”类型= “文本/ javascript” > </脚本>
<脚本类型= “应用程序/处理” >
无效draw（）{
size（200，200）; background（0）; 填充（80）; noStroke（）; 椭圆（100，100，160，160）; 笔画（255）;
行（100，100，cos（TWO_PI * second（）/ 60- HALF_PI）* 70 + 100，sin（TWO_PI * second（）/ 60- HALF_PI）* 70 + 100）;
行（100，100，cos（TWO_PI * minute（）/ 60- HALF_PI）* 60 + 100，sin（TWO_PI * minute（）/ 60- HALF_PI）* 60 + 100）;
行（100，100，cos（TWO_PI *（hour（）％12）/ 12- HALF_PI）* 50 + 100，sin（TWO_PI *（hour（）％12）/ 12- HALF_PI）* 50 + 100）;
}
</脚本>
< canvas >你的浏览器不支持HTML5，请使用谷歌，IE9或者火狐浏览器·· </ canvas >
</ body >
</ html >
关于“css如何实现时钟代码”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
