這篇文章將為大家詳細(xì)講解有關(guān)css如何實(shí)現(xiàn)時(shí)鐘代碼，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。
目前創(chuàng)新互聯(lián)已為成百上千的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)站空間、網(wǎng)站托管、服務(wù)器托管、企業(yè)網(wǎng)站設(shè)計(jì)、新化網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。
一。簡介
Processing.js作者是John Resig，這是繼Jquery之后，他的第二個(gè)力作。
Processing.js提供了教學(xué)可視化的編程語言和運(yùn)行環(huán)境。通過編寫處理程序，教師可以將復(fù)雜的物理，化學(xué)，數(shù)學(xué)原理形象化的展示給學(xué)生。替換為各種曲線圖，波線，粒子，置換分子結(jié)構(gòu)，當(dāng)然在生理衛(wèi)生課上還可以放置一群小蝌蚪在游泳等動(dòng)態(tài)的圖形。
Processing.js是一個(gè)開放的編程語言，在不使用Flash或Java小程序的初始化下，可以實(shí)現(xiàn)程序圖像，動(dòng)畫和交互的應(yīng)用 。Processing.js使用JavaScript繪制形狀的銳利和操作HTML5 canvas元素產(chǎn)生圖像動(dòng)畫。 Processing.js是輕量，易于了解掌握，并提出一個(gè)理想的工具，可視化的數(shù)據(jù)，創(chuàng)建用戶界面和開發(fā)基于Web的游戲。
二。核心函數(shù)
JavaScript代碼將內(nèi)容復(fù)制到
//全局變量
int 半徑= 50.0;
int X，Y;
int nX，nY;
int 延遲= 16;
//設(shè)置處理畫布初始化設(shè)置
無效 setup（）{
大?。?00，200）;
strokeWeight（10）;
frameRate（15）;
X =寬度/ 2;
Y =寬度/ 2;
nX = X;
nY = Y;
}
// Main draw loop主要繪畫函數(shù)功能
無效 draw（）{
半徑=半徑+ sin（frameCount / 4）;
//追蹤圈子到新目的地
X + =（nX-X）/延遲;
Y + =（nY-Y）/延遲;
//將畫布填充為灰色
背景（100）;
//將填充顏色設(shè)置為藍(lán)色
填充（0，121，184）;
//將筆觸顏色設(shè)置為白色
筆畫（255）;
//畫圓
橢圓（X，Y，radius，radius）;
}
//設(shè)置圈子的下一個(gè)目的地當(dāng)用戶鼠標(biāo)在Canvas移動(dòng)時(shí)產(chǎn)生的動(dòng)作
void mouseMoved（）{
nX = mouseX;
nY = mouseY;
}
三。世界最短的時(shí)鐘代碼誕生
JavaScript代碼將內(nèi)容復(fù)制到
無效 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）;
}
可以看得出，代碼語意化非常強(qiáng)，一個(gè)圓，三條線，這也是這個(gè)框架所要達(dá)到的目的之一。
四。完整代碼
XML / HTML代碼將內(nèi)容復(fù)制到文本
01
<！DOCTYPE html >
< html >
<頭>
<身體>
<腳本src = “ http://files.cnblogs.com/iamzhanglei/processing.js”類型= “文本/ javascript” >
<腳本類型= “應(yīng)用程序/處理” >
無效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或者火狐瀏覽器··
關(guān)于“css如何實(shí)現(xiàn)時(shí)鐘代碼”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯(cuò)，請把它分享出去讓更多的人看到。
重慶分公司
重慶分公司
