سورس کد گردونه شانس برای نمایش کد تخفیف
گردونه شانس، ابزاری جذاب و سرگرم‌کننده است که به طور گسترده‌ای در وب‌سایت‌ها و برنامه‌های بازاریابی برای جذب مشتریان استفاده می‌شود. این ابزار می‌تواند به عنوان یک روش تعاملی برای ارائه کدهای تخفیف به کاربران عمل کند. حالا بیایید به بررسی جزئیات سورس کد گردونه شانس بپردازیم.
اجزای اصلی سورس کد
- HTML:
```html
<div id="wheel">
<div class="slice" data-discount="10%">10% تخفیف</div>
<div class="slice" data-discount="20%">20% تخفیف</div>
<div class="slice" data-discount="30%">30% تخفیف</div>
</div>
<button id="spin">چرخش</button>
<div id="result"></div>
```
- CSS:
```css
#wheel {
border: 10px solid #ccc;
border-radius: 50%;
width: 300px;
height: 300px;
position: relative;
overflow: hidden;
}
```
- JavaScript:
```javascript
document.getElementById('spin').addEventListener('click', function() {
let randomDeg = Math.floor(Math.random() * 360 + 720);
document.getElementById('wheel').style.transform = `rotate(${randomDeg}deg)`;
setTimeout(function() {
let selectedSlice = document.querySelector('.slice');
let discount = selectedSlice.getAttribute('data-discount');
document.getElementById('result').innerText = `شما ${discount} تخفیف برنده شدید!`;
}, 3000);
});
```
نکات مهم
- تجربه کاربری: طراحی گردونه باید جذاب و کاربرپسند باشد. انیمیشن‌ها و جلوه‌های بصری تاثیر زیادی بر تجربه کاربر دارند.
- سازگاری با موبایل: اطمینان حاصل کنید که طراحی گردونه در دستگاه‌های مختلف به خوبی نمایش داده شود.
- تحلیل داده‌ها: می‌توانید با استفاده از ابزارهای تحلیلی، رفتار کاربران را بررسی کنید و بهینه‌سازی‌های لازم را انجام دهید.
به طور کلی، سورس کد گردونه شانس می‌تواند به بهبود تعاملات و افزایش فروش کمک کند. با استفاده از تکنیک‌های مناسب، می‌توانید تجربه‌ای لذت‌بخش برای کاربران خود ایجاد کنید.
