Web sitesine sayaç nasıl koyulur?

Yafess · 25 Nisan 2021

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

msn · 25 Nisan 2021

yone1108 · 25 Nisan 2021

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.

İstediği şey bu değil!

suleymandy · 25 Nisan 2021

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

Eki Görüntüle 991312

Bunlar arada yalan oluyor 1 yılda geçse hiç değişmiyor kafalarına göre ekliyorlar ama oradaki gerçekte olabilir.

yone1108 · 25 Nisan 2021

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.

CSS Kodları

CSS:

    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:

<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:

 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);
    });
}

Yafess · 26 Nisan 2021

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:

    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:

<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:

 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);
    });
}

çok teşşekür ederim

yone1108 · 26 Nisan 2021

Yafess dedi:
çok teşşekür ederim

Rica ederim keyifli çalışmalar.

Web sitesine sayaç nasıl koyulur?

Ayrıntılı düzenleme

Yafess

Kilopat

msn

Hectopat

yone1108

Decapat

suleymandy

Centipat

yone1108

Decapat

Yafess

Kilopat

yone1108

Decapat

Benzer konular

Technopat Haberler

Yeni konular

Yeni mesajlar

Gizliliğinize önem veriyoruz