代码之家 › 专栏 › 技术社区 › user1762507

为什么div没有消失?[副本]

html javascript

user1762507 · 技术社区 · 7 年前

它不会消失吗?我的理解是,你可以使用 document.getElementById('something').style.display = "none";

	function someComplicatedFunction(ms) {
        // This isn't the exact function I am using, 
        // but it has a similar form and the same problem
        let start = new Date().getTime();
        let end = start;
        while (end < start + ms) {
            end = new Date().getTime();
        }
    }
    
    function hideTheOtherDiv() {
    	document.getElementById('div1').style.display = "none";
        document.getElementById('div2').style.display = "initial";
        console.log("Start");

        someComplicatedFunction(3000);
        
        console.log("end");
        document.getElementById('div1').style.display = "initial";
        document.getElementById('div2').style.display = "none";
    }
    
    document.getElementById('div2').style.display = "none";

<!DOCTYPE html>
<html>
<body>

<div id="div1">One</div>
<div id="div2">Two</div>
<button onclick="hideTheOtherDiv()">Switch</button>

</body>

<script type="text/javascript">


</script>

</html>

2 回复 | 直到 7 年前

Pawan Kumar 7 年前

使用 setTimeout() 方法而不是 someComplicatedFunction()

像 JavaScript只有一个线程,方法将执行 这就是为什么如果使用,我们看不到数据变化的原因 一些复杂的函数() 在 ms 当执行该方法时,页面变得没有响应

function hideTheOtherDiv() {

  document.getElementById('div1').style.display = "none";
  document.getElementById('div2').style.display = "initial";
  console.log("Start");

  setTimeout(function() {
    console.log("end");
    document.getElementById('div1').style.display = "initial";
    document.getElementById('div2').style.display = "none";
  }, 3000);
}

document.getElementById('div2').style.display = "none";

<!DOCTYPE html>
<html>

<body>

  <div id="div1">One</div>
  <div id="div2">Two</div>
  <button onclick="hideTheOtherDiv()">Switch</button>

</body>

<script type="text/javascript">
</script>

</html>

Jarek Kulikowski 7 年前

function hideTheOtherDiv() {
    document.getElementById('div1').style.display = "none";
    document.getElementById('div2').style.display = "initial";

    setTimeout( function() {
        document.getElementById('div1').style.display = "initial";  
        document.getElementById('div2').style.display = "none";
    }, 3000);
}

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

3 月前

Jamie · 在CSS链接的文件名中添加Jinja占位符

3 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

4 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

4 月前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

4 月前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

4 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

4 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

4 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

4 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

4 月前