如何让酒吧在 1 秒内跑完？在 html css 和 javascript

Question

I'm working on a progress bar (in Javascript) that cycles through every second and then starts again.我正在研究一个进度条（在 Javascript 中），它每秒循环一次，然后重新开始。

I tried to change value with setInteval() but nothing helped me.我试图用 setInteval() 改变价值，但没有任何帮助。

I hope for help, thanks希望得到帮助，谢谢

here's my code:这是我的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .progress {
            position: relative;
            width: 510px;
            height: 60px;
            background: #9cbab4;
            overflow: hidden;
          
        }
        .progress__fill {
            width: 0%;
            height: 100%;
            background: #009579;
            transition: all 0.1s;
        }

        .progress__text{
            position: absolute;
            top: 50%;
            right: 5px;
            transform: translateY(-50%);
            font: bold 20px 'Quicksand', sans-serif;
            color: #ffffff;
        }
    </style>
</head>
<body>
    <div class="progress">
        <div class="progress__fill"></div>
        <span class="progress__text">0%</span>
    </div>
    <script>
        setInterval(function(){
            value++;
        }, 1000);
        function updateProgressBar(ProgressBar, value){
            ProgressBar.querySelector(".progress__fill").style.width = '${value}%'
            ProgressBar.querySelector(".progress__text").textContent = '${value}%'
        }
    </script>
</body>
</html> ```

Answer 1

I tried reproducing your code by changing the progress , progress__fill , and progress__text into id's and changed the <div class="__" /> into <div id="__" /> :我尝试通过将progress 、 progress__fill和progress__text更改为 id 并将<div class="__" />更改为<div id="__" />来复制您的代码：

<style>
    #progress {
        position: relative;
        width: 510px;
        height: 60px;
        background: #9cbab4;
        overflow: hidden;
      
    }
    #progress_fill {
        width: 0%;
        height: 100%;
        background: #009579;
        transition: all 0.1s;
    }

    #progress_text{
        position: absolute;
        top: 50%;
        right: 5px;
        transform: translateY(-50%);
        font: bold 20px 'Quicksand', sans-serif;
        color: #ffffff;
    }
</style>

here's the <div /> in my repro code:这是我的复制代码中的<div /> ：

<div id="progress">
    <div id="progress_fill"></div>
    <span id="progress_text">0%</span>
</div>

then on the <script> , You did not have a variable for value so I made one and set the value to zero: let value = 0;然后在<script>上，您没有value变量，所以我做了一个并将值设置为零： let value = 0; then concatenated it with '%' .然后将其与'%'连接起来。

I used window.setInterval then changed the querySelector to document.getElementById because of the changes above.由于上述更改，我使用window.setInterval然后将querySelector更改为document.getElementById 。

here's what it looks like on the script tag:这是脚本标签上的样子：

<script>
 let value = 0;
 window.setInterval(function() {
   if (value != 100) {
     value++;
     document.getElementById("progress_fill").style.width = value + '%';
     document.getElementById("progress_text").textContent = value + '%';
   }
 }, 1000);  
</script>

I included an if (value != 100) to stop the cycle when it reaches 100.我包含了一个if (value != 100)以在循环达到 100 时停止循环。

Hope this helps: here's my code snippet if you want some reference: https://jsbin.com/xiwiyew/5/edit?html希望这会有所帮助：如果您需要参考，这是我的代码片段： https://jsbin.com/xiwiyew/5/edit?html

Answer 2

First of all you have to understand that variables have a scope limitations, so what you can do is get value from your innerHTML and update it in each function call.首先，您必须了解变量具有 scope 限制，因此您可以从 innerHTML 获取值并在每个 function 调用中更新它。 this way you can get realtime value, without storing it somewhere globally.通过这种方式，您可以获得实时价值，而无需将其存储在全局的某个地方。

Here is the working code for the same.这是相同的工作代码。

 setInterval(function () { const progress__text = document.querySelector(".progress__text"); const progress__fill = document.querySelector(".progress__fill"); if (progress__text && progress__fill) { let value = parseInt(progress__text.innerHTML.split("%")[0]); if (value === 100) { progress__fill.style.width = "0%"; progress__text.innerHTML = "0%"; } else { progress__fill.style.width = ++value + "%"; progress__text.innerHTML = ++value + "%"; } } }, 100);

 .progress { position: relative; width: 510px; height: 60px; background: #9cbab4; overflow: hidden; }.progress__fill { width: 0%; height: 100%; background: #009579; transition: all 0.1s; }.progress__text { position: absolute; top: 50%; right: 5px; transform: translateY(-50%); font: bold 20px "Quicksand", sans-serif; color: #ffffff; }

 <body> <div class="progress"> <div class="progress__fill"></div> <span value="0" class="progress__text">0%</span> </div> </body>

Answer 3

I have taken you example and played around a bit.我以你为例，玩了一下。 I have changed it up for I think suits better.我已经改变了它，因为我认为更适合。 Problem one was you did not call the updateProgressBar() in your interval.问题一是您没有在间隔内调用 updateProgressBar() 。 So it did not work.. I think the code speaks for itself.所以它没有用..我认为代码不言自明。 If you have a question let me know如果您有任何问题，请告诉我

My code.我的代码。 Note: you could chose to put the two lines in the update function and move them directly in the interval function.注意：您可以选择将这两行放在更新 function 中，并将它们直接移动到区间 function 中。 Also the function does not have a cap now. function 现在也没有上限。 and will go above 100% if left running long enough.如果运行时间足够长，go 会超过 100%。 Hope this helps希望这可以帮助

        value = 0;
        setInterval(function() {
            value++;
            updateProgressBar(value);
        }, 1000);

        function updateProgressBar(value) {
            document.querySelector(".progress__fill").style.width = value + "%"
            document.querySelector(".progress__text").innerHTML = value + "%"
        }

Looking at your code I am geussing you are new.看着你的代码，我猜你是新人。 Try writing out/ describing what you want in your head and try have your code replicate that.尝试写出/描述您想要的内容，并尝试让您的代码复制它。 Example: I want a progressbar with a value, that increments every second.示例：我想要一个带有值的进度条，该值每秒递增。 (interval function tells that now). （间隔 function 现在告诉我们）。 Than the logic that looks clunky/reads less easy can be put behind a function比看起来笨重/读取不太容易的逻辑可以放在 function 后面

Answer 4

This isn't an accurate way of timing a animation, but pretty simple to implement这不是计时 animation 的准确方法，但实现起来非常简单

 const animation = { duration: 2, // animation length in seconds steps: 60, counter: 0, incrementCounter() { this.counter += ((1 / this.duration) * (this.steps / 1000) * 100); this.counter = Math.min(this.counter, 100) } } const draw = setInterval(updateAnimation, animation.steps); function updateAnimation() { animation.incrementCounter(); document.querySelector(".progress__fill").style.width = animation.counter + '%' document.querySelector(".progress__text").textContent = animation.counter + '%' if (animation.counter === 100) { animation.counter = 0; clearInterval(draw) }; }

 .progress { position: relative; width: 510px; height: 60px; background: #9cbab4; overflow: hidden; }.progress__fill { width: 0%; height: 100%; background: #009579; transition: all 0.1s; }.progress__text { position: absolute; top: 50%; right: 5px; transform: translateY(-50%); font: bold 20px 'Quicksand', sans-serif; color: #ffffff; }

 <div class="progress"> <div class="progress__fill"></div> <span class="progress__text">0%</span> </div>

如何让酒吧在 1 秒内跑完？在 html css 和 javascript

问题描述

4 个解决方案

解决方案1
1 2022-09-12 07:33:25

解决方案2
1 2022-09-12 08:11:54

解决方案3
1 已采纳 2022-09-12 08:34:19

解决方案4
0 2022-09-12 09:38:55

如何让酒吧在 1 秒内跑完？ 在 html css 和 javascript

问题描述

4 个解决方案

解决方案1 1 2022-09-12 07:33:25

解决方案2 1 2022-09-12 08:11:54

解决方案3 1 已采纳 2022-09-12 08:34:19

解决方案4 0 2022-09-12 09:38:55

如何让酒吧在 1 秒内跑完？在 html css 和 javascript

解决方案1
1 2022-09-12 07:33:25

解决方案2
1 2022-09-12 08:11:54

解决方案3
1 已采纳 2022-09-12 08:34:19

解决方案4
0 2022-09-12 09:38:55