Question

所以在我之前的问题之后，我意识到我现在能做什么。但我遇到了一个问题。我尝试了几种方式和谷歌搜索，没有任何效果。我试图让用户打开我的页面，他们得到一个输入的屏幕让我们说出他们的名字，然后当他们提交时它消失了，一个新的屏幕显示欢迎，“名字”，然后消失，页面加载。这就是我猜的基本上只是输入和输出。如果我了解很多。谢谢。 div是为了造型。

编辑：

这是我到目前为止所得到的。我知道有点乱。 https://plnkr.co/edit/gOOM3VlokaP7qAUdCVfV?p=preview

-------------------------.--------------------- -------------------------

<div id="name_container">

    <input type="text" id="txtName" value="">
    <input type="button" value="Submit" onclick="inputTxt();showMessage()">
</div>
<div id="welcomeMessage">
    <p id="txtOutput"></p>
</div>
<script>
        function inputTxt() {
            var name = document.getElementById("txtName").value;
            document.getElementById("txtOutput").innerHTML = 'Welcome to my AMD Website,  ' + name;
        }



</script>

Answer 1

检查此Plunker：https://plnkr.co/edit/OhLznXwtcqaXvddDmAqT?p=preview

淡化动画由animate.css提供。正在使用jQuery，尽管你也可以在javascript中编写它。

说明：

$(document).ready(function() {
  var name = "";
  $(".first").addClass("animated fadeInDown"); <-- First fade animation happens


  $(".button1").click(function() { <-- If this button is pressed, the value in the input field gets stored to name
    name = $("#name").val();

    $("#welcome").text(name); <-- this adds name to the span field.

    $(this).parent("div").addClass("animated fadeOutUp"); <-- this causes div to disappear

    $(".second").addClass("animated fadeInDown"); <-- this causes the next div to appear
  });

  $(".button2").click(function() { <-- After this, the last div is loaded.



    $(this).parent("div").addClass("animated fadeOutUp");

    $(".third").addClass("animated fadeInDown");
  });

});

输入和屏幕更改为输出

1 个答案: