توضیح کد

[yyuser]

سلام خسته نباشید.
این مثال یک تایمر معکوس است که زمان کم میشه تا زمانی که به تاریخ موردنظر برسه ولی من کار تابع MyRacing رو متوجه نمیشم که چطور روز و ساعت و دقیقه و ثانیه را هر بار حساب می کنه؟
لطف کنید در این مورد کلیت این برنامه توضیح بدید.


<div class="container">
<h1>زمان باقی مانده تا شروع مسابقه</h1>
<ul>
<li><span id="days"></span>روز</li>
<li><span id="hours"></span>ساعت</li>
<li><span id="minutes"></span>دقیقه</li>
<li><span id="seconds"></span>ثانیه</li>
</ul>
</div>
<script>

var second = 1000;
var minute = second * 60;
var hour = minute * 60;
var day = hour * 24;

// اون تاریخی که قراره بهش برسیم
let countDown = new Date('Sep 30, 2024 00:00:00').getTime();

function MyRacing() {
let nowDate = new Date().getTime(),
distance = countDown - nowDate;
document.getElementById('days').innerText = Math.floor(distance / (day)),
document.getElementById('hours').innerText = Math.floor((distance % (day)) / (hour)),
document.getElementById('minutes').innerText = Math.floor((distance % (hour)) / (minute)),
document.getElementById('seconds').innerText = Math.floor((distance % (minute)) / second);

// وقتی تاریخ و زمان گذشته بود
if (distance < 0) {
clearInterval(MyTimer);
alert("مسابقه شروع شده است");
}

}

MyTimer = setInterval( MyRacing , 1000);

</script>

[mazoolagh]

سلام و روز خوش
اساس کار اون متد setInterval هست که هر 1000 میلی ثانیه (همون 1 ثانیه) تابع MyRacing رو اجرا میکنه.
این تابع MyRacing هم خیلی ساده با گرفتن زمان فعلی یعنی ()Date و اعمال متد ()getTime روی اون، اختلاف این زمان فعلی تا یک زمان مرجع رو بر حسب میلی ثانیه در متغیر nowDate میریزه.
از قبل هم که همین کار روی زمان انتهایی انجام شده و نتیجه در متغییر countDown ریخته شده، اختلاف اینها در متغییر distance ریخته میشه و مابقی کار هم که که محاسبه اجزای زمان تایمر و ریختن نتایج در المنت های متناظر هست.

پرسش دیگه هم که مطرح کردین مشابه همین هست.

اگر خواستین راهنمایی کنم چجوری در مرورگر همین کدها رو خط به خط اجرا کنین و نتیجه اش رو ببینین.

[yyuser]

ممنون از راهنمایی تون .
بله من تمام مواردی که فرمودید رو متوجه شدم فقط میخوام بدونم این قسمت ها بر چه اساسی به دست میاد؟ یعنی یه چیز ثابتیه؟ چرا اینطوری محاسبه میشه؟



document.getElementById('days').innerText = Math.floor(distance / (day)),
document.getElementById('hours').innerText = Math.floor((distance % (day)) / (hour)),
document.getElementById('minutes').innerText = Math.floor((distance % (hour)) / (minute)),
document.getElementById('seconds').innerText = Math.floor((distance % (minute)) / second);


و راهنمایی که فرمودید با همون debbuger منظورتون هست؟

[yyuser]

و همینطور تو سوال قبلی تمام قسمت ها رو متوجه میشم فقط میخوام بدونم محاسبه ی ساعت و دقیقه و ثانیه بر چه اساسی اینطوری حساب میشه؟ تو این برنامه در ابتدا تمامی مقادیر صفره و با شروع تایمر از ثانیه شروع میشه به زیاد شدن بعد دقیقه و بعد هم ساعت به ترتیب زیاد میشن ولی خوب این قسمت ها رو متوجه نمیشم.




var hour = Math.floor(totalSeconds / 3600);

var minute = Math.floor((totalSeconds - hour * 3600) / 60);
var seconds = totalSeconds - (hour * 3600 + minute * 60);

[mazoolagh]

فقط میخوام بدونم این قسمت ها بر چه اساسی به دست میاد؟ یعنی یه چیز ثابتیه؟ چرا اینطوری محاسبه میشه؟



document.getElementById('days').innerText = Math.floor(distance / (day)),
document.getElementById('hours').innerText = Math.floor((distance % (day)) / (hour)),
document.getElementById('minutes').innerText = Math.floor((distance % (hour)) / (minute)),
document.getElementById('seconds').innerText = Math.floor((distance % (minute)) / second);



مقادیر countdown و nowdate هر دو اختلاف این زمانها رو با یک تاریخ مرجع و بر حسب میلی ثانیه میده.
این تاریخ مرجع در اینجا برای ما مهم نیست چون ما به اختلاف این دو کار داریم (همون distance) بنابراین خودکار حذف میشه.

چون distance بر حسب هزارم ثانیه هست، مقدار متغییر second رو 1000 گذاشته و به همین ترتیب از روی اون مقادیر هر دقیقه و ... محاسبه شده.
اول، بزرگترین بخش زمان که روز هست باید محاسبه بشه:
Math.floor(distance / (day)

این تابع math.floor یکی از توابع ریاضی برای گرد کردن هست (بیشتر از یک تابع داریم) که بهتره مستنداتش رو بخونین:
https://www.w3schools.com/jsref/jsref_floor.asp

اپراتور % هم باقیمانده تقسیم صحیح رو برمیگردونه:
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_oper_modequal

بخشهای دیگه زمان هم بر همین مبنا یکی یکی از بزرگ به کوچک محاسبه شده.
کد زیر هم همون نتیجه رو میده ولی شاید ساده تر باشه روش کار:
DAYS = Math.floor(distance / day);
distance -= DAYS * day ;
HOURS = Math.floor(distance / hour);
distance -= HOURS * hour ;
MINUTES = Math.floor(distance / minute);
distance -= MINUTES * minute ;
SECONDS = Math.floor(distance / second);


document.getElementById('days').innerText = DAYS ;
document.getElementById('hours').innerText = HOURS ;
document.getElementById('minutes').innerText = MINUTES ;
document.getElementById('seconds').innerText = SECONDS ;

[mazoolagh]

همون debbuger منظورتون هست؟
بله ، همون دیباگر و کنسول که از ابزارهای developer mode هستن.

[mazoolagh]

فقط میخوام بدونم محاسبه ی ساعت و دقیقه و ثانیه بر چه اساسی اینطوری حساب میشه؟
توضیحات پست قبل شامل این هم میشه.

[yyuser]

عذر میخوام برای اینکه بخوام ازdebugger استفاده کنم باید این کلمه کلیدی رو ابتدای کدهای جاوااسکریپ بذارم درسته؟ و بعد کدوم کلید رو باید میزدی که هر مرحله اجرا بشه؟ قبلا انجام دادم ولی الان کامل خاطرم نیست. و یه سوال برام پیش امده توابع که در رویدادها اتفاق میفته رو چطور دیباگ کنم؟
اگه امکانش هست لطف کنید در رابطه با دیباگ کردن یه توضیحی بدید.
ممنون

[mazoolagh]

برای استفاده از دیباگر نیازی نیست در کدهای صفحه هیچ تغییری بدین.

کافیه F12 رو در مرورگر بزنین تا محیط developer باز بشه:
چندین بخش داره مثل inspect - console - debugger و ...
در inspect موس رو روی هر بخش کد html ببرین اون رو در خود صفحه هایلایت میکنه
در console میتونین هر کدی رو بنویسین و نتیجه اش رو درجا ببینین (میتونه بیشتر از یک خط هم باشه مثل یک تابع کامل)
در debugger اول از pane دست چپ بخشی از کد که قرار دیباگ کنین نتخاب میکنین تا در pane راست اون رو نشون بده ؛ حالا روی هر خط کد که کلیک کنین روش breakpoint میذاره که در زمان اجرا روی این خط متوقف میشه و میتونین چیزای مختلف رو مقدارش رو کنترل کنین.

این بصورت خیلی ساده بود چون یک ابزار واقعا پیچیده است و تسلط کامل بهش پیدا کردن زمانبر هست و لازمه اش هم تسلط به تکنولوژی های html/javascript/css و dom و framework ها و ... است.
باید ویدئو های آموزشی ببینین یا کلاس برین - خارج از حوصله اینجاست - ولی در همین حد ابتدایی هم که گفتم خیلی کمک احوال هست.