اضافه کلاس با تایم دهی در جاوا اسکریپت

برای این کار، ابتدا باید عناصری که می‌خواهید آن‌ها به صورت دوره‌ای تغییر رنگ دهند، با استفاده از CSS، طراحی کنید. سپس با استفاده از JavaScript، زمانبندی رنگ‌ها را تنظیم کنید.

به عنوان مثال، فرض کنید که شما یک div دارید که حاوی 12 post است و هر 5 ثانیه می‌خواهید رنگ پس زمینه یکی از آن‌ها را به بنفش تغییر دهید.

HTML:

<div class="posts">
  <div class="post">Post 1</div>
  <div class="post">Post 2</div>
  <div class="post">Post 3</div>
  <div class="post">Post 4</div>
  <div class="post">Post 5</div>
  <div class="post">Post 6</div>
  <div class="post">Post 7</div>
  <div class="post">Post 8</div>
  <div class="post">Post 9</div>
  <div class="post">Post 10</div>
  <div class="post">Post 11</div>
  <div class="post">Post 12</div>
</div>

CSS:

.post {
  background-color: white;
  padding: 10px;
  margin-bottom: 10px;
}

.post.active {
  background-color: purple;
  color: white;
}

JS:

// پیدا کردن تمام المان‌های post
var posts = document.querySelectorAll('.post');

// شروع با اولین post
var currentPostIndex = 0;

// تغییر رنگ پس زمینه به بنفش برای یک post خاص
function highlightPost() {
  // حذف کلاس active از post قبلی
  posts[currentPostIndex].classList.remove('active');

  // اضافه کردن کلاس active به post بعدی
  currentPostIndex = (currentPostIndex + 1) % posts.length;
  posts[currentPostIndex].classList.add('active');
}

// تابع setInterval برای تنظیم زمانبندی
setInterval(highlightPost, 5000);

در این کد، با استفاده از تابع querySelectorAll، تمام عناصر با کلاس post در div با کلاس posts پیدا شده و در متغیر posts ذخیره شده‌اند. سپس، با استفاده از یک متغیر به نام currentPostIndex، این امکان فراهم شده است که ما بتوانیم به صورت دوره‌ای به بررسی همه بپردازیم

نتیجه تست: