主页 / 问题 / 1436048
Accepted
user503400
Asked:2022-09-04 16:30:35 +0000 UTC2022-09-04 16:30:35 +0000 UTC

为什么每个 DOM 元素操作 setInterval() 只触发一次

  • 772

请帮忙，我通过 setInterval() 设置框的高度在一秒钟内改变 50px。但它只触发一次，元素一次增长 50px，仅此而已，其余的增量在样式中被简单地忽略。为什么会这样。

let app = document.querySelector('.box')
let px = 0

setInterval(() => {
  px = px + 50
  app.style.width = app.style.width + px + 'px';
  console.log(app.style.width + px + 'px');
}, 1000)
.box {
  background-color: grey;
}
<div class="box">box</div>

javascript

2 个回答

  1. Best Answer

    在这种情况下，行

    app.style.width = app.style.width  + px + 'px'

    真的没有意义。足够的

    app.style.width = px + 'px'


    let app  = document.querySelector('.box')
let px = 0

setInterval (()=>{
  px = px + 50  
  app.style.width =  px + 'px'
},1000)
    .box {
  border: 1px solid black;
  width: 20px;
  height: 20px;
}
    <div class="box"></div>

    并且没有进一步的增长，因为在第一次迭代中，一个app.style.width字符串被写入50px，并且在下一次迭代中，这个字符串试图与一个数字相加（加）。当然，什么都行不通。在添加之前，在这种情况下，字符串必须减少为一个数字

    let app  = document.querySelector('.box');
let delta = 50;

setInterval (()=>{    
  app.style.width = (parseInt(app.style.width) || 0) + delta + 'px'
},1000)
    .box {
  border: 1px solid black;
  width: 20px;
  height: 20px;
}
    <div class="box"></div>

    • 4 

  2. let app  = document.querySelector('.box')
let px = 0

setInterval (()=>{
  px = px + 50
  app.style.width =  px + 'px'
},1000)
    .box{
    background-color: red;
    border: 1px solid blue;
    width:0px;
    height:50px;
}
    <div class="box"></div>

    • 3

相关问题