[英]Progress bar, max and reset on 100%
我正在用SQL連接到XP和MAX XP的進度條上工作。 每次單擊按鈕將獲得1 xp,最大xp為10。我希望當用戶達到100%XP時應將其重置為0%。 並且,如果您對如何使用該“重置”來增加值的想法有所不同,那么在100%重置時,用戶的級別應為當前級別+ 1。
我通過此代碼每次點擊均插入1 xp:
$sql = "UPDATE progression SET xp=(xp + 1) WHERE username='$username' LIMIT 1";
我通過使1 xp =等於此代碼的10%的條形來創建100%xp的條形值:
$percent = intval($resultprogression[0]['xp']*100/$resultprogression[0]['max xp']);
我通過以下代碼在html / css中執行輸出:
<div class="experience-bar-container">
<div id="value" style="width:<?php echo $percent ?>%;"></div>
<h3>XP: <span><?php echo $percent ?>%</span></h3>
</div>
div#value {
display: block;
position: absolute;
z-index: 2;
height: 19%;
background: red;
left: 0;
}
您將不得不使用js。 解決方案:向進度div添加數據屬性以存儲進度值:
<div class="experience-bar-container">
<div id="value" data-value="<?php echo $percent ?>" style="width:<?php echo $percent ?>%;"></div>
<h3>XP: <span id="xpPercent"><?php echo $percent ?>%</span></h3>
<button class="xpButton" id="minus">-</button>
<button class="xpButton" id="plus">+</button>
</div>
然后在使用data-attribute值更新條形寬度的按鈕上添加偵聽器:
var progress = document.getElementById("value");
var xpPercent = document.getElementById("xpPercent");
document.getElementById("minus").addEventListener("click", function() {
var newValue = parseInt(progress.getAttribute('data-value')) - 10;
update(newValue);
});
document.getElementById("plus").addEventListener("click", function() {
var newValue = parseInt(progress.getAttribute('data-value')) + 10;
update(newValue);
});
“更新”功能檢查進度,並在需要時調用重置功能,該功能調用dbupdate功能
function update(newValue) {
progress.style.width = newValue + '%';
progress.setAttribute('data-value', newValue);
xpPercent.innerText = newValue + '%';
if (newValue === 100) {
reset();
}
}:
function reset() {
progress.style.width = '0%';
progress.setAttribute('data-value', 0);
xpPercent.innerText = '0%';
dbUpdate();
}
function dbUpdate() {
// do Ajax stuff to update user's level
}
https://jsfiddle.net/qpg7t603/1/
如果您不打算支持IE10,則應查看一下進度標簽: https : //developer.mozilla.org/en-US/docs/Web/HTML/Element/Progress
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.