【问题标题】:Javascript hide div and show another div with simple countdownJavascript隐藏div并用简单的倒计时显示另一个div
【发布时间】:2015-02-01 10:32:15
【问题描述】:

有没有办法隐藏 div 使用 javascript 显示另一个 div?

<div class="div1">"here must show countdown 10 seconds"</div>
<div class="div2">"show this div after countdown"</div>

例如:当页面加载时,div1 必须显示并且必须有 10 秒的倒计时。倒计时完成后隐藏 div1 并显示 div2

谢谢你回答我的问题。

感谢 RTPMatt 回复了我一次,但没有成功。

【问题讨论】:

    标签: javascript jquery html css


    【解决方案1】:

    请试试这个

        <script language="javascript">
        var timeout,interval
        var threshold = 10000;
        var secondsleft=threshold;
    
        window.onload = function()
        {
            startschedule();
        }
    
         function startChecking()
         {
            secondsleft-=1000;
            document.querySelector(".div1").innerHTML = "Activating in " + Math.abs((secondsleft/1000))+" secs";  
            if(secondsleft == 0)
            {
                //document.getElementById("clickme").style.display="";
                clearInterval(interval);
                document.querySelector(".div1").style.display="none";
                document.querySelector(".div2").style.display="";
            }
        }
        function startschedule()
        {
              clearInterval(interval);
              secondsleft=threshold;
              document.querySelector(".div1").innerHTML = "Activating in " + Math.abs((secondsleft/1000))+" secs";  
               interval = setInterval(function()
               {
                   startChecking();
               },1000)              
       }
    
       function resetTimer()
       {
            startschedule();
       }
    </script>
        <div class="div1">"here must show countdown 10 seconds"</div>
        <div class="div2" style="display:none;">"show this div after countdown"</div>
    

    【讨论】:

    • 祝你在世界上好运。上面的代码完美运行。非常感谢。
    • 嘿。我已经在 youtube iframe 上尝试了上面的代码这里的链接我是如何做到的 plnkr.co/edit/1JNleQc6JhvplHEfZqvW?p=preview 视频将在倒计时计数的同时加载。倒计时时它会像在后台一样播放。倒计时结束后有什么办法让它加载 iframe 吗?它必须在倒计时为 0 后加载 iframe 并播放它
    • 展示的时候把想要的url放到iframe的src属性中,希望对你有帮助!
    • 感谢您抽出宝贵时间回答我,我真的很感激。你所有的代码对我来说都很完美,但我只在最后一步被困在这里。检查第一个链接,如果我通过单击视频 1 和视频 2 来切换视频,它会起作用,但是当我添加您的代码时,它无法切换视频 plnkr.co/edit/RhMjODNrZggtY0tEsCif?p=preview 并且您的代码将阻止切换视频不知道出了什么问题@ 987654323@
    • 尝试更新 jquery 路径 tgo-tv.com/js/jquery-1.9.0.min.js 不起作用。使用code.jquery.com/jquery-1.9.0.min.js
    【解决方案2】:

    你可以试试这个:

    $(function (){
     $("#div1").show();
     setTimeout(function(){$("#div1").hide(); $("#div2").show();},10*1000)
    }) 
    

    加载 dom 时,会显示 div1。然后你启动一个计时器,当脉冲时,隐藏div1并显示div2

    【讨论】:

    • 感谢您的回答,但 Hemant 是为我工作的代码。感谢您的时间
    猜你喜欢
    • 2015-10-15
    • 2016-11-27
    • 1970-01-01
    • 2012-02-25
    • 1970-01-01
    • 1970-01-01
    • 2014-10-28
    • 1970-01-01
    相关资源
    最近更新 更多