Javascript 单击show div，几秒钟后隐藏我显示的div_Javascript_Html_Css

Javascript 单击show div，几秒钟后隐藏我显示的div

javascript html css

Javascript 单击show div，几秒钟后隐藏我显示的div,javascript,html,css,Javascript,Html,Css,我需要一些人帮我扣扣子。我想当我点击按钮（点击我）时，隐藏的div应该显示出来，但几秒钟后，我的隐藏div会自动隐藏。谢谢代码如下： <!DOCTYPE html> <html> <head> <style> .show { -o-transition: opacity 3s; -moz-transition: opacity 3s; -webkit-transition: opa

我需要一些人帮我扣扣子。我想当我点击按钮（点击我）时，隐藏的div应该显示出来，但几秒钟后，我的隐藏div会自动隐藏。谢谢

代码如下：

<!DOCTYPE html>
<html>
<head>
  <style>
    .show {
         -o-transition: opacity 3s;
         -moz-transition: opacity 3s;
         -webkit-transition: opacity 3s;
         transition: opacity 3s;
      opacity:1;
    }
    .hide{  opacity:0; }
  </style>
  <script>
    function ShowSecond()
    {
      var div2 = document.getElementById("div2");
      div2.className="show";
    }
  </script>
</head>
<body>
<div id="div1" class="show">
  First Div
  <button onclick="ShowSecond()">clickMe</button>
  </div>
  <div id="div2" class="hide">
    Hidden Div
  </div>
</body>
</html>


.表演{
-o-转变：不透明度3s；
-moz转变：不透明度3s；
-webkit转换：不透明度3s；
过渡：不透明度3s；
不透明度：1；
}
.hide{opacity:0；}
函数showsond（）
{
var div2=document.getElementById（“div2”）；
div2.className=“show”；
}
第一组
点击我
隐藏分区

您可以使用

设置超时

功能：

setTimeout（函数（）{
//你的代码在这里
}, 1000);
这将在1秒后执行该功能
如果您想使用jQuery，可以使用.delay（）函数来实现：
$（元素）.show（）.delay（1000.hide（）
更多信息：
您需要setTimeout（）函数
只需使用来执行延时操作
function ShowSecond() {
    var div2 = document.getElementById("div2");
    div2.className = "show";
    var timeOut = setTimeout(function () {
        div2.className = "hide";
    }, 2000);
}


我将setTimeout（..）
用于变量timeOut
的原因：将来您可能需要取消此超时操作，这可以通过ShowSecond
函数中的来完成，请执行以下操作
 function ShowSecond()
 {
     var div2 = document.getElementById("div2");
     div2.className="show";
     setTimeout(function() {
        div2.className="hide";
     }, 3000);
 }

通过以上代码，您的div
将在3s
之后隐藏。时间是您的选择，根据您的需求增加或减少
您也可以使用CSS3动画
而不是过渡：

HTML
CSS
显然，跨浏览器时需要加前缀，纯JavaScript只是为了坚持你的代码，使用jQuery会自动处理这些事情。
如果你使用的是引导css，并且希望纯JavaScript调用此事件，那么你可以使用下面的函数：
document.body.addEventListener('click', function (evt) {
    if (evt.target.className === 'YOUR_CLASS_NAME') {
        var div2 = document.getElementById("ID_FOR_DIV");
        div2.className = "d-block";
        setTimeout(function() {
         div2.className="d-none";
        }, 6000);
    }
}, false);

或者，如果不使用引导，则可以使用
document.body.addEventListener('click', function (evt) {
    if (evt.target.className === 'YOUR_CLASS_NAME') {
        var div2 = document.getElementById("ID_FOR_DIV");
        div2.style.display= 'block';
        setTimeout(function() {
         div2.style.display = 'none';
        }, 6000);
    }
}, false);

setTimeout只是一个普通的JavaScripts，因为我的ans是相同的，所以只添加演示链接。非常感谢Neha，它对我非常有效。非常感谢Blu Angel，它对我非常有效。非常感谢你的建议，我喜欢。：）
function animate() {
    var s = document.getElementById("hiddenDiv1").style;
    s.animationName = 'showAndHide';
    s.animationDuration = '3s';
}

@keyframes showAndHide {
      0% { opacity: 0; }
     50% { opacity: 1; }
    100% { opacity: 0; }    
}

.hideOnStart{
    opacity: 0;
}

document.body.addEventListener('click', function (evt) {
    if (evt.target.className === 'YOUR_CLASS_NAME') {
        var div2 = document.getElementById("ID_FOR_DIV");
        div2.className = "d-block";
        setTimeout(function() {
         div2.className="d-none";
        }, 6000);
    }
}, false);

document.body.addEventListener('click', function (evt) {
    if (evt.target.className === 'YOUR_CLASS_NAME') {
        var div2 = document.getElementById("ID_FOR_DIV");
        div2.style.display= 'block';
        setTimeout(function() {
         div2.style.display = 'none';
        }, 6000);
    }
}, false);