練習之模擬時鐘

2021-06-28 08:18:16 字數 2540 閱讀 5881

最近在學習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...