最近在學習html5,雖然這個出來已經很久了,但自己比較懶,一直沒動心思去學。趁年末有時間,研究了下,發現確實比較好用,以前難以實現的功能,用新的技術簡單就可以做出來,於是動手寫了個模擬時鐘,**比較簡單,權當練手吧。
js部分:
var clock = function(circle,canvas);
clock.prototype.drawclock = function()
var g = this.canvas.getcontext('2d');
var that = this;
var draw = function();
requestanimationframe(draw);
};clock.prototype.drawcenter = function(g,circle);
clock.prototype.drawtext = function(g);
clock.prototype.drawshortline = function(g,circle)
g.moveto(circle.x+circle.r*math.sin(30*i*math.pi/180),circle.y-circle.r*math.cos(30*i*math.pi/180));
g.lineto(circle.x+(circle.r-10)*math.sin(30*i*math.pi/180),circle.y-(circle.r-10)*math.cos(30*i*math.pi/180));
g.stroke();
} g.linewidth = 1;
for(var i=1;i<60;i++)
g.moveto(circle.x+circle.r*math.sin(6*i*math.pi/180),circle.y-circle.r*math.cos(6*i*math.pi/180));
g.lineto(circle.x+(circle.r-6)*math.sin(6*i*math.pi/180),circle.y-(circle.r-6)*math.cos(6*i*math.pi/180));
g.stroke();
}};clock.prototype.drawhandler = function(g,circle,hourlength,minlength,seclength,date)
var second = date.getseconds();
var minute = date.getminutes();
//draw minute hand
g.beginpath();
g.linewidth = 3;
g.moveto(circle.x+minlength*4/5*math.sin((minute*6+second/10)*math.pi/180),circle.y-minlength*4/5*math.cos((minute*6+second/10)*math.pi/180));
g.lineto(circle.x+minlength/5*math.sin((minute*6+second/10+180)*math.pi/180),circle.y-minlength/5*math.cos((minute*6+second/10+180)*math.pi/180));
g.stroke();
g.beginpath();
//draw hour hand
g.linewidth = 5;
g.moveto(circle.x+hourlength*4/5*math.sin((hour*30+minute/2)*math.pi/180),circle.y-hourlength*4/5*math.cos((hour*30+minute/2)*math.pi/180));
g.lineto(circle.x+hourlength/5*math.sin((hour*30+minute/2+180)*math.pi/180),circle.y-hourlength/5*math.cos((hour*30+minute/2+180)*math.pi/180));
g.stroke();
//draw second hand
g.beginpath();
g.strokestyle = 'red';
g.linewidth = 1;
g.moveto(circle.x+seclength*4/5*math.sin(second*6*math.pi/180),circle.y-seclength*4/5*math.cos(second*6*math.pi/180));
g.lineto(circle.x+seclength/5*math.sin((second*6+180)*math.pi/180),circle.y-seclength/5*math.cos((second*6+180)*math.pi/180));
g.stroke();
};
html:
效果: 練習題 時鐘模擬
6 12 時鐘模擬 30分 乙個time類,資料成員有時 分 秒。要求模擬秒錶,每次走一秒,滿60秒進製,秒又從零開始計數。滿60分進製,分又從零開始計數。輸出時 分和秒的值。使用過載 運算子實現 class mytime 請在這裡填寫答案 int main mytime operator frie...
Qt 模擬時鐘
qt中有乙個模擬時鐘的例題,其主要實現的功能只有時針和分針,以及時鐘的那些刻度線。博主在其基礎上多增加了秒針,以及數字的顯示。同時,對其中小部分進行修改。本例題主要是了解和練習使用qtimer類。本例題屬於還是比較簡單的,量也是很少。具體的 和解釋可以檢視git 基本知識點都有注釋 中的analog...
時鐘模擬 繼承)
定義計數器類,包含保護資料成員value,公有函式increment計數加1。定義迴圈計算器繼承計數器類,增加私有資料成員 最小值min value,max value,重寫公有函式increment,使得value在min value max value區間內迴圈 1。因為基類 計數器類 中的vi...