css如何實現時鐘代碼

這篇文章將為大家詳細講解有關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或者火狐瀏覽器&middot;&middot; </ canvas >  

</ body >  

</ html >  

關于“css如何實現時鐘代碼”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。