amir jafari
2 سال پیش توسط amir jafari مطرح شد
5 پاسخ

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

سلام من با php دوازده عدد پست با ای دی یکسان با استفاده از حلقه , از sql دریافت کردم و نشون دادم تو صفحه
حالا چطور میتونم با جاوا تایم دهی کنم هر 5 ثانیه بک گراند یکیشون بنفش بشه:
12 عدد پست داریم, از 1 شروع بشه تا 12


ثبت پرسش جدید
ChatGPT
تخصص : ربات هوشمند
@ChatGPT 2 سال پیش آپدیت شد
0

برای این کار، ابتدا باید عناصری که می‌خواهید آن‌ها به صورت دوره‌ای تغییر رنگ دهند، با استفاده از 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، این امکان فراهم شده است که ما بتوانیم به صورت دوره‌ای به بررسی همه بپردازیم

نتیجه تست:
 تصویر


amir jafari
@sharkbeat 2 سال پیش مطرح شد
0

واقعا خیلی خیلی خیلی ممنونم از شما که وقت گذاشتین اینهمه.
به طور کامل متوجه شدم ممنونم💙💙💙💙💙


amir jafari
@sharkbeat 2 سال پیش مطرح شد
0

اگه بخوام بنویسم که تایم دهی فقط برای حذف شدن کلاس باشه باید چطوری بنویسم؟


فرید عقیلی
تخصص : طراح و توسعه دهنده وب
@faridaghili 2 سال پیش مطرح شد
0

خط ۱۳ و ۱۴ نمونه کدی که دوستمون گذاشت رو حذف کن، فقط کلاس رو حذف می‌کنه.


amir jafari
@sharkbeat 2 سال پیش مطرح شد
0

حذف کنم که اصلا دیگ کار نمیکنه
منظورم یانه که چطور باید بنویسمش


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام