Question

我对javascript很新。

这个示例代码的作用很简单，我知道。一切都很好 - 最后＆＃39;名字＆＃39;和＆＃39;姓氏＆＃39;打印到#status div。

任何人都可以告诉我如何通过javascript填充5秒后淡出该div？

这是我的代码：

的index.html

<html>
 <head>
 <script src="ajax.js"></script>
 </head>
 <body>
  <h3>Testpage</h3>
  First Name: <input id="fn" name="first_name" type="text">  <br><br>
  Last Name: <input id="ln" name="last_name" type="text"> <br><br>
  <input name="sbmt" type="submit" value="Submit" onclick="ajax();">     <br><br>
  <div id="status"></div>
 </body>
</html>

ajax.js

function ajax_post(){
    var hreq = new XMLHttpRequest();
    var url = "php.php";
    var fn = document.getElementById("fn").value;
    var ln = document.getElementById("ln").value;
    var vars = "fn="+fn+"&ln="+ln;
    hreq.open("POST", url, true);
    hreq.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    hreq.onreadystatechange = function() {
        if(hreq.readyState == 4 && hreq.status == 200) {
            var return_data = hreq.responseText;
            document.getElementById("status").innerHTML = return_data;
        }
    }
    hreq.send(vars);
    document.getElementById("status").innerHTML = "processing...";
}

php.php

<?php 
echo 'Firstname: '. $_POST['fn'] . '<br>Lastname: ' . $_POST['ln'];
?>

提前致谢！

此致

安德烈亚斯

Answer 1

您可以在firstname和lastname之后使用setTimeOut函数，如下所示

     setTimeout(function(){ document.getElementById("status").style.display='none' }, 5000);

隐藏在ajax脚本执行后填充的div（一段时间后）

1 个答案: