Web sitesine sayaç nasıl koyulur?

msn dedi:

Bu içeriği görüntülemek için üçüncü taraf çerezlerini yerleştirmek için izninize ihtiyacımız olacak.
Daha detaylı bilgi için, çerezler sayfamıza bakınız.

Üçüncü taraf çerezlerini kabul et

Genişletmek için tıkla...

Yafess dedi:

Merhabalar. Web siteme bu şekilde sayaç nasıl koyarım?

Eki Görüntüle 991312

Genişletmek için tıkla...

yone1108 dedi:

Jquery number counter diye araştırma yapabilirsiniz. Sahur yapmam gerekiyor yaptıktan sonra size örnek kod atabilirim.

EDİT:

Örnek bir çalışma buyurun. Kodları test ettim sorunsuz bir şekilde çalışmaktadırlar. Tasarım size kalmış temeli bu şekilde. CSS kodları ile tasarımı geliştirebilir sitenize entegre edebilirsiniz. İyi çalışmalar dilerim.

Eki Görüntüle 991390

CSS Kodları

CSS:Panoya kopyala

    left: 10%;
    height: 1px;
    width: 80%;
    background: rgba(28, 30, 35, 0.44);
}

section#countdown .count-item{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 24px;
    color: rgba(28, 30, 35, 0.7);
    margin: 15px 0;
    transition: all .3s ease, color .4s ease-in;
}

section#countdown .count-item:hover{
    transform: scale(1.25);
    color: #C22429;
}

section#countdown .count-item span{
    font-size: 18px;
    color: rgba(28, 30, 35, 0.44);
}

@media only screen and (max-width: 992px){
    section#countdown h3 + div{
        flex-direction: column;
    }

    section#countdown .count-item{
        transform: scale(1.5);
        margin: 30px 0;
    }
}

HTML Kodları

HTML:Panoya kopyala

<section id="countdown" class="box-p">
    <h3>SAYAÇ</h3>
    <div class="d-flex align-items-center justify-content-around">
        <div class="count-item">
            <strong>47</strong>
            <span>ÜRÜN</span>
        </div>
        <div class="count-item">
            <strong>100</strong>
            <span>BAŞARI</span>
        </div>
        <div class="count-item">
            <strong>200</strong>
            <span>ÖDÜL</span>
        </div>
        <div class="count-item">
            <strong>500</strong>
            <span>PROJE</span>
        </div>
    </div>
</section>

JS Kodları

JavaScript:Panoya kopyala

 var getCountItems = document.querySelectorAll('.count-item');
if(getCountItems){
    getCountItems.forEach(function (countItem) {
        var counterValueElement = countItem.querySelector('strong');
        var storeCurrentValue = parseInt(counterValueElement.textContent);

        var fromZero = 0;

        if(fromZero === 0){
            counterValueElement.textContent = "0";
        }

        setInterval(function () {
            if(++fromZero <= storeCurrentValue){
                counterValueElement.textContent = fromZero.toString();
            }
        }, 15);
    });
}

Genişletmek için tıkla...

Yafess dedi:

çok teşşekür ederim

Genişletmek için tıkla...