Countdown

by 蔡 育曄

HTML

<div id='bg'>
  <button id='press'>按下去</button>
  <input type='text' id='start' value='0'>
  <p id='op'></p>
</div>

<script src="https://code.jquery.com/jquery-2.1.4.min.js">


</script>

CSS

div {
  background-color: lightblue;
  height: 30vw;
  width: 50vw;
  text-align: center;
}

#press {
  position: absolute;
  text-align: center;
  top: 18vw;
  width: 19vw;
}

#start {
  position: absolute;
  text-align: center;
  top: 22vw;
  width: 18.6vw;
}

#op {
  position: absolute;
  top: 10vw;
  width: 25vw;
  font-size: 300%;
}

JavaScript

$("#press").click(function() {
  myAlert.counter = $('#start').val();
  setTimeout(myAlert, 1000)
})

function myAlert() {
  if (myAlert.counter >= 0) {
    $("#op").text(myAlert.counter);
    --myAlert.counter;
    setTimeout(myAlert, 1000)
  } else {
    //alert('time out');
    changeBg.count = 0;
    setTimeout(changeBg, 400)
  }

}

function changeBg() {
  if ( changeBg.count % 2 == 0) {
    $('#bg').css('background', '#96FFFF');
  } else {
    $('#bg').css('background', '#59FFFF');
  }
   changeBg.count++;
  setTimeout(changeBg, 200)

}