Question

我希望第二个div在点击提交按钮后显示3秒，并且在一段时间后显示第三个div。我希望第二和第三个div一个接一个地显示在第一个div的相同高度和宽度。首先显示第二个div并且在3秒后显示第三个div显示并返回到第一个div所有div都堆叠在主要内部容器位置绝对位于主容器，其位置是相对的。这是用JavaScript完成的。

任何帮助？

HTML：

<div class="main-container">
    <div class="first">
        <button onclick="somefunction()">Submit</button>
    </div>
    <div class="second">
    </div>
    <div class="third">
    </div>
</div>

CSS：

.main-container,.first,.second,.third{
    height:100px;
    width:100px;
}

.main-container{
    position:relative;
    margin: 0px auto;
}

.first,.second.third{
    position:absolute;
    top:0px;
    left:0px;
}

.first{
    background-color:red;
}

.second{
    background-color:blue;
    display:none;
}

.third{
    background-color:green;
    display:none;
}

使用Javascript：

function start() {
  setTimeout("show_second()", 3000);
}

function show_second() {
  document.getElementById("second").style.display = "inline";
}

Answer 1

您可以链接setTimeout。

你也在使用getElementById，但是你还没有给出元素ID，只有类，所以你也需要添加它们：

function start() {
  setTimeout("show_second()", 3000);
}

function show_second() {
  document.getElementById("first").style.display = "none";
  document.getElementById("second").style.display = "block";
  setTimeout("show_third()", 3000);
}

function show_third() {
  document.getElementById("second").style.display = "none";
  document.getElementById("third").style.display = "block";
}

.main-container,
.first,
.second,
.third {
  height: 100px;
  width: 100px;
}

.main-container {
  position: relative;
  margin: 0px auto;
}

.first,
.second.third {
  position: absolute;
  top: 0px;
  left: 0px;
}

.first {
  background-color: red;
}

.second {
  background-color: blue;
  display: none;
}

.third {
  background-color: green;
  display: none;
}

<div class="main-container">
  <div id="first" class="first">
    <button onclick="start()">Submit</button>
  </div>
  <div id="second" class="second">
  </div>
  <div id="third" class="third">
  </div>
</div>

在JavaScript中提交按钮后，使div显示为一个接一个

1 个答案: