شمارش گر!

[dreadful]

سلام دوستان

این را بنگرید :دی
http://codeandcoder.com/Project/index.html

می خوام بدونم اون شمارشگره چطوری ساخته شده ؟
چطوری دایره ای شکل کم و زیاد میشه ؟

نمیخوام کد آماده بدید من!
میخوام بدونم چطوری ساخته شده

ممنون :)

[esmajidmn]

دوست عزیز به لینک زیر یک سری بزنید اموزش نحوه ساخت شمارشگر معکوس رو می ده
http://www.8np.ir/post/ساخت-شمارنده-معکوس

[jalil_gh]

با canvas درست شده.

[esmajidmn]

نه دوست عزیز

[Omid Jackson]

نه دوست عزیز
نه چیه دوست عزیز، درست گفتن دیگه، با کنواس نوشته شده
این کد رو الآن نوشتم که هم شما ببینین چطوریه و هم بقیه استفاده کنن (البته به جز استارتر که کد نخواسته:لبخند:)

var sec = 60;
onload = function time() {
var c = document.getElementById("timer");
var ctx = c.getContext("2d");
var ang = -0.5 + 2 / 60 * sec;

ctx.clearRect( 0, 0, 200, 200 );

ctx.strokeStyle = "#0000FF";
ctx.lineWidth = 15;
ctx.beginPath();
ctx.arc( 100, 100, 90, -0.5 * Math.PI, ang * Math.PI );
ctx.stroke();

ctx.font = "bold 50px Arial";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillStyle = "#0000FF";
ctx.fillText(sec,100,100);

if( sec == 0 ) {
ctx.clearRect( 0, 0, 200, 200 );
ctx.fillText("The End",100,100);
return false;
}

sec--;

setTimeout(function() {
time();
},1000);
}

<canvas id="timer" width="200" height="200"></canvas>

[esmajidmn]

دوست عزیز من لینکی رو که خودم داده بودم گفتم

[dreadful]

نه چیه دوست عزیز، درست گفتن دیگه، با کنواس نوشته شده
این کد رو الآن نوشتم که هم شما ببینین چطوریه و هم بقیه استفاده کنن (البته به جز استارتر که کد نخواسته:لبخند:)

var sec = 60;
onload = function time() {
var c = document.getElementById("timer");
var ctx = c.getContext("2d");
var ang = -0.5 + 2 / 60 * sec;

ctx.clearRect( 0, 0, 200, 200 );

ctx.strokeStyle = "#0000FF";
ctx.lineWidth = 15;
ctx.beginPath();
ctx.arc( 100, 100, 90, -0.5 * Math.PI, ang * Math.PI );
ctx.stroke();

ctx.font = "bold 50px Arial";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillStyle = "#0000FF";
ctx.fillText(sec,100,100);

if( sec == 0 ) {
ctx.clearRect( 0, 0, 200, 200 );
ctx.fillText("The End",100,100);
return false;
}

sec--;

setTimeout(function() {
time();
},1000);
}

<canvas id="timer" width="200" height="200"></canvas>



:لبخند:
مرسي ولي هيچي از كد ها نفهميدم !
يه لينك اموزش دارين ؟!

[Omid Jackson]

:لبخند:
مرسي ولي هيچي از كد ها نفهميدم !
يه لينك اموزش دارين ؟!
ببخشید این چند روز نبودم جواب بدم
لینک آموزش که نه، چون کد ها رو خودم نوشتم الآن توضیح میدم

var sec = 60;
onload = function time() {
var c = document.getElementById("timer");
var ctx = c.getContext("2d");
var ang = -0.5 + 2 / 60 * sec;

ctx.clearRect( 0, 0, 200, 200 );

ctx.strokeStyle = "#0000FF";
ctx.lineWidth = 15;
ctx.beginPath();
ctx.arc( 100, 100, 90, -0.5 * Math.PI, ang * Math.PI );
ctx.stroke();

ctx.font = "bold 50px Arial";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillStyle = "#0000FF";
ctx.fillText(sec,100,100);

if( sec == 0 ) {
ctx.clearRect( 0, 0, 200, 200 );
ctx.fillText("The End",100,100);
return false;
}

sec--;

setTimeout(function() {
time();
},1000);
}

<canvas id="timer" width="200" height="200"></canvas>


خط 34 اومدم تگ کنواس تو html تعریف کردم
خط 1 اومدم متغیر سراسری به اسم sec تعریف کردم به اندازه 60، اگر تو تابع تعریف میکردم چون قراره 60 بار فراخوانی شه مقدار دوباره تعریف میشد
خط 2 تابع تعریف کردم
خط 3 و 4 هم برای پیدا کردن کنواس از روی آیدی و ...
خط 5 فرمول نوشتم که دلیل منفی نیم بخاطر نقطه پایان کمان هست که مراجعه شه به این عکس (http://w3schools.com/tags/img_arc.gif)، نقطه شروع منفی نیم هست که دایره 360 درجه یا 2پی چرخش داره (فرمول های هندسه) 2 بخاطر 2 دور کامل هست که تقسیم بر 60 شده نشون میده هر ثانیه چه مقدار از از دایره باید بچرخه و ضربدر sec میشه که نشون میده چند ثانیه هستش
خط 7 هم اومدم یه مربع به اندازه ارتفاع و پهنای کنواس تعریف کردم هر سری تابع خونده شد پاک کنه کنواس رو، اگر پاک نکنه هر سری روی هم میکشه، برای بهتر متوجه شدن این خط رو پاک کنین تست کنین
خط 9 رنگ کمان و 10 هم قطر کمان
خط 12 مرکز کمان در نقطه 100,100 قرار میگیره، کمانی به شعاع 90 میکشه که از نقطه منفی نیم تا اون مقداری که محاسبه کردیم
خط 15 تا 19 هم که اومدم اون عددی رو که الآن هست رو گفتم وسطش بکشه و اگر ثانیه به 0 رسید متن The End رو بکشه و بیاد بیرون
خط 27 هم از متغیر سراسری sec یکی کم میکنه
خط 29 تا 32 هر ثانیه تابع فوق اجرا میشه (بازگشتی)
به همین راحتی
این هم نمونه آنلاین (http://jsfiddle.net/OmidJackson/6Mh34/) که گذاشتم ببینین