JS新手在这里。如何创建一个可以添加或减去计数的进度条？

Question

我需要一点帮助，我是新手，似乎找不到合适的关键字来寻找我问题的答案。

我想在我正在处理的页面顶部添加一个类似的“进度条”like this.我想要一个类似的进度条，但旁边有一个加号和减号按钮。它甚至不必以百分比表示，我只想让它说“你已经读了 30 本书中的 x 本书”，然后是栏，然后是加号和减号按钮，并将其保存在本地存储中。

我该怎么做？谢谢！

Answer 1

我复制了您提供的屏幕截图中的进度条。我在 javascript 代码中提供了注释，应该可以解释正在发生的一切。希望这对您有所帮助！

var current = 0;
const min = 0;
const max = 30;

//This function is taken from: https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API#testing_for_availability
//This is used to check if localStorage is available
function storageAvailable(type) {
    var storage;
    try {
        storage = window[type];
        var x = '__storage_test__';
        storage.setItem(x, x);
        storage.removeItem(x);
        return true;
    }
    catch(e) {
        return e instanceof DOMException && (
            // everything except Firefox
            e.code === 22 ||
            // Firefox
            e.code === 1014 ||
            // test name field too, because code might not be present
            // everything except Firefox
            e.name === 'QuotaExceededError' ||
            // Firefox
            e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
            // acknowledge QuotaExceededError only if there's something already stored
            (storage && storage.length !== 0);
    }
}

//This function should be called each time you update the progress so the display updates as well
function updateProgress()
{
    document.querySelector(".progress-text").innerText = `You have read ${current} out of ${max} books.`; //this sets the text including the variable values
    document.querySelector(".progress-bar").style.width = Math.round((current / max) * 100) + "%"; //this sets the length of the progress-bar to a percentage
    document.querySelector(".progress-percentage").innerText = Math.round((current / max) * 100) + "%"; //this displays the progress as a percentage
}

//this function is called each time the increase button is clicked
function onButtonIncreaseClicked(e)
{
    e.preventDefault(); //prevent the button from doing anything else

    //make sure the current value never goes above the max value
    if (current < max)
        current++;

    //this will set the value in the localStorage as long as it is available and accessible
    if (storageAvailable('localStorage'))
    {
        localStorage.setItem("progress", current); //our "key" is set to contain the value of current
    }

    updateProgress(); //call to update the display
}

//identical to the increase button, only decreases
function onButtonDecreaseClicked(e)
{
    e.preventDefault();

    //prevent us from going below the minimum value
    if (current > min)
        current--;

    if (storageAvailable('localStorage'))
    {
        localStorage.setItem("progress", current);
    }

    updateProgress(); //always call to update the display
}

//this function is to register the button click event handlers. This makes clicking the buttons work. You should only call this once per page load.
function registerHandlers()
{
    document.querySelector("#btnIncrease").addEventListener("click", onButtonIncreaseClicked);
    document.querySelector("#btnDecrease").addEventListener("click", onButtonDecreaseClicked);
}

//this function is to unregister the button click event handlers. This prevents the buttons from working. Just incase.
function unregisterHandlers()
{
    document.querySelector("#btnIncrease").removeEventListener("click", onButtonIncreaseClicked);
    document.querySelector("#btnDecrease").removeEventListener("click", onButtonDecreaseClicked);
}

//This is our setup function. You should call this once per page load.
function setup()
{
    //check if localstorage is available and if there's a valid number in it
    if (storageAvailable('localStorage') && localStorage.getItem("progress") != null && !isNaN(localStorage.getItem("progress")))
    {
        current = parseInt(localStorage.getItem("progress")); //load our stored value

        if (current > max) //make sure the stored value is not above our max value
            current = max;
        else if (current < min) //make sure the stored value is not below our min value
            current = min;
    }

    registerHandlers(); //make clicking buttons work
    updateProgress(); //update the display
}

setup(); //our call to setup everything, should be called once per page load.

.progression
{
    width: 300px;
    text-align: center;
}

p.progress-text
{
    font-weight: bold;
}

.progress-container
{
    display: block;
    background-color: #f4f1ea;
    height: 25px;
}

.progress-bar
{
    background-color: #927f64;
    height: 100%;
    width: 0%;
    transition: width 0.5s;
}

<div class="progression">
    <p class="progress-text">You have read 0 of 30 books.</p>
    <div class="progress-container">
        <div class="progress-bar"></div>
    </div>
    <p class="progress-percentage">0%</p>
    <button id="btnDecrease">-</button>
    <button id="btnIncrease">+</button>
</div>

JS新手在这里。如何创建一个可以添加或减去计数的进度条？

JS Newbie Here. How can I create a progress bar where I can add or subtract a count?

javascript

input

local-storage

progress-bar