我被一個邏輯問題困住了。
我創建了一個應用程式,當用戶在論壇中發表一定數量的帖子時,它會設定一個自動徽章。
我想要做的是用百分比填充徽章的背景,直到獲得下一個徽章。
我的代碼:
if (userPosts >= 5 && userPosts <= 10 ) {
let bgPerc = 'background: -webkit-linear-gradient(left, #efe3af 25%,#ffffff 25%);'
vnode.children.push(
<span className="auto-badge" style={bgPerc}>
<i class={tierOne} />
'First Badge Text'
</span>
);
如您所見,我想以 5 到 10 之間的完成百??分比動態更改背景
我怎樣才能用 javascript 做到這一點?
uj5u.com熱心網友回復:
這是一個線性函式f(userPosts) = (userPosts - lowerBound) / (upperBound - lowerBound),在你的例子中f(userPosts) = (userPosts - 5) / (10 - 5):
const lowerBound = 5;
const upperBound = 10;
if (userPosts >= lowerBound && userPosts <= upperBound ) {
const perc = Math.ceil((userPosts - lowerBound) / (upperBound - lowerBound) * 100);
let bgPerc = `background: -webkit-linear-gradient(left, #efe3af ${perc}%,#ffffff ${perc}%);`
vnode.children.push(
<span className="auto-badge" style={bgPerc}>
<i class={tierOne} />
'First Badge Text'
</span>
);
轉載請註明出處,本文鏈接:https://www.uj5u.com/shujuku/366599.html
標籤:javascript
