Ограничение максимального количества для счетчика ⇐ CSS

[Anonymous]

Может ли кто -нибудь дать какие -либо советы? Мне нужно ограничить количество, к которому получает этот счетчик? Например - я бы никогда не продал 15 продукта на своем рынке. В идеале этот лимит будет 3/4 и останется на этом до тех пор, пока день не будет выполнена для любого клиента, просмотра его.
Это для использования на веб -сайте Shopify, чтобы показать социальные доказательства продаж. Я просто не хочу, чтобы это было нереалистично, так как продажа 15 предметов высокой стоимости маловероятно.

Код: Выделить всё

[img]https://cdn.shopify.com/s/files/1/0550/4460/4040/files/Flame_GIF_2.gif[/img]

1Sold Today




.onhow-sales-container {
display: flex;
align-items: center;
background: linear-gradient(135deg, #fff5f5 0%, #fef2f2 100%);
border: 1px solid #fecaca;
border-radius: 19px;
padding: 2px 10px;
max-width: 400px;
width: 100%;
box-shadow: 0 4px 6px rgba(239, 68, 68, 0.1);
transition: all 0.3s ease;
}

.onhow-sales-container:hover {
background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
box-shadow: 0 6px 10px rgba(239, 68, 68, 0.15);
transform: translateY(-2px);
}

.onhow-fire-wrapper {
display: flex;
align-items: center;
margin-left: 5px;
margin-right: 12px;
}

.onhow-fire-gif {
width: 34px;
height: 34px;
object-fit: contain;
}

{% comment %}

{% endcomment %}

.onhow-sales-text {
font-size: 15px;
color: #dc2626;
line-height: normal;
font-family: var(--font-body-family);
font-weight: 500;
display: flex;
align-items: center;
}

.onhow-sales-number {
font-size: 130%;
font-weight: 700;
line-height: 1;
display: inline-flex;
align-items: center;
color: #b91c1c;
}

.onhow-spacer {
display: inline-block;
width: 0.5em;
}



document.addEventListener('DOMContentLoaded', function() {
const baseNumber = 1;
const storageKey = 'onhowSalesCounter';
const counterElement = document.getElementById('salesCounter');

function getTodayKey() {
return new Date().toDateString();
}

function initializeSalesCounter() {
const stored = localStorage.getItem(storageKey);
const today = getTodayKey();

if (!stored) {
const data = {
date: today,
currentValue: baseNumber,
lastUpdate: Date.now()
};
localStorage.setItem(storageKey, JSON.stringify(data));
return baseNumber;
}

const data = JSON.parse(stored);

// Reset if new day
if (data.date !== today) {
const newData = {
date: today,
currentValue: baseNumber,
lastUpdate: Date.now()
};
localStorage.setItem(storageKey, JSON.stringify(newData));
return baseNumber;
}

return data.currentValue;
}

function incrementCounter() {
const stored = localStorage.getItem(storageKey);
if (!stored) return;

const data = JSON.parse(stored);
const today = getTodayKey();

if (data.date === today) {
data.currentValue += 1;
data.lastUpdate = Date.now();
localStorage.setItem(storageKey, JSON.stringify(data));
}
}

function updateSalesDisplay() {
const currentSales = initializeSalesCounter();
if (counterElement) {
counterElement.textContent = currentSales;
}
}

updateSalesDisplay();

setInterval(() => {
incrementCounter();
updateSalesDisplay();
}, 60000);
});

n/a

Подробнее здесь: https://stackoverflow.com/questions/797 ... or-counter