点击，减少倒计时与1等等，当倒计时达到0打开窗口

If the downvoters could leave a reason. That'd be great.

Lets say I have a value of 10 on my web page, and a button.

Every time a user clicks on this button, I want to have a visual indication of the value decreasing by 1.

When value is 0 (after 10 clicks) it will hide a div, and show another one.

However when clicking the button, not only the counter needs to reduce by 1 but it also needs to open a window. (It's the same window every click)

On every click I'd also like to change style="width:x%"`` with 10-20-30% and so forth. (But with a delay of 5 seconds)

Does anyone have an idea on how to do all of this, without going overboard on the amount of code.

Here the steps:

• Click button
• Window opens
• Counter goes from 10 to 9
• After 5 seconds have passed the progress bar's style switches to
  width: 10%;

...

Counter reaches 0:

• Hide div X (fadeout)
• Show div X

source code:

function countdown() {
    var i = document.getElementById('counter');
    if (parseInt(i.innerHTML)<=0) {
        //hide div
        //show div
    }
    i.innerHTML = parseInt(i.innerHTML)-1;
    window.open("");
    //change loader
}

This code is maybe the solution you wanted:

function countdown() {
  var i = document.getElementById('counter');
  if (parseInt(i.innerHTML)<=0) {
    $("#counter").fadeout();
    i.innerHTML =10;
    i.style.width="100%";
    $("#counter").fadein(10);
  } else {
    i.innerHTML = parseInt(i.innerHTML)-1;
    setTimeout(function(){
      var i = document.getElementById('counter');
      i.style.width="10%";
      i.innerHTML="1";
    },5000)
  }
  var msg = window.open("", "Window name", "width=200, height=100");
  msg.document.write("Some HTML");
}

You have to add jquery in the html head! Leave a comment if the code doesn't help.