jquery 倒數計時

by j91157j91157

HTML

<div id="RR">
<input type='text' id='startV' value='20'>
  <button id="myB"> 按我！ </button>
  <br> <p id='FF'></p>
</div>



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

CSS

#RR {
  background-color: lightblue;
  width: 50vw;
  height: 50vw;
  text-align: center;
}

#myB {
  position: absolute;
  text-align: center;
  top: 28%;
  width: 18%;
}

#startV {
  position: absolute;
  top: 36%;
  width: 18%;
}

#FF {
  position: absolute;
  top: 15%;
  width: 25%;
  font-family: fantasy;
  font-size: 500%
}

JavaScript

$("#myB").click(
	function() {
    count = $('#startV').val();
    console.log (count);
    setTimeout(gg, 1000);
  }
)

function gg(){
  if(count > 0 ){
  	--count;
  	$("#FF").text (count);
  	setTimeout(gg, 1000);
  } 
  else {
  	alert('Time up！');
    blinkIn();
	}
}

function blinkIn(){
		$("#RR").css("background-color", "yellow");
	setTimeout(blinkOut,500);
}
function blinkOut(){
		$("#RR").css("background-color","red");
	setTimeout(blinkIn,500);
}