css如何實(shí)現(xiàn)時(shí)鐘代碼

這篇文章將為大家詳細(xì)講解有關(guān)css如何實(shí)現(xiàn)時(shí)鐘代碼，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

一。簡(jiǎn)介

Processing.js作者是John Resig，這是繼Jquery之后，他的第二個(gè)力作。

Processing.js提供了教學(xué)可視化的編程語(yǔ)言和運(yùn)行環(huán)境。通過(guò)編寫(xiě)處理程序，教師可以將復(fù)雜的物理，化學(xué)，數(shù)學(xué)原理形象化的展示給學(xué)生。替換為各種曲線(xiàn)圖，波線(xiàn)，粒子，置換分子結(jié)構(gòu)，當(dāng)然在生理衛(wèi)生課上還可以放置一群小蝌蚪在游泳等動(dòng)態(tài)的圖形。

Processing.js是一個(gè)開(kāi)放的編程語(yǔ)言，在不使用Flash或Java小程序的初始化下，可以實(shí)現(xiàn)程序圖像，動(dòng)畫(huà)和交互的應(yīng)用 。Processing.js使用JavaScript繪制形狀的銳利和操作HTML5 canvas元素產(chǎn)生圖像動(dòng)畫(huà)。 Processing.js是輕量，易于了解掌握，并提出一個(gè)理想的工具，可視化的數(shù)據(jù)，創(chuàng)建用戶(hù)界面和開(kāi)發(fā)基于Web的游戲。

二。核心函數(shù)

JavaScript代碼將內(nèi)容復(fù)制到

//全局變量  

int 半徑= 50.0;  

int  X，Y;  

int  nX，nY;  

int 延遲= 16;  

//設(shè)置處理畫(huà)布初始化設(shè)置  

無(wú)效 setup（）{  

  大?。?00，200）;  

  strokeWeight（10）;  

  frameRate（15）;  

  X =寬度/ 2;  

  Y =寬度/ 2;  

  nX = X;  

  nY = Y;   

}  

// Main draw loop主要繪畫(huà)函數(shù)功能  

無(wú)效 draw（）{  

  半徑=半徑+ sin（frameCount / 4）;  

  //追蹤圈子到新目的地  

  X + =（nX-X）/延遲;  

  Y + =（nY-Y）/延遲;  

  //將畫(huà)布填充為灰色  

  背景（100）;  

  //將填充顏色設(shè)置為藍(lán)色  

  填充（0，121，184）;  

  //將筆觸顏色設(shè)置為白色  

  筆畫(huà)（255）;  

  //畫(huà)圓  

  橢圓（X，Y，radius，radius）;                   

}  

//設(shè)置圈子的下一個(gè)目的地當(dāng)用戶(hù)鼠標(biāo)在Canvas移動(dòng)時(shí)產(chǎn)生的動(dòng)作  

void  mouseMoved（）{  

  nX = mouseX;  

  nY = mouseY;   

}  

三。世界最短的時(shí)鐘代碼誕生

JavaScript代碼將內(nèi)容復(fù)制到

無(wú)效 draw（）{  

size（200，200）; background（0）; 填充（80）; noStroke（）; 橢圓（100，100，160，160）; 筆畫(huà)（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）;  

}  

可以看得出，代碼語(yǔ)意化非常強(qiáng)，一個(gè)圓，三條線(xiàn)，這也是這個(gè)框架所要達(dá)到的目的之一。

四。完整代碼

XML / HTML代碼將內(nèi)容復(fù)制到文本

01  

<！DOCTYPE html >  

< html >  

<頭>  

<身體>  

<腳本src = “ http://files.cnblogs.com/iamzhanglei/processing.js”類(lèi)型= “文本/ javascript” > </腳本>    

<腳本類(lèi)型= “應(yīng)用程序/處理” >   

無(wú)效draw（）{  

size（200，200）; background（0）; 填充（80）; noStroke（）; 橢圓（100，100，160，160）; 筆畫(huà)（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，請(qǐng)使用谷歌，IE9或者火狐瀏覽器&middot;&middot; </ canvas >  

</ body >  

</ html >  

關(guān)于“css如何實(shí)現(xiàn)時(shí)鐘代碼”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。