php yüzdeli yıldız sistemi
Merhabalar ben yorumlara yıldız sistemi eklettim ve
sistem sorunsuz calısıyor
yıldızlar tam rakamlar 1 2 3 4 ve 5 yarım yıldız sıstemı yok
ben bu yıldızı yüzde almak istiyorum
en fazla yıldız 5
en az yıldız 1
bunu %24 puan gibi göstermek istiyorum
trendyol magaza puanı gibi düşünebilirsiniz
Soru hatalı mı? 👎
Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!
Cevaplar (2)
Şöyle bir örnek hazırladım. İnceleyebilirsiniz:
https://codepen.io/ebykdrms/pen/jOxZbjb
JS kısmında en üstteki objede kaç kullanıcının kaç yıldız verdiğini belirleyebiliyorsunuz.
Önemli olan da js kısmı zaten. Yarın bi'gün codepen'den silinirse diye JS kodunun bir örneğini burada paylaşıyorum:
// Hangi yıldızdan kaç tane almış?
const starCounts = {
star1: 4, // 4 kişi 1 puan vermiş
star2: 0, // Kimse 2 puan vermemiş
star3: 3, // 3 kişi 3 puan vermiş
star4: 28, // 28 kişi 4 puan vermiş
star5: 16 // 16 kişi 5 puan vermiş
};
// Puanları bir dizi şeklinde alalım.
// [4, 0, 3, 28, 16]
const allScores = Object.values(starCounts);
// Toplamda kaç kişi puan vermiş?
// (4+0+3+28+16=51)
const totalSelectorCount = allScores.reduce((sum, num)=>sum+num, 0);
// Herkes 5 puan verseydi kaç puan olurdu?
// (51*5=255)
const maxScore = totalSelectorCount * 5;
// Peki şu an herkesin verdipi puana göre kaç puan olmuş?
// (4*1 + 0*2 + 3*3 + 28*4 + 16*5 = 205)
const currentScore = allScores.reduce((sum,num,index)=>sum+(num*(index+1)), 0);
// 255'te 205 ise 100'de kaçtır? Oran-orantı...
// 205/255 = x/100 -> x = 100 * 205 / 255 -> x = 80.39215... -> ~80
const rate = 100 * currentScore / maxScore;
// Hangi yüzdelik orana girdiğine göre kaç yıldızı aktif edeceğimizi bulalım.
// 100'de rate (80.392...) ise 5'te kaçtır? Oran-orantı... ~4
const activeStar = (5 * rate / 100).toFixed(0);
alert(`Yüzde ${rate.toFixed(2)} puan alarak 5 üzerinden ${activeStar} yıldız aldı`);
<div class="mains">
<div class="mbd-rate" style="width:50%"></div>
<div class="mbd-stars"></div>
</div>
/css/
.mbd-stars{
background:url('https://www.uplooder.net/img/image/28/3643c1020e68e601204c2415ac55d3b6/Frame-4-(3).png');
height:100%;
width:100%;
background-size:100% 100%;
position:absolute;
z-index:2;
}
.mains{
width:310px;
height:60px;
position:relative
}
.mbd-rate{
height:100%;
background : #f1c40f;
position:absolute;
z-index:1;
}