javascript - 用js寫一個按照固定時間彈出,彈出三次
迷茫
迷茫 2017-06-12 09:32:02
0
4
773

用js寫一個判讀,例如:一個層,第一次是10秒後彈出,關閉以後,20秒再次彈出,關閉以後,40秒以後再次彈出。然後就不彈出了。

var firstShow = 10000;
var secondShow = 20000;
var threeShow = 400000;

setTimeout(openMpM, firstShow);
function openMpM() {
    $("#swtCenter2").fadeIn(1000);
}

var clearAfter = setTimeout(openMpM, secondShow);
var clearAfter1 = setTimeout(openMpM, threeShow);

function closeM() {
    $("#swtCenter2").fadeOut(1000);
    setTimeout(openMpM, 50000);
}

直接沒有思路,怎麼讓他三次以後就不彈了呢,希望詳細寫一下。

迷茫
迷茫

业精于勤,荒于嬉;行成于思,毁于随。

全部回覆(4)
迷茫

最後一次彈出執行之後,把定時器清除不就行了…

代言
        function first(){
            alert('第一次');
            setTimeout(second,20000);
        }
        function second(){
            alert('第二次');
            setTimeout(third,40000);
        }
        function third(){
            alert('第三次')
        }
        setTimeout(first,10000);

這樣不知道能不能行

        var firstShow=1000;
        var secondShow=5000;
        var threeShow=10000;
        var n=0;
        setTimeout(openMpM,1000);
        function openMpM() {
            $("#swtCenter2").fadeIn(1000);
            $("#swtCenter2").fadeOut(1000);
            n++;
            switch (n){
                case 1:
                setTimeout(openMpM,secondShow);
                    break;
                case 2:
                setTimeout(openMpM,threeShow);
                    break;    
            }
        }

顯示隱藏條件 你自己加

迷茫
<p id="box"></p>
    <button id="btn">hide</button>
    <script>
        var times = [2000, 4000, 6000];
        function State(times) {
            var self = this;
            this.times = times
            this.oBox = document.getElementById('box');
            this.btn = document.getElementById('btn');
            this.i = 0;

            this.btn.onclick = function() {
                self.change()
            }
        }
        State.prototype.show = function() {
            var self = this;
            setTimeout(function() {
                self.oBox.style.display = "block";
            }, this.times[this.i++])
        }
        State.prototype.change = function(time) {
            if(this.i == this.times.length) {
                alert('没有数据了');
                return;
            }
            this.oBox.style.display = 'none';
            this.time = time
            this.show();
        }
        var s = new State(times);
        s.show();
    </script>

你參考下這個,關閉的時候是手動點擊關閉的

Ty80

簡單實現了一下,不知道有沒有滿足你的需求

var timer,num=4;
$('关闭').on('click',function(){
  $("#swtCenter2").fadeOut();
  clearInterval(timer);
  alertTime();
});

function alertTime(){
  num--;
  if(num<=0){
   clearInterval(timer);
   return false;
  }
  timer=setInterval(function(){
    $("#swtCenter2").fadeIn();
  },10000);
}
alertTime();

搞錯時間了,稍微改了一下,應該就是這樣

var timer,num=-1;
$('关闭').on('click',function(){
  $("#swtCenter2").fadeOut(0);
  clearInterval(timer);
  alertTime();
});

function alertTime(){
  num++;
  var idx=num;
  idx=!idx?0.5:idx;
  if(num>2){
   clearInterval(timer);
   return false;
  }
  timer=setInterval(function(){
    $("#swtCenter2").fadeIn(0);
  },10000*2*idx);
}
alertTime();
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!