سلام من با php دوازده عدد پست با ای دی یکسان با استفاده از حلقه , از sql دریافت کردم و نشون دادم تو صفحه
حالا چطور میتونم با جاوا تایم دهی کنم هر 5 ثانیه بک گراند یکیشون بنفش بشه:
12 عدد پست داریم, از 1 شروع بشه تا 12
برای این کار، ابتدا باید عناصری که میخواهید آنها به صورت دورهای تغییر رنگ دهند، با استفاده از 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، این امکان فراهم شده است که ما بتوانیم به صورت دورهای به بررسی همه بپردازیم
نتیجه تست:
واقعا خیلی خیلی خیلی ممنونم از شما که وقت گذاشتین اینهمه.
به طور کامل متوجه شدم ممنونم💙💙💙💙💙
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟