ボッス要素の内容を指定回数分点滅

投稿日: 2013年12月6日作成者: alphasis

JavaScriptでボッス要素の内容を指定回数だけ点滅させるサンプル。

実装例（サンプル）

実装例（サンプル）の動作について

「３回点滅」ボタンをクリックすると、背景色が黄色のボックス要素を６秒間に３回点滅させる。
「５回点滅」ボタンをクリックすると、背景色が黄色のボックス要素を１０秒間に５回点滅させる。
点滅中は、ボタン操作を無効にする。

ソースコード

JavaScript

<script type="text/javascript">
function blink( $setCount ) {
$setCount--;
var $count = 0;
var $buttons = document.getElementById( "buttonBox" ).getElementsByTagName( "button" );
var $blinkBox = document.getElementById( "blinkBox" );
var $blinkBoxContents = '<div id="blinkBoxContents"></div>';
for( var $i = 0; $i < $buttons.length; $i++ ) {
$buttons[$i].disabled = true;
}
$blinkBox.innerHTML = "";
setTimeout(
function(){
$blinkBox.innerHTML = $blinkBoxContents;
},
1000
);
var $intervalID = window.setInterval(
function(){
$blinkBox.innerHTML = "";
setTimeout(
function(){
$blinkBox.innerHTML = $blinkBoxContents;
if( ++$count == $setCount ){
clearInterval( $intervalID );
for( var $i = 0; $i < $buttons.length; $i++ ) {
$buttons[$i].disabled = false;
}
}
},
1000
);
},
2000
);
}
</script>

HTML

<div id="buttonBox">
<button onclick="blink(3)">３回点滅</button>
<button onclick="blink(5)">５回点滅</button>
</div>
<div id="blinkBox">
<div id="blinkBoxContents"></div>
</div>

CSS

<style>
#blinkBox {
height: 202px;
margin: 10px;
}
#blinkBoxContents {
width: 200px;
height: 200px;
background-color: yellow;
border: 1px solid gray;
border-radius: 10px;
}
</style>

カテゴリー: JavaScript, アニメーション, 逆引きパーマリンク