Question

我正在尝试制作一个动态进度条，其宽度从1％开始到100％；这是功能

const dynamicBar = (id)=>{
            let bar = document.getElementById(id);
            let width = 1;

            let id= setInterval(frame,10);
            function frame(){
                if(width>=100){
                    clearInterval(id);
                }
                else{
                    bar.style.width = width + "%";
                    width++;
                }
            }

        };

和html部分：

<div class="w3-light-grey">
    <div class="w3-red" style="width:20%;height:20px;" id="bar1">       
    </div>  
</div>

<button onClick="dynamicBar('bar1')" class="w3-button">Click Me</button>

但是该功能不起作用。如果我使用var而不是let，那么它会起作用，但是我想知道如何使用let关键字来做到这一点。

Answer 1

let不允许您定义两次，因此您需要使用其他名称。参数和第5行的参数均为id，let不允许。

例如，

let var1 = true;
let var1 = false;

将引发错误，因为它两次定义了var1。但是，您可以更改值。

let var1 = true;
var1 = false;

上面的代码块可以正常工作。使用let是为了避免在大型程序中意外地覆盖变量。

const dynamicBar = (idName) => {
  let bar = document.getElementById(idName);
  let width = 1;

  let id = setInterval(frame, 10);

  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      bar.style.width = width + "%";
      width++;
    }
  }

};

<div class="w3-light-grey">
  <div class="w3-red" style="width:20%;height:20px;background-color:red;" id="bar1">
  </div>
</div>

<button onClick="dynamicBar('bar1')" class="w3-button">Click Me</button>

Answer 2

使用var时，您的第一个ID被第二个ID分配所覆盖，因此不会引发错误。但是当您使用let时，它倾向于保持代码完整性，并拒绝。

作为示例

let foo = "something" 
let foo = "another thing"

give you this, "Identifier 'foo' has already been declared"

但是

const interval = = setInterval(frame, 10);

还有一件事，就是将const用作常量值。

代替此

let id = setInterval（frame，10）;

使用

clearInterval(interval)

确保您清除成名的时间间隔

SqlCommand cmd = new SqlCommand("Select * from tbl_log where Username ='" + textBox1.Text + "' and Password = '", con);

//Here you're trying to add parameters that don't exist    
cmd.Parameters.AddWithValue("un", textBox1.Text);
cmd.Parameters.AddWithValue("pw", textBox2.Text);

您的代码将开始工作

setInterval和clearInterval不起作用

2 个答案: