آموزش ساخت تایمر شبیه دیجی کالا

سلام دوستان در این سری از آموزش های برنامه نویسی php به آموزش ساخت تایمر شبیه دیجی کالا می پردازیم این آموزش به خاطر درخواست یکی از کاربران در سایت قرار گرفته است.
ما با استفاده از css , html و js این آموزش را پیش می بریم.
بخش html آن به شکل زیر می شود.

<h1>Countdown Clock</h1>
<div id="clockdiv">
  <div>
    <span class="days"></span>
    <div class="smalltext">Days</div>
  </div>
  <div>
    <span class="hours"></span>
    <div class="smalltext">Hours</div>
  </div>
  <div>
    <span class="minutes"></span>
    <div class="smalltext">Minutes</div>
  </div>
  <div>
    <span class="seconds"></span>
    <div class="smalltext">Seconds</div>
  </div>
</div>

<h1>Countdown Clock</h1>

<div>

</div>

<div>

<div class="smalltext">Hours</div>

</div>

<div>

<div class="smalltext">Minutes</div>

</div>

<div>

<div class="smalltext">Seconds</div>

</div>

فایل css آن به شکل زیر می شود

body{
    text-align: center;
    background: #00ECB9;
  font-family: sans-serif;
  font-weight: 100;
}
h1{
  color: #396;
  font-weight: 100;
  font-size: 40px;
  margin: 40px 0px 20px;
}
#clockdiv{
    font-family: sans-serif;
    color: #fff;
    display: inline-block;
    font-weight: 100;
    text-align: center;
    font-size: 30px;
}
#clockdiv > div{
    padding: 10px;
    border-radius: 3px;
    background: #00BF96;
    display: inline-block;
}
#clockdiv div > span{
    padding: 15px;
    border-radius: 3px;
    background: #00816A;
    display: inline-block;
}
.smalltext{
    padding-top: 5px;
    font-size: 16px;
}

body{

text-align: center;

background: #00ECB9;

font-family: sans-serif;

font-weight: 100;

}

h1{

color: #396;

font-weight: 100;

font-size: 40px;

margin: 40px 0px 20px;

}

#clockdiv{

font-family: sans-serif;

color: #fff;

display: inline-block;

font-weight: 100;

text-align: center;

font-size: 30px;

}

#clockdiv > div{

padding: 10px;

border-radius: 3px;

background: #00BF96;

display: inline-block;

}

#clockdiv div > span{

padding: 15px;

border-radius: 3px;

background: #00816A;

display: inline-block;

}

.smalltext{

padding-top: 5px;

font-size: 16px;

}

و فایل js آن به شکل زیر می شود.

function getTimeRemaining(endtime) {
  var t = Date.parse(endtime) - Date.parse(new Date());
  var seconds = Math.floor((t / 1000) % 60);
  var minutes = Math.floor((t / 1000 / 60) % 60);
  var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
  var days = Math.floor(t / (1000 * 60 * 60 * 24));
  return {
    'total': t,
    'days': days,
    'hours': hours,
    'minutes': minutes,
    'seconds': seconds
  };
}
function initializeClock(id, endtime) {
  var clock = document.getElementById(id);
  var daysSpan = clock.querySelector('.days');
  var hoursSpan = clock.querySelector('.hours');
  var minutesSpan = clock.querySelector('.minutes');
  var secondsSpan = clock.querySelector('.seconds');
  function updateClock() {
    var t = getTimeRemaining(endtime);
    daysSpan.innerHTML = t.days;
    hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
    minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
    secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
    if (t.total <= 0) {
      clearInterval(timeinterval);
    }
  }
  updateClock();
  var timeinterval = setInterval(updateClock, 1000);
}
var deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000);
initializeClock('clockdiv', deadline);

function getTimeRemaining(endtime) {

var t = Date.parse(endtime) - Date.parse(new Date());

var seconds = Math.floor((t / 1000) % 60);

var minutes = Math.floor((t / 1000 / 60) % 60);

var hours = Math.floor((t / (1000 * 60 * 60)) % 24);

var days = Math.floor(t / (1000 * 60 * 60 * 24));

return {

'total': t,

'days': days,

'hours': hours,

'minutes': minutes,

'seconds': seconds

};

}

function initializeClock(id, endtime) {

var clock = document.getElementById(id);

var daysSpan = clock.querySelector('.days');

var hoursSpan = clock.querySelector('.hours');

var minutesSpan = clock.querySelector('.minutes');

var secondsSpan = clock.querySelector('.seconds');

function updateClock() {

var t = getTimeRemaining(endtime);

daysSpan.innerHTML = t.days;

hoursSpan.innerHTML = ('0' + t.hours).slice(-2);

minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);

secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

if (t.total <= 0) {

clearInterval(timeinterval);

}

updateClock();

var timeinterval = setInterval(updateClock, 1000);

}

var deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000);

initializeClock('clockdiv', deadline);

توضیح مباحث مانند js ,css , html خارج از حوصله این مبحث است و برای استفاده از موارد بالا باید حداقلی پیش زمینه ای کم از html , css و js داشته باشید و بخش js محسابات آن است که نیازی به توضیح آن چنانی ندارد.

شکل زیر پیشنمایشی از تایمر می باشد.

این آموزش هم به پایان رسید.
موفق باشید.

مطالعه بیشتر

مطالب مشابه

ادامه مطلب

آموزش Bottom Navigation متریال دیزان در برنامه نویسی اندروید

ادامه مطلب

آموزش انیمیشن ExplosionView در برنامه نویسی اندروید

ادامه مطلب

آموزش ایجاد Widget سفارشی در برنامه نویسی اندروید

ادامه مطلب

آموزش Socket در برنامه نویسی اندروید بخش دوم

ادامه مطلب

آموزش EditText متریال دیزان در برنامه نویسی اندروید

ادامه مطلب

آموزش json در برنامه نویسی اندروید

ادامه مطلب

آموزش ایجاد Shortcut سفارشی در برنامه نویسی اندروید

ادامه مطلب

آموزش به دست آوردن لیست Sensor های فعال در برنامه نویسی اندروید

12 پاسخ به “آموزش ساخت تایمر شبیه دیجی کالا”

Shazam گفت:
تیر 18, 1396 در 8:26 ب.ظ
خیلی عالی . خب این تایمر رو قرار بدین توی اپ اندروید
ممنون میشم
پاسخ
1. محمد حسین جعفری پور مدیر سایت گفت:
  تیر 18, 1396 در 8:57 ب.ظ
  سلام کمی صبر کنید پست آموزشیش رو براتون درست می کنم
  پاسخ
2. محمد حسین جعفری پور مدیر سایت گفت:
  تیر 18, 1396 در 9:30 ب.ظ
  آموزش براتون ایجاد شد از لینک زیر استفاده کنید
  http://programchi.ir/2017/07/09/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d8%b3%d8%a7%d8%ae%d8%aa-%d8%aa%d8%a7%db%8c%d9%85%d8%b1-%d9%85%d8%b9%da%a9%d9%88%d8%b3-%d8%af%d8%b1-%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87-%d9%86%d9%88%db%8c%d8%b3%db%8c/
  پاسخ
  1. Shazam گفت:
    تیر 19, 1396 در 1:56 ق.ظ
    واقعا عالی هستید
    دمتون گرم
    پاسخ
    1. محمد حسین جعفری پور مدیر سایت گفت:
      تیر 19, 1396 در 2:22 ق.ظ
      خواهش می کنم نظر لطف شماست
      پاسخ
امیر حسین گفت:
شهریور 7, 1396 در 5:46 ب.ظ
سلام من نیاز به بک اپلیکیشن اندروید دارم با هدفی تقریبا شبیه به این پست بعلاوه یکسری امکانات اضافی که نمونش رو هیچ جا پیدا نکردم می خوام درخواست کنم شما برام بنویسین هزینشم میدم برای اطلاعات بیشتر یه ایمیل برای من بفرستید
Bghytd@gmail.com
پاسخ
1. محمد حسین جعفری پور مدیر سایت گفت:
  شهریور 7, 1396 در 6:04 ب.ظ
  ایمیل ارسال شد !
  پاسخ
عرفان گفت:
شهریور 16, 1396 در 12:45 ب.ظ
سلام . خوب بود . میشه بگید چطوری باید اعدادش رو فارسی کنیم؟؟؟
اعداد انگلیسی نمی خوایم برای سایتمون
پاسخ
1. محمد حسین جعفری پور مدیر سایت گفت:
  شهریور 16, 1396 در 2:16 ب.ظ
  برای فارسی سازی باید فونت فارسی عدد را لود کنید.
  پاسخ
علی گفت:
تیر 18, 1397 در 12:00 ب.ظ
سلام توی دیجی کالا برای اپ اندروید چجوری اطلاعات تایمر رو از سرور بگیریم؟
پاسخ
1. محمد حسین جعفری پور مدیر سایت گفت:
  تیر 18, 1397 در 12:39 ب.ظ
  سلام باید به شکل json کد رو دریافت کنید که مثلا شامل یک ساعت و ثانیه خاصی است یا اینکه به صورت میلی ثانیه کلش رو دریافت کنید و با یک کدی آن را به ساعت و دقیقه تبدیل کنید.
  پاسخ
اشکان گفت:
آذر 11, 1399 در 12:13 ب.ظ
سلام
این تایمر رو وقتی توی سایت استفاده میکنیم با refresh کردن مرورگر تایمر برمیگرده به حالت اول.
نمیشه واسش یه تاریخ رو مشخص کنیم که با refresh کردن تایمر به حالت اول بر نگرده؟
پاسخ

مطالب مشابه

12 پاسخ به “آموزش ساخت تایمر شبیه دیجی کالا”

دیدگاهتان را بنویسید لغو پاسخ

اشتراک گذاری در شبکه های اجتماعی