CSS動畫の倒數計時

by j91157j91157

HTML

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

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

CSS

#RR {
  background-image: url('https://pic.pimg.tw/jongwenbooks/4b67da2f9715f_n.jpg');
  width: 50vw;
  height: 50vw;
  text-align: center;
}

@-webkit-keyframes flash {
    0% {
        background-color: Yellow;
        opacity: 1;
    }
    22% {
        background-color: Red;
    }
    77% {
        background-color: Yellow;
    }
    100% {
        background-color: Red;
    }
}

.flash {
    -webkit-animation-name: flash;
    -webkit-animation-direction: alternate;
    -webkit-animation-duration: 2000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
}

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

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

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

JavaScript

var count = 0;
var $RR = $('#RR');

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

function gg(){
  if(count > 0 ){
  	--count;
  	$("#number").text (count);
  	setTimeout(gg, 1000);
  } 
  else {
  	alert('Time up！');
    $('#RR').css('background-image','none');
    $RR.addClass('flash');
	}
}