Javascript隐藏div并显示另一个div与简单的倒计时

时间:2015-02-01 10:32:15

标签: javascript jquery html css

有没有办法隐藏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回答了我一次,但它没有工作。

2 个答案:

答案 0 :(得分:2)

你可以试试这个:

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

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

答案 1 :(得分:2)

请试试这个

    <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>