آموزش طراحی سایت (HTML CSS Javascript) | آتریا

رویداد elapsedTime

مثال (رویداد elapsedTime)

برگرداندن تعداد ثانیه هایی که یک انیمیشن پخش شده است:

var x = document.getElementById("myDIV");
x.addEventListener("animationiteration", myRepeatFunction);

function myRepeatFunction(event) {
this.innerHTML = "Elapsed time: " + event.elapsedTime;
}

خودتان امتحان کنید »

تعریف و کاربرد

خصوصیت elapsedTime، هنگام روی دادن یک رویداد انیمیشن، تعداد ثانیه هایی که یک انیمیشن پخش شده است را برمی گرداند.

نکته: در صورتی که انیمیشن در حالت توقف(pause) قرار گیرد، مقدار برگشتی تحت تاثیر قرار نخواهد گرفت( با استفاده از خصوصیت سی اس اس animation-delay).

نکته: این خصوصیت برای رویداد animationstart همیشه مقدار 0 را برمی گرداند.

این خصوصیت "فقط خواندنی" می باشد.

پشتیبانی مرورگرها

اعداد داخل جدول زیر نشان دهنده ی اولین ورژن مرورگری است که به طور کامل از این رویداد پشتیبانی می کند.

متد
elapsedTime	بله	10.0	6.0	بله	بله

نحوه استفاده

event.elapsedTime

جزئیات تکنیکی

مقدار برگشتی	یک عدد که تعداد ثانیه هایی که یک انیمیشن پخش شده است را مشخص می کند

آموزش های مرتبط

مرجع مدل DOM در اچ تی ام ال The animationstart Event

مرجع مدل DOM در اچ تی ام ال The animationiteration Event

مرجع مدل DOM در اچ تی ام ال The animationend Event

مرجع مدل DOM در اچ تی ام ال AnimationEvent animationName Property

CSS reference: CSS3 animation Property

CSS reference: CSS3 animation-duration Property

مرجع کلیه رویدادهای JavaScript

: نوشته شده توسط احسان عباسی; بازدید: 4772

برای درج دیدگاه، ابتدا باید وارد بیاموز شوید.

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

مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی