javascript - Use js to write a pop-up based on a fixed time, pop-up three times
迷茫
迷茫 2017-06-12 09:32:02
0
4
870

Write an interpretation using js, for example: for a layer, the first time it pops up after 10 seconds, after it is closed, it pops up again after 20 seconds, and after it is closed, it pops up again after 40 seconds. Then it doesn't pop up.

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);
}

I just don’t have any ideas. How can I make him stop playing after three times? I hope to write it in detail.

迷茫
迷茫

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

reply all(4)
迷茫

After the last pop-up execution, just clear the timer...

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

I don’t know if this is possible

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

Show hidden conditions, add them yourself

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

Please refer to this, when closing, you need to click to close manually

Ty80

I simply implemented it, I don’t know if it meets your needs

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();

I got the time wrong, I changed it a little bit, it should be like this

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();
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template